MCP server

Connect Claude, Cursor and Codex to ndekoui with MCP

Give your coding agent the whole catalogue. It searches the primitives, components, blocks and templates, reads their source, installs them with the shadcn CLI and writes the code around them by the rules of the design system.

Add to CursorAdd to VS Code

Using an app that is not listed?

https://ui.ndekocode.dev/mcp

Add it as a remote server over Streamable HTTP, with no sign-in.

Setup

Add the server to your client

Every client takes the same address. Only the place you paste it changes, and each tab links the official steps it follows.

  1. 1

    Run this in a terminal. Add --scope user to use the server in every project, not only the current one.

    Terminal

    claude mcp add --transport http ndeko-ui https://ui.ndekocode.dev/mcp
  2. 2

    To share it with everyone on the project, commit it in .mcp.json at the root instead.

    .mcp.json

    {
      "mcpServers": {
        "ndeko-ui": {
          "type": "http",
          "url": "https://ui.ndekocode.dev/mcp"
        }
      }
    }

7 tools and 2 prompts

What your agent can ask for

Every tool reads and none writes. Your agent gets data and commands back, and you decide what runs.

  • search_items

    Finds pieces by what they do, ranked the way the search on this site ranks them.

    Takes
    query, optional kind and limit
    Returns
    name, title, kind, category and description of each match
  • list_items

    Walks one shelf of the catalogue, narrowed to a category, a family or a group.

    Takes
    kind, optional category, offset and limit
    Returns
    name, title, kind, category and description, with the total
  • get_item

    Returns the source of every file, what it depends on, the command that installs it and the page that shows it.

    Takes
    name, optional file
    Returns
    files with source, dependencies, install command, preview link
  • get_install_command

    Writes the shadcn command for several pieces at once, for npm, pnpm, yarn or bun.

    Takes
    names, optional package manager
    Returns
    the command with URLs and the @ndeko form
  • get_theme

    Lists the tokens for light and dark, the radius and easing scales and the utilities the theme adds.

    Takes
    nothing
    Returns
    tokens, Tailwind names, utilities and keyframes
  • get_design_guidelines

    Gives the agent the rules of the design system before it writes a line: radius, hairlines, materials, motion.

    Takes
    optional section
    Returns
    the key rules, or one section of the design system
  • list_categories

    Draws the map of the catalogue: families, categories and groups, each with its count.

    Takes
    nothing
    Returns
    every family, category and group with its count

Prompts that come with it

  • Build a page with ndekoui

    Plans and builds a page from ndekoui blocks and components, following the design guidelines.

    Name
    build_page
    Asks for
    what the page is for
  • Rebuild a screen with ndekoui

    Replaces the hand-made parts of an existing screen with the matching ndekoui pieces, keeping its data and behaviour.

    Name
    rebuild_screen
    Asks for
    the screen, as a file path or a description
  • Works where you already build

    One address for every client on this page, from a terminal agent to an app builder. The same tools answer everywhere, so what your agent learns in Cursor holds in Claude.

  • Read-only: it never changes your project

    The server answers with names, source and commands, and holds no key to your files or accounts. Files change only when your agent runs the shadcn command, the same way they would if you ran it.

shadcn MCP

Already use shadcn's MCP server?

It installs from every registry declared in components.json. Declare ndekoui once and it browses, searches and installs our items next to the others. Our server adds the design rules, the theme and the catalogue map; you can run both.

  1. 1

    Declare the registry

    Add the namespace to components.json, next to the registries you already use.

    components.json

    {
      "registries": {
        "@ndeko": "https://ui.ndekocode.dev/r/{name}.json"
      }
    }
  2. 2

    Set up shadcn's MCP server

    Pick your client: claude, cursor, vscode, codex or opencode.

    Terminal

    npx shadcn@latest mcp init --client claude
  3. 3

    Ask for items by their namespaced name

    Its list and search tools read our catalogue at https://ui.ndekocode.dev/r/registry.json. The same names work in the CLI.

    Terminal

    npx shadcn@latest add @ndeko/pricing-01

Examples

Things to ask once it is connected

Name the library in the request, and the agent reaches for the server on its own.

  • Use ndekoui to build the pricing page of a time tracking app, with a switch between monthly and yearly billing

  • Find the ndekoui range calendar and put it in the booking step of our checkout

  • Rebuild our team settings screen with ndekoui blocks and keep the current form logic

  • Which ndekoui pieces animate a number that changes? Install the one that fits the cart quantity

  • Read the ndekoui design guidelines, then review this card against them and fix what differs

Questions

Before you connect it

What people ask about the server, answered short.