UI components for Claude Code and Cursor

Q: How do I let my coding agent use a component library?

Add the library's registry to components.json, give the agent a rules file that says to use the library before writing UI by hand, and connect the library's MCP server if it has one. For PixilUI, the one-line setup does all three.

Q: Does it work with Codex and VS Code?

Yes. AGENTS.md is read by Codex, and the MCP page has the Codex and VS Code setup.

To give Claude Code or Cursor a component library it uses well, paste one line into the agent: Set up PixilUI in this project by following https://pixilui.com/setup.md. It adds the @pixilui shadcn registry and the foundation, writes a rules file the agent reads every session, connects the MCP server, and lists every file it changed. After that, ask for an approval card or a run timeline by name and the agent installs the item instead of writing one.

The one-line setup#

text

Set up PixilUI in this project by following https://pixilui.com/setup.md

setup.md is written for the agent, step by step. It checks the project first (React 19, Tailwind v4, your package manager) and stops on Tailwind 3 instead of upgrading without asking. It never asks for a Pro key; if you have Pro, it tells you to run npx pixilui@latest login yourself.

What each piece does#

Piece	What the agent gets	Claude Code	Cursor
shadcn registry	Installs items as source into `components/pixilui/`	`npx shadcn@latest add @pixilui/<item>`	Same
Rules file	Short rules loaded every session: search before building by hand, tokens only, restyle through `className`	`AGENTS.md` block, read through `CLAUDE.md`	`.cursor/rules/pixilui.mdc`
MCP server	Search the catalog, read an item, get its install command and source	`claude mcp add --transport http pixilui https://mcp.pixilui.com/mcp`	`.cursor/mcp.json`
Agent skill	The find, read, install, wire and review loop, and every item by job	`npx pixilui@latest skill` into `.claude/skills/pixilui/`	Reads the rules and MCP instead
`llms.txt` and per-item markdown	Plain-text docs for an agent that browses	`https://pixilui.com/llms.txt`	Same

Free items need no account anywhere in this table. Pro uses the login address of the MCP server and npx pixilui@latest login; see MCP.

By hand#

bash

npx pixilui@latest init
claude mcp add --transport http pixilui https://mcp.pixilui.com/mcp
npx pixilui@latest skill

init adds the registry and the foundation and writes AGENTS.md and .cursor/rules/pixilui.mdc, keeping the rest of AGENTS.md. Claude Code reads CLAUDE.md: if yours does not mention AGENTS.md, add a line @AGENTS.md. For Cursor, put the MCP server in .cursor/mcp.json:

json

{
  "mcpServers": {
    "pixilui": { "url": "https://mcp.pixilui.com/mcp" }
  }
}

What the agent reads, in order#

The rules file, every session: before building approval, run, tool call, thinking or streaming UI by hand, search the MCP server.
The MCP search, when you ask for something: it finds approval-card for "a confirm step before the agent refunds".
The item's markdown page: props, states, keyboard, and the "notes for AI" list of mistakes agents make with that item.
The install command, then the import from @/components/pixilui/<item>.

Prompts that work#

Name the item: "Use the PixilUI approval card for the refund confirmation."
Ask it to read the item's page first: "Read https://pixilui.com/components/run-timeline/markdown, then wire it to our run events."
Point at a framework guide when you have one: "Follow https://pixilui.com/guides/human-approval-vercel-ai-sdk."

Questions#

Which component library works best with Claude Code?

One the agent can read and install without guessing: a shadcn registry for installs, a rules file it loads every session, an MCP server to search, and plain-text docs per item. PixilUI ships all four, and so do several other libraries; compare what their items cover and how they look.

How do I let my coding agent use a component library?

Add the library's registry to components.json, give the agent a rules file that says to use the library before writing UI by hand, and connect the library's MCP server if it has one. For PixilUI, the one-line setup does all three.

Does the MCP server need an account?

No, not for free items. Pro and Team log in from the browser through the /mcp/pro address, or use an access token in CI.

Does it work with Codex and VS Code?

Yes. AGENTS.md is read by Codex, and the MCP page has the Codex and VS Code setup.

AI and agents: every file and format an agent can read.
MCP: addresses, login, tokens and tools.
CLI: init, add, skill and their flags.
React component libraries for AI agent interfaces: the other libraries agents can install from.
Why AI-built apps look the same: what a rules file changes.