shadcn/ui MCP
Provides context about shadcn/ui components, including structure, usage, and installation for React, Svelte, and Vue.
Shadcn UI v4 MCP Server
🚀 The fastest way to integrate shadcn/ui components into your AI workflow
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
✨ Key Features
- 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations
- 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source
- 🎨 Component Demos - Example implementations and usage patterns
- 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)
- 📋 Metadata Access - Dependencies, descriptions, and configuration details
- 🔍 Directory Browsing - Explore repository structures
- ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling
- 🌐 SSE Transport - Server-Sent Events support for multi-client deployments
- 🐳 Docker Ready - Production-ready containerization with Docker Compose
🚀 Quick Start
# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server
# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
📦 One-Click Installation (Claude Desktop)
Download and double-click the .mcpb file for instant installation:
- Download
shadcn-ui-mcp-server.mcpbfrom Releases - Double-click the file - Claude Desktop opens automatically
- Enter your GitHub token (optional, for higher rate limits)
- Click Install - tools are available immediately
Manual install: Claude Desktop → Settings → MCP → Add Server → Browse → Select .mcpb file
References: Anthropic Desktop Extensions | Building MCPB
🌐 SSE Transport & Docker Deployment
Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:
Quick Start with SSE
# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423
# Docker Compose (production ready)
docker-compose up -d
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
Transport Modes
stdio(default) - Standard input/output for CLI usagesse- Server-Sent Events for HTTP-based connectionsdual- Both stdio and SSE simultaneously
Docker Examples
# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server
# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server
# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health
Environment Variables
MCP_TRANSPORT_MODE- Transport mode (stdio|sse|dual)MCP_PORT- SSE server port (default: 7423 - SHADCN on keypad!)MCP_HOST- Host binding (default: 0.0.0.0)MCP_CORS_ORIGINS- CORS origins (comma-separated)GITHUB_PERSONAL_ACCESS_TOKEN- GitHub API tokenUI_LIBRARY- UI primitive library:radix(default) orbase(React only)
📚 Documentation
| Section | Description |
|---|---|
| 🚀 Getting Started | Installation, setup, and first steps |
| ⚙️ Configuration | Framework selection, tokens, and options |
| 🔌 Integration | Editor and tool integrations |
| 📖 Usage | Examples, tutorials, and use cases |
| 🎨 Frameworks | Framework-specific documentation |
| 🐛 Troubleshooting | Common issues and solutions |
| 🔧 API Reference | Tool reference and technical details |
🎨 Framework Support
This MCP server supports four popular shadcn implementations:
| Framework | Repository | Maintainer | Description |
|---|---|---|---|
| React (default) | shadcn/ui | shadcn | React components from shadcn/ui v4 |
| Svelte | shadcn-svelte | huntabyte | Svelte components from shadcn-svelte |
| Vue | shadcn-vue | unovue | Vue components from shadcn-vue |
| React Native | react-native-reusables | Founded Labs | React Native components from react-native-reusables |
UI Library (React only)
shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.
# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix
# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base
# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-server
Claude Desktop config example:
{
"args": ["--framework", "react", "--ui-library", "base"]
}
🛠️ Essential Setup
1. Get GitHub Token (Recommended)
# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
2. Run Server
# React (default)
npx @jpisnice/shadcn-ui-mcp-server
# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
3. Integrate with Your Editor
- Claude Code: See Claude Code Integration below
- VS Code: docs/integration/vscode.md
- Cursor: docs/integration/cursor.md
- Claude Desktop: docs/integration/claude-desktop.md
- Continue.dev: docs/integration/continue.md
💻 Claude Code Integration
Quick Add (CLI)
# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN
SSE Transport
For production deployments with SSE transport:
# Start server in SSE mode
node build/index.js --mode sse --port 7423
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
Framework-Specific Commands
See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).
Reference: Claude Code MCP Documentation
🎯 Use Cases
- AI-Powered Development - Let AI assistants build UIs with shadcn/ui
- Multi-Client Deployments - SSE transport supports multiple concurrent connections
- Production Environments - Docker Compose ready with health checks and monitoring
- Component Discovery - Explore available components and their usage
- Multi-Framework Learning - Compare React, Svelte, Vue, and React Native implementations
- Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
- Code Generation - Generate component code with proper dependencies
📦 Installation
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server
🔨 Building from Source
Prerequisites
- Node.js >= 18.0.0
- npm or pnpm
Build Steps
# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
# Install dependencies
npm install
# Build the project
npm run build
# Run the server
node build/index.js --github-api-key YOUR_TOKEN
Run Locally
# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelte
Building MCPB Package
The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.
See CONTRIBUTING.md for detailed packaging instructions.
Reference: Building Desktop Extensions with MCPB
🔗 Quick Links
- 📖 Full Documentation
- 🚀 Getting Started Guide
- 🌐 SSE Transport & Docker Guide
- 🎨 Framework Comparison
- 🔧 API Reference
- 🐛 Troubleshooting
- 💬 Issues & Discussions
📄 License
MIT License - see LICENSE for details.
🙏 Acknowledgments
- shadcn - For the amazing React UI component library
- huntabyte - For the excellent Svelte implementation
- unovue - For the comprehensive Vue implementation
- Founded Labs - For the React Native implementation
- Anthropic - For the Model Context Protocol specification
Made with ❤️ by Janardhan Polle
Star ⭐ this repo if you find it helpful!
관련 서버
Alpha Vantage MCP Server
스폰서Access financial market data: realtime & historical stock, ETF, options, forex, crypto, commodities, fundamentals, technical indicators, & more
YApi
Interact with the YApi platform using natural language for automated interface management.
MCP Server
A cross-platform MCP server implementation for Amazon Q and Claude, providing multiple tools in a single executable.
MCPAgent
An intelligent agent framework based on MCP, supporting multiple large language models and tool integrations for testing single-agent effectiveness.
Huly
MCP server for Huly project management system
OpenAPI Schema Explorer
Token-efficient access to OpenAPI/Swagger specs via MCP Resources
portkey-admin-mcp
Full MCP server for the https://portkey.ai AI Gateway Admin API with 151 tools across 18 domains.
MCP-scala
A Model Context Protocol server implementation written in Scala 3.
Diffchunk
Navigate large diff files with intelligent chunking and navigation tools.
PromptOT
Manage, version, and publish LLM prompts via PromptOT. Build structured prompts from blocks, add variables, save drafts, publish versions, and deliver via API — all from chat.
Laravel Docs
Search and access Laravel documentation from version 6.x onwards, with automatic daily updates.