Prodular UI

MCP server

Your coding agent gets the kit before it writes a line: the rules, every component and block with how to use it, what your project already has, installs that respect your license and a check of the code it wrote.

  1. Set up Prodular UI

    Skip this if the project already has it. See installation for details.

    npx prodular-ui init
  2. Connect your agent

    Run this in the project root. It adds the server to the agent's project config and keeps any servers you already have. Use --client cursor or --client vscode for those editors.

    npx prodular-ui mcp init --client claude
  3. Restart the agent and ask for a screen

    The agent sees six new tools and instructions to use them. Ask for what you want in plain words. It looks up the right blocks and components, installs what is missing, writes the code and checks it.

What your agent can do

get_guidelines
The kit's rulesSemantic tokens, one container level, marking AI output, motion, layout and licensing. The agent reads them once before it writes UI.
search_items
Find components and blocksSearch by what you are building, such as billing settings or chat with tool calls. Full-page blocks come first when one fits.
get_item
How to use one itemWhen to use it and when not, rules for agents, props, a minimal example, dependencies and the install command.
get_project
Your projectTheme and mode, installed components and blocks, and whether a license is available for Pro items.
add_items
InstallAdds components and blocks with everything they need and reports each file as created, updated, skipped or failed, read from the disk. An item that needs a license is reported with the reason, so the agent can offer a free one instead.
check_ui
Check the code it wroteErrors first: missing accessible names, controls the keyboard cannot reach, render targets without nativeButton={false}, nested buttons. Then warnings: hand-built widgets the kit has, hand-positioned overlays, raw colors, text below 11px, removed focus rings and cards inside cards.

Things to ask

  • Build a billing settings page with the current plan, usage and invoices.
  • Add a chat panel to the customer page that streams answers and shows tool calls.
  • Turn this table into a data table with filters, saved views and bulk actions.
  • Review app/settings against the Prodular UI rules and fix what you find.

The agent decides when to call each tool. If it starts writing UI without them, tell it to use the Prodular UI tools first. Adding the rules from AI ready to AGENTS.md or CLAUDE.md makes that the default.

Pro components and blocks

Free items install without a license. For Pro items, run npx prodular-ui login once on your machine; the server uses the same saved token. When an item needs a license the agent gets a clear answer instead of an error, and the rules tell it to offer the closest free item.

Other agents

Any MCP client can run the server over stdio. The command is the same everywhere.

Claude Code, from the terminal
claude mcp add prodular-ui -- npx -y prodular-ui@latest mcp
.mcp.json, .cursor/mcp.json and most other clients
{  "mcpServers": {    "prodular-ui": {      "command": "npx",      "args": ["-y", "prodular-ui@latest", "mcp"]    }  }}
.vscode/mcp.json
{  "servers": {    "prodular-ui": {      "type": "stdio",      "command": "npx",      "args": ["-y", "prodular-ui@latest", "mcp"]    }  }}
~/.codex/config.toml
[mcp_servers.prodular-ui]command = "npx"args = ["-y", "prodular-ui@latest", "mcp"]

What it reads and sends

The server runs on your machine. It reads files in your project to report what is installed and to check code, and never sends your code anywhere. It downloads the component index from ui.prodular.co, falling back to a copy inside the package when you are offline, and requests the items you install from the registry with your license token.

If the tools do not show up

Restart the agent after mcp init, and open it in the project root, where components.json lives. The server needs Node 20.18 or newer. To check it starts, run npx prodular-ui@latest mcp in the project: it waits silently for a client, so stop it with Ctrl+C.