Nasaq UI

Working · 1.5 s

io.github.fadymondy/nasaqv0.3.1

Nasaq design system docs for agents: 390 components for React, Vue, Blade and HTML, with Arabic RTL.

Developer Tools

Source Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://mcp.nasaqui.com/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

get_component Read-only

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, …).

namestring, required

includearray

Default: ['readme']

frameworkstring

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.

Tools (6)

get_component

read-only

Argument	Type	Description
name*	string
include	array	Default: ['readme']
framework	string	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.

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1
    },
    "include": {
      "type": "array",
      "items": {
        "enum": [
          "readme",
          "api",
          "examples",
          "source",
          "story",
          "all"
        ],
        "type": "string"
      },
      "description": "Default: ['readme']"
    },
    "framework": {
      "enum": [
        "react",
        "shadcn",
        "inertia",
        "inertia-vue",
        "html",
        "alpine",
        "vue",
        "nuxt",
        "blade",
        "livewire",
        "filament",
        "laravel",
        "tomatophp"
      ],
      "type": "string",
      "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."
    }
  }
}

get_foundation

Design rules behind the components: colour roles, layout and density, architecture, brand/logo rules, README spec. Omit `topic` to list topics.

read-only

Argument	Type	Description
topic	string

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "topic": {
      "type": "string"
    }
  }
}

get_setup

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.

read-only

Argument	Type	Description
framework	string	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.

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "framework": {
      "enum": [
        "react",
        "shadcn",
        "inertia",
        "inertia-vue",
        "html",
        "alpine",
        "vue",
        "nuxt",
        "blade",
        "livewire",
        "filament",
        "laravel",
        "tomatophp"
      ],
      "type": "string",
      "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."
    }
  }
}

list_components

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.

read-only

Argument	Type	Description
query	string	Free-text filter, e.g. 'table' or 'menu'
category	string	Only this category
framework	string	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.

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "query": {
      "type": "string",
      "description": "Free-text filter, e.g. 'table' or 'menu'"
    },
    "category": {
      "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"
      ],
      "type": "string",
      "description": "Only this category"
    },
    "framework": {
      "enum": [
        "react",
        "shadcn",
        "inertia",
        "inertia-vue",
        "html",
        "alpine",
        "vue",
        "nuxt",
        "blade",
        "livewire",
        "filament",
        "laravel",
        "tomatophp"
      ],
      "type": "string",
      "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."
    }
  }
}

list_tokens

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.

read-only

Argument	Type	Description
limit	integer
prefix	string

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "properties": {
    "limit": {
      "type": "integer",
      "maximum": 500,
      "minimum": 1
    },
    "prefix": {
      "type": "string"
    }
  }
}

search_components

Ranks components for a need described in words, e.g. 'switch between products', 'empty state', 'keyboard shortcut'.

read-only

Argument	Type	Description
limit	integer
query*	string

Input schema (JSON)

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "required": [
    "query"
  ],
  "properties": {
    "limit": {
      "type": "integer",
      "maximum": 30,
      "minimum": 1
    },
    "query": {
      "type": "string",
      "minLength": 1
    }
  }
}