MCP Server
An MCP server that hands your AI coding agent the real Zyncat UI prop types, so it stops guessing them.
Overview
Zyncat UI ships two halves of one agent setup: an agent skill (the component map, picker tables, recipes and theming guide that belong in the model's context) and a built-in Model Context Protocol (MCP) server (the live component APIs, read from the installed package at call time).
Connected to an AI-assisted IDE or autonomous agent (Claude Code, Cursor, Windsurf, Cline, Roo Code), the assistant learns the catalog from the skill and pulls exact prop types from the server before writing JSX—which is what eliminates hallucinated props and invalid styling.
What is MCP?
The Model Context Protocol (MCP) is an open standard created by Anthropic that allows local developer tools, IDEs, and LLMs to safely query workspace data and execute structured tools.
Rather than stuffing entire documentation files into the chat context window, the AI queries the Zyncat UI MCP server on demand—and because the server reads the installed package, its answers always match the version your project actually runs.
Setup
The same command that installs Zyncat UI wires both halves - run it in your project root:
npx zyncat-ui initIt installs @zyncat/ui if the project does not have it yet, copies the zyncat-ui skill into .claude/skills/, registers the MCP server in .mcp.json, imports the stylesheet and writes the theme file beside it. Restart the agent session afterwards, and re-run the command after upgrading @zyncat/ui so the skill matches the installed version; existing files are left alone.
npx zyncat-ui init is the whole setup—Claude Code reads .mcp.json and .claude/skills/ natively. The equivalent manual server entry:
{ "mcpServers": { "zyncat-ui": { "command": "node", "args": ["./node_modules/@zyncat/ui/dist/mcp.js"] } }}Tools Reference
The Zyncat UI MCP server exposes three tools to connected AI assistants:
get_component(components)
The workhorse. Accepts one name or a list—["select", "text-field", "dialog"]—and returns, per component: the maintainers' usage doc, the live docs page URL, a verified example, and the complete TypeScript prop interface with JSDoc and defaults, shared type chunks inlined. An unknown name returns the full catalog, so a wrong guess self-corrects.
search_api(query)
Ranked keyword search across every usage doc, prop type and design token—finds which component owns a prop, behavior or token. Zero matches returns the whole catalog instead of a dead end.
get_tokens(group?)
The closed CSS token vocabulary with real values—surfaces, text contrast steps, radii, elevations, spacing, motion—plus the four theming override levels.
Sample AI Prompts
Once the skill and server are wired, you can prompt your AI assistant naturally:
- “Create a multi-step user registration form using TextField, OtpField, and a primary Button.”
- “Add a confirmation Dialog with a danger button that shows a toast on confirmation.”
- “What props does the DateRangeField component take? Show me an example with min and max bounds.”
- “What color tokens should I use for secondary button hover states and subtle card backgrounds?”
Frequently asked questions
An MCP server is a small local program an AI assistant queries over the Model Context Protocol - an open standard from Anthropic - instead of loading whole documentation files into its context window. The Zyncat UI one speaks JSON-RPC over stdio as the zyncat-ui-mcp executable and answers questions about the components installed in your project.
Run npx zyncat-ui init in your project root: it writes the zyncat-ui entry into .mcp.json, which Claude Code reads natively, and copies the agent skill into .claude/skills/. The manual equivalent is { "mcpServers": { "zyncat-ui": { "command": "node", "args": ["./node_modules/@zyncat/ui/dist/mcp.js"] } } }. Restart the agent session afterwards.
Yes - it is a plain stdio MCP server with zero dependencies, so any MCP client can run it. Cursor takes the same JSON in .cursor/mcp.json, and a client configured outside a project, such as Claude Desktop, can run it straight off the registry with npx -y --package=@zyncat/ui@latest zyncat-ui-mcp.
Three. get_component(components) takes one name or a list and returns each component’s usage doc, live docs URL, a verified example and the complete TypeScript prop interface; search_api(query) ranks a keyword search across every usage doc, prop type and design token; get_tokens(group) prints the CSS token vocabulary with real values. An unknown name or a zero-match query returns the full catalog rather than a dead end.
No. Unlike the general-purpose MCP servers you add for a new capability, this one ships inside the package you already installed and only accelerates AI-assisted editing - @zyncat/ui renders identically without it. The same contract is readable directly from node_modules/@zyncat/ui/dist/types/ and the *.usage.md files.
Yes. The server reads the installed package’s usage docs, dist/types/ declarations and src/tokens/*.css at call time instead of shipping a snapshot, so the prop types it returns are the ones your project actually runs. Re-run npx zyncat-ui init after upgrading so the bundled agent skill matches too.