Shadcn UI MCP Server

What is Shadcn UI MCP Server?

Shadcn UI MCP Server is a Model Context Protocol (MCP) server that gives AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It supports React, Svelte, Vue, and React Native implementations, making it suitable for developers building UIs with AI-powered workflows.

How to use Shadcn UI MCP Server?

Run the server with npx @jpisnice/shadcn-ui-mcp-server (optionally with --github-api-key for higher rate limits). Switch frameworks via --framework svelte (or vue, react-native). Use --mode sse for HTTP-based multi-client support. Integrate with Claude Desktop via a one-click .mcpb file or with Claude Code using claude mcp add. Configuration uses environment variables like GITHUB_PERSONAL_ACCESS_TOKEN and UI_LIBRARY.

Key features of Shadcn UI MCP Server

• Multi‑framework support (React, Svelte, Vue, React Native)
• Latest shadcn/ui v4 TypeScript source code
• Component demos with usage patterns
• Complete block implementations (dashboards, calendars, forms)
• Metadata access (dependencies, descriptions, configuration)
• SSE transport and Docker Compose for production deployments

Use cases of Shadcn UI MCP Server

• AI‑powered UI development with shadcn/ui components
• Multi‑client deployments using SSE transport
• Production environments with Docker Compose health checks
• Component discovery and comparison across frameworks
• Rapid prototyping with pre‑built blocks and code generation

FAQ from Shadcn UI MCP Server

What frameworks are supported?

React (default), Svelte, Vue, and React Native. Switch with the --framework flag.

How do I get a GitHub token?

Generate a token at github.com/settings/tokens (no scopes needed). Use it with --github-api-key or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.

What transport modes are available?

stdio (default) for CLI, sse for HTTP, and dual for both simultaneously.

Can I run this in production with Docker?

Yes. The server includes a Docker Compose file with health checks. Run docker-compose up -d and expose port 7423.

What is the default UI library for React?

Radix UI is the default. Use --ui-library base to switch to Base UI (React only).