AI and MCP

Plug the library into a project and let your AI coding tool find components, read their props and assemble screens on its own. The library ships a machine-readable catalog; an MCP server serves it to Claude Code, Cursor, Windsurf, Zed and VS Code.

1. Set up a project

terminal
npm i @ziyarago/ui
npx @ziyarago/ui-mcp init
creates
.mcp.json                          MCP server entry
AGENTS.md / CLAUDE.md              rules: use the library, check props, use tokens
.claude/skills/ziyarago-ui/        Claude skill
.cursor/rules/ziyarago-ui.mdc      Cursor rule

Restart the AI tool to load the server. Or add it by hand:

Claude Code
claude mcp add ziyarago-ui -- npx -y @ziyarago/ui-mcp
.mcp.json (Cursor, Windsurf, VS Code)
{ "mcpServers": { "ziyarago-ui": { "command": "npx", "args": ["-y", "@ziyarago/ui-mcp"] } } }

2. What the AI can do

suggest_uiComponents and page templates for a task in plain words
search_componentsKeyword search over names, purposes and props
list_componentsEvery component, optionally per group
get_componentFull API: props with every allowed value, defaults, slots, events, notes
list_templatesPage templates and their slots
get_templateWhat each slot of a template accepts, with props and an example
get_setupInstall and setup for Vue, Nuxt or React

Try:

  • Build a bookings page: table with filters, status badges and bulk actions.
  • Redesign this settings screen with the library, keep dark and light theme working.
  • Add a date range picker and a price slider to the catalog filters.

3. Without MCP

  • /llms.txt: the index with one line per component and template.
  • /llms-full.txt: every prop, value, slot and event (about 110 KB).
  • /manifest.json: the same as JSON. Also in the package: @ziyarago/ui/manifest.json, @ziyarago/ui/llms.txt, @ziyarago/ui/llms-full.txt.

4. Rules for the agent

init writes this into AGENTS.md. Paste it into any tool that reads project instructions.

AGENTS.md
## UI: @ziyarago/ui
Build interfaces with @ziyarago/ui. Do not write custom components or raw CSS for things the library has.
1. suggest_ui / search_components / list_templates to find what to use.
2. Start from a page template when one fits; wrap app pages in UiAppShell.
3. get_component for EVERY component before using it; use only documented props.
4. Style with var(--zg-*) tokens. Sizes: size="xs|sm|md|lg|xl".
5. One brand-filled element per view. Check light, dark and RTL.

Why it works

The catalog is generated from the same metadata that builds the props tables in these docs and is checked against the component code on every release, so the AI sees exactly what the installed version accepts. The MCP server reads the manifest of the version in the project's node_modules.