MCP Server
MCP support for registry developers - Enable AI assistants to discover and use SmoothUI components.
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 SmoothUI 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://smoothui.dev/r/[name].json
, you should have a file at https://smoothui.dev/r/registry.json
.
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:
Configure your registry in your components.json
file:
components.json
{
"registries": {
"@smoothui": "https://smoothui.dev/r/{name}.json"
}
}
Run the following command in your project:
Terminal
npx shadcn@latest mcp init --client claude
Restart Claude Code and try the following prompts:
- Show me the components in the smoothui registry
- Create a landing page using items from the smoothui registry
- Install the SiriOrb component from smoothui
Note: You can use /mcp
command in Claude Code to debug the MCP server.
Example Prompts
Once MCP is configured, you can use these prompts with your AI assistant:
Component Discovery
- “Show me all available components in the smoothui registry”
- “What animation components are available in smoothui?”
- “List all interactive components from smoothui”
Component Installation
- “Install the SiriOrb component from smoothui”
- “Add the RichPopover component to my project”
- “Install multiple components: SiriOrb, AnimatedInput, and ScrollableCardStack”
Component Usage
- “Create a landing page using the SiriOrb component”
- “Show me how to use the ScrollableCardStack component”
- “Build a dashboard with smoothui components”
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.
SmoothUI MCP Features
SmoothUI registry is fully MCP-compatible and includes:
🎯 Component Discovery
AI assistants can discover all available SmoothUI components and their descriptions.
⚡ Automatic Installation
Components are installed with all dependencies and utilities automatically included.
🔧 Smart Dependencies
Required packages like clsx
and tailwind-merge
are automatically detected and included.
📝 Usage Examples
AI assistants can provide usage examples and help integrate components into your projects.
Learn More
You can read more about the MCP server in the shadcn MCP documentation.