mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-29 23:55:02 +00:00
7304ef2105
* docs(www): namespaced registries * fix * docs(www): add cli command to docs * fix * docs(www): update registry docs * feat(shadcn): add mcp init command * docs: restructure mcp docs * chore: add changesets * fix: formatting * fix(shadcn): dependencies * debug * fix * docs: add more troubleshooting docs * docs: update registry docs * feat(shadcn): add audit checklist tool * chore: add mcp flag * fix: format * docs: replace beta with latest * docs: add changelog * fix
110 lines
3.6 KiB
Plaintext
110 lines
3.6 KiB
Plaintext
---
|
|
title: MCP Server
|
|
description: MCP support for registry developers
|
|
---
|
|
|
|
The [shadcn MCP server](/docs/mcp) 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](/docs/registry/registry-json).
|
|
|
|
---
|
|
|
|
## 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>
|
|
</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>
|
|
</Tabs>
|
|
|
|
You can read more about the MCP server in the [MCP documentation](/docs/mcp).
|
|
|
|
---
|
|
|
|
## Best Practices
|
|
|
|
Here are some best practices for MCP-compatible registries:
|
|
|
|
1. **Clear Descriptions**: Add concise, informative descriptions that help AI assistants understand what a registry item is for and how to use it.
|
|
2. **Proper Dependencies**: List all `dependencies` accurately so MCP can install them automatically.
|
|
3. **Registry Dependencies**: Use `registryDependencies` to indicate relationships between items.
|
|
4. **Consistent Naming**: Use kebab-case for component names and maintain consistency across your registry.
|