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.
Set up Prodular UI
Skip this if the project already has it. See installation for details.
npx prodular-ui initConnect 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 cursoror--client vscodefor those editors.npx prodular-ui mcp init --client claudeRestart 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 mcp add prodular-ui -- npx -y prodular-ui@latest mcp{ "mcpServers": { "prodular-ui": { "command": "npx", "args": ["-y", "prodular-ui@latest", "mcp"] } }}{ "servers": { "prodular-ui": { "type": "stdio", "command": "npx", "args": ["-y", "prodular-ui@latest", "mcp"] } }}[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.