Nasaq UI
Nasaq design system docs for agents: 390 components for React, Vue, Blade and HTML, with Arabic RTL.
Sollte ich dies verwenden
Qualität und Sicherheit
Befunde (2)
- HIGH
- MEDIUMin get_setup
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"nasaq": {
"url": "https://mcp.nasaqui.com/mcp"
}
}
}Remote-Endpunkte
https://mcp.nasaqui.com/mcpstreamable-httpWas es kann
Tool-Inventar
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.
Eingabe-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'.
Eingabe-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, …).
Eingabe-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.
Eingabe-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.
Eingabe-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.
Eingabe-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
Nachweis