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
Just Prompt
A unified interface for various Large Language Model (LLM) providers, including OpenAI, Anthropic, Google Gemini, Groq, DeepSeek, and Ollama.
MCP Command Server
A secure server for executing pre-approved system commands via an environment variable.
Luzia Crypto API
Provides real-time cryptocurrency pricing data and market information from major exchanges like Binance, Coinbase, and Kraken via the Luzia API. It enables AI assistants to fetch ticker prices, compare exchange rates, and analyze market trends through specialized tools and prompts.
PipeCD
Integrate with PipeCD to manage applications and deployments.
WinTerm MCP
Provides programmatic access to the Windows terminal, enabling AI models to interact with the command line interface.
Create MCP App
Bootstrap Model Context Protocol (MCP) servers and clients in TypeScript with best practices, examples, and proper tooling setup.
Locust MCP Server
An MCP server for running Locust load tests. Configure test parameters like host, users, and spawn rate via environment variables.
MCP Server Starter
A TypeScript starter template for building Model Context Protocol (MCP) servers.
Loaditout
Universal registry for 20,000+ MCP servers and agent skills with A/B/C/F security grading, CLI installer (npx loaditout add), verified publisher badges, and curated packs.
Liana-MCP
A natural language interface for cell-cell communication analysis using the Liana framework.