Docs

AI and MCP

The components are plain TypeScript with a doc comment on every prop, so coding assistants can read, install and change them like your own code.

The shadcn MCP server

The shadcn CLI includes an MCP server that lets an assistant browse, search and install items from the registries in your components.json. Add this registry, then set the server up for your tool (Claude Code, Cursor, VS Code, Codex or OpenCode):

// components.json
{
  "registries": {
    "@beautiful-charts": "https://beautifulcharts.dev/r/{name}.json"
  }
}

npx shadcn@latest mcp init --client claude

The assistant can then list every chart and block, read its files before installing, and run the install command for you. Pro items need the Pro registry and token from Installation.

The registry index

https://beautifulcharts.dev/r/registry.json lists every free item with its title, description and dependencies, and each item's JSON carries its full source. Every component page links its install command, so an assistant given a page can install from it directly.

Asking for a chart

Name the chart, give the install command and say what the data is. Props are typed and documented, so the assistant fills them in from your editor's types rather than guessing:

Add a Beautiful Charts area chart of weekly signups to the dashboard.
Install it with: npx shadcn@latest add https://beautifulcharts.dev/r/area-chart.json
Pass our rows as data, set config labels, and keep missing weeks as null.

The charts keep missing values as gaps and never invent numbers, so ask for null where data is missing rather than zero.