āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/nolly-studio/cult-ui/mcp-server ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.
For example, you can ask an AI assistant to "Build a landing page using components from the cult-ui registry" or "Find me a login form from the shadcn registry".
Registries are configured in your project's components.json file.
{
"registries": {
"@cult-ui": "https://cult-ui.com/r/{name}.json"
}
}
Select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the Configuration section.
<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"> **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 all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
**Note:** You can use `/mcp` command in Claude Code to debug the MCP server.
Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:
- Show me all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:
- Show me all available components in the shadcn registry
- Add the button, dialog and card components to my project
- Create a contact form using components from the shadcn registry
Model Context Protocol (MCP) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to:
The MCP server acts as a bridge between your AI assistant, component registries and the shadcn CLI.
The shadcn MCP server works out of the box with any shadcn-compatible registry.
@namespace syntaxYou can use any MCP client to interact with the shadcn MCP server. Here are the instructions for the most popular ones.
To use the shadcn MCP server with Claude Code, add the following configuration to your project's .mcp.json file:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["shadcn@latest", "mcp"]
}
}
}
After adding the configuration, restart Claude Code and run /mcp to see the shadcn MCP server in the list. If you see Connected, you're good to go.
See the Claude Code MCP documentation for more details.
To configure MCP in Cursor, add the shadcn server to your project's .cursor/mcp.json configuration file:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["shadcn@latest", "mcp"]
}
}
}
After adding the configuration, enable the shadcn MCP server in Cursor Settings.
Once enabled, you should see a green dot next to the shadcn server in the MCP server list and a list of available tools.
See the Cursor MCP documentation for more details.
To configure MCP in VS Code with GitHub Copilot, add the shadcn server to your project's .vscode/mcp.json configuration file:
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": ["shadcn@latest", "mcp"]
}
}
}
After adding the configuration, open .vscode/mcp.json and click Start next to the shadcn server.
See the VS Code MCP documentation for more details.
The MCP server supports multiple registries through your project's components.json configuration. This allows you to access components from various sources including private registries and third-party providers.
Configure additional registries in your components.json:
{
"registries": {
"@cult-ui": "https://cult-ui.com/r/{name}.json",
"@internal": {
"url": "https://internal.company.com/{name}.json",
"headers": {
"Authorization": "Bearer ${REGISTRY_TOKEN}"
}
}
}
}
For private registries requiring authentication, set environment variables in your .env.local:
REGISTRY_TOKEN=your_token_here
API_KEY=your_api_key_here
For more details on registry authentication, see the Authentication documentation.
Once the MCP server is configured, you can use natural language to interact with registries. Try one of the following prompts:
If the MCP server isn't responding to prompts:
shadcn is installed in your projectIf components aren't loading from registries:
@namespace/component)If components fail to install:
components.json fileIf you see the No tools or prompts message, try the following:
npx clear-npx-cacheMCP: project-* in the dropdown.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā