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.
Using an app that is not listed?
https://ui.ndekocode.dev/mcpAdd 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.
Claude Code
Claude Code docs, opens in a new tab- 1
Run this in a terminal. Add
--scope userto 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
To share it with everyone on the project, commit it in
.mcp.jsonat 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
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
Set up shadcn's MCP server
Pick your client:
claude,cursor,vscode,codexoropencode.Terminal
npx shadcn@latest mcp init --client claude - 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.