| name | mcp-tools |
| description | Set up and use shadcn MCP servers for AI-assisted component discovery and installation. This skill should be used when the user asks about "shadcn MCP", "shadcn MCP server", "set up shadcn MCP for Claude", "component MCP tools", "Jpisnice shadcn MCP", "shadcn-ui-mcp-server", "AI component installation", or needs to configure MCP servers for shadcn/ui component work.
|
Two MCP servers enable AI-assisted shadcn/ui component discovery and installation: the official shadcn MCP and the Jpisnice community MCP server.
Official shadcn MCP
The official MCP is built into the shadcn CLI (v3.0+, current v4).
Setup
pnpm dlx shadcn@latest mcp init --client claude
This generates the MCP configuration for Claude Code automatically. For other clients:
pnpm dlx shadcn@latest mcp init --client cursor
pnpm dlx shadcn@latest mcp init --client vscode
pnpm dlx shadcn@latest mcp init --client codex
pnpm dlx shadcn@latest mcp init --client opencode
What It Enables
- Component resolution from any shadcn-compatible registry
- Theme management and preview
- Component search and installation
- Works with custom registries configured in
components.json
Jpisnice Community MCP Server
The @jpisnice/shadcn-ui-mcp-server (v2.0.0) provides more granular tools for component discovery.
Setup for Claude Code
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server
With a GitHub token for higher API rate limits (5000/hour vs 60/hour):
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_YOUR_TOKEN
