Nasaq UI
Nasaq design system docs for agents: 390 components for React, Vue, Blade and HTML, with Arabic RTL.
Should I use this
Quality & Safety
Findings (2)
- HIGHTool poisoning patterns detected
- MEDIUMTool description contains suspicious base64-like encoded stringin get_setup
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"nasaq": {
"url": "https://mcp.nasaqui.com/mcp"
}
}
}Remote endpoints
https://mcp.nasaqui.com/mcpstreamable-httpWhat it can do
Tool inventory
Tools (6)
🟢list_components(category, query, framework)
Lists every Nasaq web component with its category, status, one-line summary and exports. Filter by category or a text query. With a non-React `framework`, lists only the components that exist in that stack.
Input Schema
{
"type": "object",
"properties": {
"category": {
"description": "Only this category",
"type": "string",
"enum": [
"account",
"actions",
"admin",
"ai",
"ai-agents",
"alerts",
"analytics",
"auth",
"billing",
"bookings",
"brand",
"charts",
"chat",
"collaboration",
"crm",
"data-display",
"delivery",
"developer-tools",
"editors",
"feedback",
"feedback-sdk",
"files",
"form-builders",
"forms",
"gamification",
"healthcare",
"integrations",
"keyboard",
"layout",
"marketing",
"monitoring",
"navigation",
"onboarding",
"overlays",
"pickers",
"platforms",
"pricing",
"productivity",
"security",
"seo",
"server-tools",
"store",
"store-admin",
"typography",
"utilities",
"website",
"wellness",
"work",
"workflow"
]
},
"query": {
"description": "Free-text filter, e.g. 'table' or 'menu'",
"type": "string"
},
"framework": {
"description": "Default react (@fadymondy/nasaq/web). shadcn: the same React components copied by the shadcn CLI. inertia / inertia-vue: Laravel + Inertia. vue / nuxt / inertia-vue: Vue 3. blade / livewire / filament / laravel / tomatophp: Laravel Blade components. html / alpine: rendered HTML run by Alpine.",
"type": "string",
"enum": [
"react",
"shadcn",
"inertia",
"inertia-vue",
"html",
"alpine",
"vue",
"nuxt",
"blade",
"livewire",
"filament",
"laravel",
"tomatophp"
]
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}🟢search_components(query, limit)
Ranks components for a need described in words, e.g. 'switch between products', 'empty state', 'keyboard shortcut'.
Input Schema
{
"type": "object",
"properties": {
"query": {
"type": "string",
"minLength": 1
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 30
}
},
"required": [
"query"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}🟢get_component(name, include, framework)
Returns one component's details and manual. `name` may be the folder (app-shell), the title (AppShell) or any export (SidebarItem). `include` picks what to return: readme (default, full manual), api (API section only), examples, source (TSX), story (Storybook CSF), all. `framework` returns the component in another stack (html, alpine, vue, blade, livewire, filament, inertia, shadcn, …).
Input Schema
{
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 1
},
"include": {
"description": "Default: ['readme']",
"type": "array",
"items": {
"type": "string",
"enum": [
"readme",
"api",
"examples",
"source",
"story",
"all"
]
}
},
"framework": {
"description": "Default react (@fadymondy/nasaq/web). shadcn: the same React components copied by the shadcn CLI. inertia / inertia-vue: Laravel + Inertia. vue / nuxt / inertia-vue: Vue 3. blade / livewire / filament / laravel / tomatophp: Laravel Blade components. html / alpine: rendered HTML run by Alpine.",
"type": "string",
"enum": [
"react",
"shadcn",
"inertia",
"inertia-vue",
"html",
"alpine",
"vue",
"nuxt",
"blade",
"livewire",
"filament",
"laravel",
"tomatophp"
]
}
},
"required": [
"name"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}🟢get_foundation(topic)
Design rules behind the components: colour roles, layout and density, architecture, brand/logo rules, README spec. Omit `topic` to list topics.
Input Schema
{
"type": "object",
"properties": {
"topic": {
"type": "string"
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}🟢list_tokens(prefix, limit)
CSS custom properties (--nq-*) with their value in each context (light, dark, brand, density). Filter by prefix, e.g. '--nq-danger' or 'surface'. In Tailwind use them as utilities: bg-nq-surface, text-nq-fg-muted, border-nq-border.
Input Schema
{
"type": "object",
"properties": {
"prefix": {
"type": "string"
},
"limit": {
"type": "integer",
"minimum": 1,
"maximum": 500
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}🟢get_setup(framework)
Install command, CSS imports, provider and the usual app skeleton. Call once before building UI. `framework` picks the guide: react (default), shadcn, inertia, html, alpine, vue, or blade/livewire/filament/laravel/tomatophp.
Input Schema
{
"type": "object",
"properties": {
"framework": {
"description": "Default react (@fadymondy/nasaq/web). shadcn: the same React components copied by the shadcn CLI. inertia / inertia-vue: Laravel + Inertia. vue / nuxt / inertia-vue: Vue 3. blade / livewire / filament / laravel / tomatophp: Laravel Blade components. html / alpine: rendered HTML run by Alpine.",
"type": "string",
"enum": [
"react",
"shadcn",
"inertia",
"inertia-vue",
"html",
"alpine",
"vue",
"nuxt",
"blade",
"livewire",
"filament",
"laravel",
"tomatophp"
]
}
},
"$schema": "http://json-schema.org/draft-07/schema#"
}Community
Evidence