# UI components for Claude Code and Cursor

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](https://pixilui.com/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](https://pixilui.com/docs/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

1. **The rules file**, every session: before building approval, run, tool call, thinking or streaming UI by hand, search the MCP server.
2. **The MCP search**, when you ask for something: it finds `approval-card` for "a confirm step before the agent refunds".
3. **The item's markdown page**: props, states, keyboard, and the "notes for AI" list of mistakes agents make with that item.
4. **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.

## Related

- [AI and agents](https://pixilui.com/docs/ai-and-agents): every file and format an agent can read.
- [MCP](https://pixilui.com/docs/mcp): addresses, login, tokens and tools.
- [CLI](https://pixilui.com/docs/cli): `init`, `add`, `skill` and their flags.
- [React component libraries for AI agent interfaces](https://pixilui.com/guides/react-component-libraries-for-ai-agent-interfaces): the other libraries agents can install from.
- [Why AI-built apps look the same](https://pixilui.com/guides/why-ai-built-apps-look-the-same): what a rules file changes.