MCP server
Use the Canvas UI registry with the shadcn MCP server, and let your AI assistant browse and install components for you.
The shadcn MCP server works with any shadcn-compatible registry, including this one. Point it at the Canvas UI registry and your assistant can list components, read their metadata, and add them straight to your project.
Configure the registry
Canvas UI is a trusted shadcn registry, so the @canvas-ui namespace works out of the box, with or without MCP:
npx shadcn@latest add @canvas-ui/liquid-reactOptionally, you can pin the registry in your components.json file:
{
"registries": {
"@canvas-ui": "https://canvasui.dev/r/{name}.json"
}
}Set up your client
Run the setup for your client, straight from your project:
npx shadcn@latest mcp init --client claudeRestart Claude Code and try the following prompts:
- Show me the components in the @canvas-ui registry
- Add liquid from the @canvas-ui registry to my hero section
You can use the /mcp command in Claude Code to debug the MCP server.