AI & MCP

Parlemen UI is built so an AI assistant can install and use it correctly: a shadcn registry it can query, an MCP server, and Markdown docs written for models.

MCP server

We use the official shadcn MCP server. It reads the registries in your components.json, so once @parlemen is added your assistant can list, search, view and install Parlemen components.

1. Add the registry (once per project):

pnpm dlx shadcn@latest registry add "@parlemen=https://ui.parlemen.dev/r/{name}.json"

2. Configure your client. Pick one: claude, cursor, vscode, codex or opencode.

pnpm dlx shadcn@latest mcp init --client claude

Or add it by hand to your client's MCP config:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

3. Ask in plain language:

Show me all components in the @parlemen registry
Add @parlemen/button, @parlemen/card and @parlemen/dialog to my project
Build a settings page with @parlemen/tabs, @parlemen/switch and @parlemen/form
Find a @parlemen component for showing a list of invoices

Markdown for models

Every page is also available as plain Markdown, following the llms.txt convention.

  • /llms.txt: index of every page plus the rules below.
  • /llms-full.txt: all component docs, usage and source in one file. Paste it into any chat.
  • /docs/<name>.md: one component, e.g. /docs/button.md.

Each component page has a Copy page button, plus Open in ChatGPT and Open in Claude.

Teach your project

Drop this into AGENTS.md, CLAUDE.md or .cursor/rules so every assistant in your repo writes Parlemen-style code:

# UI
This project uses Parlemen UI (https://ui.parlemen.dev/llms.txt).
- Install with the shadcn CLI. Add the registry once: `npx shadcn@latest registry add "@parlemen=https://ui.parlemen.dev/r/{name}.json"`, then `npx shadcn@latest add @parlemen/<name>`. Projects must be initialised with `npx shadcn@latest init -b radix`.
- Install `@parlemen/theme @parlemen/providers` first. Theme ships the tokens (tonal scales, semantic roles, light + dark, clay shadows) as app/parlemen.css. In app/layout.tsx import "./parlemen.css" instead of globals.css, load Bricolage_Grotesque (--font-display) and JetBrains_Mono (--font-code) from next/font/google, add suppressHydrationWarning to <html>, and wrap children in <Providers> from @/components/ui/providers.
- Use semantic colour classes only: `bg-primary text-on-primary`, `bg-primary-container text-on-primary-container`, `bg-surface`, `bg-surface-sunken`, `text-on-surface`, `text-on-surface-muted`. Roles: primary, secondary, tertiary, accent, success, warning, danger, info. Never raw hex or palette classes.
- Clay look: raised = `bg-surface shadow-clay-sm`, sunken = `bg-surface-sunken shadow-well`. No hard borders. Rounded everything.
- Icons: Phosphor only (`@phosphor-icons/react`, `XxxIcon`). weight="bold" by default, "fill" for active, "duotone" for big decorative icons. Never hand-draw SVG icons.
- Motion: `motion/react` with presets from `@/lib/motion` (springs.snappy | squish | bouncy | gentle).
- Components take `color` (role) and `variant` (solid | soft | outline | ghost) props, e.g. `<Button variant="soft" color="danger">`.
- No browser-drawn controls (native select, date, color, range, file inputs). Use Select, Calendar + Popover, Slider.