MCP Server - Shadcn Ui

The shadcn MCP server works out of the box with any shadcn-compatible registry. You do not need to do anything special to enable MCP support for your registry.

Prerequisites

The MCP server works by requesting your registry index. Make sure you have a registry item file at the root of your registry named registry.

For example, if your registry is hosted at https://acme.com/r/[name].json, you should have a file at https://acme.com/r/registry.json or https://acme.com/r/registry if you're using a JSON file extension.

This file must be a valid JSON file that conforms to the registry schema.

Configuring MCP

Ask your registry consumers to configure your registry in their components.json file and install the shadcn MCP server:

<Tabs defaultValue="claude"> <TabsList> <TabsTrigger value="claude">Claude Code</TabsTrigger> <TabsTrigger value="cursor">Cursor</TabsTrigger> <TabsTrigger value="vscode">VS Code</TabsTrigger> <TabsTrigger value="codex">Codex</TabsTrigger> <TabsTrigger value="opencode">OpenCode</TabsTrigger> </TabsList> <TabsContent value="claude" className="mt-4"> **Configure your registry** in your `components.json` file:

```json title="components.json" showLineNumbers
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}
```

**Run the following command** in your project:

```bash
npx shadcn@latest mcp init --client claude
```

**Restart Claude Code** and try the following prompts:
   - Show me the components in the acme registry
   - Create a landing page using items from the acme registry

**Note:** You can use `/mcp` command in Claude Code to debug the MCP server.

</TabsContent> <TabsContent value="cursor" className="mt-4"> **Configure your registry** in your `components.json` file:

```json title="components.json" showLineNumbers
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}
```
**Run the following command** in your project:
   ```bash
   npx shadcn@latest mcp init --client cursor
   ```

Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:
   - Show me the components in the acme registry
   - Create a landing page using items from the acme registry

</TabsContent> <TabsContent value="vscode" className="mt-4"> **Configure your registry** in your `components.json` file:

```json title="components.json" showLineNumbers
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}
```
**Run the following command** in your project:
   ```bash
   npx shadcn@latest mcp init --client vscode
   ```

Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:
   - Show me the components in the acme registry
   - Create a landing page using items from the acme registry

</TabsContent> <TabsContent value="codex" className="mt-4"> **Configure your registry** in your `components.json` file:

```json title="components.json" showLineNumbers
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}
```

**Add the following configuration** to `~/.codex/config.toml`:
   ```toml
   [mcp_servers.shadcn]
   command = "npx"
   args = ["shadcn@latest", "mcp"]
   ```

**Restart Codex** and try the following prompts:
   - Show me the components in the acme registry
   - Create a landing page using items from the acme registry

</TabsContent> <TabsContent value="opencode" className="mt-4"> **Configure your registry** in your `components.json` file:

```json title="components.json" showLineNumbers
{
  "registries": {
    "@acme": "https://acme.com/r/{name}.json"
  }
}
```

**Run the following command** in your project:
   ```bash
   npx shadcn@latest mcp init --client opencode
   ```

**Restart OpenCode** and try the following prompts:
   - Show me the components in the acme registry
   - Create a landing page using items from the acme registry

</TabsContent> </Tabs>

You can read more about the MCP server in the MCP documentation.

Best Practices

Here are some best practices for MCP-compatible registries:

Clear Descriptions: Add concise, informative descriptions that help AI assistants understand what a registry item is for and how to use it.
Proper Dependencies: List all dependencies accurately so MCP can install them automatically.
Registry Dependencies: Use registryDependencies to indicate relationships between items.
Consistent Naming: Use kebab-case for component names and maintain consistency across your registry.