How to Let AI Agents Install UI Components via MCP

Connect Claude Code or Cursor to a component registry over the Model Context Protocol, so your agent can search components by describing the problem — and install them without copy-pasting.

What this unlocks

Instead of you browsing a docs site, copying source and pasting it into your project, your coding agent asks the registry directly: “I need a destructive action the user must deliberately confirm” — gets ranked matches with reasons — and pulls the complete, installable component into your codebase. The whole loop happens inside the agent conversation.

What MCP is, in one paragraph

The Model Context Protocol (MCP) is an open standard that lets AI tools call external services through a uniform interface. A component registry that speaks MCP exposes tools like search_components and get_component; any MCP-capable agent — Claude Code, Cursor, and others — can call them without custom integration.

Connect Claude Code

One command (Zyeon UI's endpoint shown; MCP access requires a Pro token):

claude mcp add --transport http zyeon https://ui.zyeon.ai/api/mcp \
  --header "Authorization: Bearer zyeon_YOUR_TOKEN"

Check the connection with /mcp inside Claude Code. Tokens are created on your account page — the plaintext is shown once.

Connect Cursor

Add this to ~/.cursor/mcp.json (global) or a project-level .cursor/mcp.json:

{
  "mcpServers": {
    "zyeon": {
      "url": "https://ui.zyeon.ai/api/mcp",
      "headers": { "Authorization": "Bearer zyeon_YOUR_TOKEN" }
    }
  }
}

Never commit a project-level config that contains a real token.

The three tools your agent gets

search_components — describe the interaction or problem, not a component name. The registry ranks matches by the underlying job and explains why each fits.
list_components — browse the catalog metadata, filterable by category (ui / block / hook) and tier (free / pro).
get_component — returns the complete shadcn-compatible registry item, ready for the agent to write into your project.

Search quality note: query by intent. “A button that needs to be held down to confirm a dangerous action” finds the right component even if you don't know it's called hold-to-confirm.

Without MCP: the shadcn CLI still works

Free components install with no token and no MCP — the standard shadcn CLI reads the registry directly:

npx shadcn@latest add https://ui.zyeon.ai/r/hold-to-confirm.json

For Pro components via CLI, add a namespaced registry with your token to components.json — the setup snippet is on your account page. See also: what a shadcn-compatible registry actually is.

Try it

Browse the component catalog (353 components — every one ships with live preview, full source, its generation prompt and a concept map), or see pricing for Pro access.