Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
How-to

Install ai2 with the shadcn MCP

Point the shadcn MCP server at the @ai2 registry once, then let your agent search, read and install components on its own.

3 min read
Share

If your agent speaks the shadcn MCP protocol, it already knows how to use this registry. There are two small steps: register the registry, then connect the MCP server.

1. Register the registry

Add @ai2 to your project's components.json. This is what the MCP reads to discover the catalog.

{
  "registries": {
    "@ai2": "https://ai2.design/r/{name}.json"
  }
}

2. Connect the MCP server

Add the shadcn MCP server to your agent. In Claude Code that is a single command, scoped to the user, the project or just locally.

claude mcp add shadcn --scope user -- npx shadcn@latest mcp

3. Ask for UI

Restart the agent and ask. It discovers the registry from your components.json, searches items, reads the examples and runs the install itself.

Search the @ai2 registry and install the button component.

For the full walkthrough, agent by agent, see the Agents and MCP guide in the docs.

Back to the blog