# Use with AI

PUI publishes plain-text files, an installer and agent rules made for AI tools.

## Install in a project

The `pui` command sets up a React + Tailwind v4 project and adds components from the PUI registry.

- Set up the project (style, cn(), AGENTS.md, CLAUDE.md, Magoo MCP): `npx @aline-aroucha/pui init`
- Add components: `npx @aline-aroucha/pui add button card input`
- Add every component: `npx @aline-aroucha/pui add --all`
- Update installed components: `npx @aline-aroucha/pui add --all --overwrite`

## Files for agents

- Index for LLMs: `https://aline-aroucha.github.io/pui/llms.txt`
- All documentation in one file: `https://aline-aroucha.github.io/pui/llms-full.txt`
- Project rules (AGENTS.md): `https://aline-aroucha.github.io/pui/AGENTS.md`
- Tokens as JSON: `https://aline-aroucha.github.io/pui/tokens.json`
- CSS with the tokens (globals.css): `https://aline-aroucha.github.io/pui/globals.css`

## Make the agent follow the rules

1. `pui init` writes `AGENTS.md` and a `CLAUDE.md` that imports it, so Claude Code and Codex pick up the rules automatically.
2. For Cursor, save the same text as `.cursor/rules/pui.mdc`. For GitHub Copilot, as `.github/copilot-instructions.md`.
3. `pui init` also adds the read-only **Magoo MCP** to `.mcp.json`, so agents can check keyboard, screen reader and acceptance criteria while they build.
4. To let agents find and install PUI components on their own, `pui init` registers `@pui` in `components.json`; turn on the shadcn MCP with `npx shadcn@latest mcp init`.
5. Every page on this site has a Markdown twin: use **Copy for LLM** at the top of a page, or replace `.html` with `.md` in its address.

## Registry

```json
{
  "registries": {
    "@pui": "https://aline-aroucha.github.io/pui/r/{name}.json"
  }
}
```

## Suggested first prompt

```text
Use the PUI design system. Read https://aline-aroucha.github.io/pui/llms-full.txt before you start.
Use only components from @/components/ui, color only through tokens (bg-primary, text-muted-foreground…),
US English UI copy, one primary action per area, and Magoo behavior for every component.
```

---
PUI documentation · https://aline-aroucha.github.io/pui/ai.html