How to use the Model Context Protocol with Caprice UI.
Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect to external data sources and tools.
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.
Quick start
First, make sure the Caprice UI registry is present in your components.json file:
{
"registries": {
"@caprice": "https://caprice-ui.com/r/{name}.json"
}
}Then select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the official shadcn MCP documentation.
Run the following command in your project:
npx shadcn@latest mcp init --client claudeRestart 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.
Run the following command in your project:
npx shadcn@latest mcp init --client cursorOpen 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
Run the following command in your project:
npx shadcn@latest mcp init --client vscodeOpen .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
Note: The shadcn CLI cannot automatically update ~/.codex/config.toml.
You'll need to add the configuration manually for Codex.
Run the following command in your project:
npx shadcn@latest mcp init --client codexThen, add the following configuration to ~/.codex/config.toml:
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]Restart Codex 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
Usage
You can now ask your IDE to use any Caprice UI component. Here are some prompt examples:
- Add Button component from the Caprice UI registry.
- Show me all available components in the Caprice UI registry.
Learn more
To learn more about using the shadcn MCP server, including manual setup for different clients, please visit the official shadcn MCP documentation.