# MCP

Learn how to use the shadcn MCP (Model Context Protocol) server with chartcn.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



[MCP](https://modelcontextprotocol.io/) is an open protocol that standardizes how applications provide context to LLMs. The shadcn CLI can register an MCP server so your editor can discover registry components—including items you install from **chartcn** via the same CLI.

## Configure MCP [#configure-mcp]

Run:

```bash
npx shadcn@latest mcp init
```

Choose your MCP client when prompted, then enable the MCP server in that client to finish setup.

## Usage [#usage]

With MCP enabled, you can ask your IDE to work with **ChartGPU** patterns and chartcn registry components. Example prompts:

* Build a dashboard with a zoomable **Line Chart**, legend, and tooltip.
* Add a stacked **Area Chart** for desktop and mobile traffic.
* Create a grouped **Bar Chart** with an animated loading state.
* Add a themed **Donut Chart** with accessible labels.
* Visualize a large point cloud with the **Scatter Chart** density mode.

Install components from this registry with `npx shadcn@latest add` and the JSON URL from each docs page, then import them into your React tree as usual.