Shadcn UI v4 MCP Server
Seamlessly integrate shadcn/ui components into AI-assisted development workflows.
Key Features
Use Cases
README
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
🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
🌐 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 token
📚 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 |
🛠️ 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: SSE transport integration (see above)
- VS Code: docs/integration/vscode.md
- Cursor: docs/integration/cursor.md
- Claude Desktop: docs/integration/claude-desktop.md
- Continue.dev: docs/integration/continue.md
🎯 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
🔗 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!
Star History
Repository Owner
User
Repository Details
Programming Languages
Tags
Topics
Join Our Newsletter
Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.
Related MCPs
Discover similar Model Context Protocol servers
Pica MCP Server
A Model Context Protocol (MCP) server for seamless integration with 100+ platforms via Pica.
Pica MCP Server provides a standardized Model Context Protocol (MCP) interface for interaction with a wide range of third-party services through Pica. It enables direct platform integrations, action execution, and intelligent intent detection while prioritizing secure environment variable management. The server also offers features such as code generation, form and data handling, and robust documentation for platform actions. It supports multiple deployment methods, including standalone, Docker, Vercel, and integration with tools like Claude Desktop and Cursor.
- ⭐ 8
- MCP
- picahq/mcp
Shodan MCP Server
Query Shodan network intelligence and CVEDB via standardized MCP integration.
Shodan MCP Server provides an MCP-compliant interface to query the Shodan API and Shodan CVEDB for network intelligence, device discovery, and vulnerability data. It integrates with platforms like Claude Desktop, enabling structured, formatted results for seamless AI workflows. Key functionalities include IP reconnaissance, DNS operations, vulnerability lookups, and internet-connected device searches. Easy installation options are available via npm, Smithery, or from source.
- ⭐ 83
- MCP
- BurtTheCoder/mcp-shodan
SonarQube MCP Server
Model Context Protocol server for AI access to SonarQube code quality metrics.
SonarQube MCP Server offers a Model Context Protocol (MCP) server that integrates with SonarQube, enabling AI assistants to access code quality metrics, issues, and analysis results programmatically. It supports retrieving detailed quality metrics, filtering issues, reviewing security hotspots, analyzing branches and pull requests, and monitoring project health. The server facilitates multi-project analysis, contextual code review, and improved assistant workflows through a standardized protocol.
- ⭐ 101
- MCP
- sapientpants/sonarqube-mcp-server
OpsLevel MCP Server
Read-only MCP server for integrating OpsLevel data with AI tools.
OpsLevel MCP Server implements the Model Context Protocol to provide AI tools with a secure way to access and interact with OpsLevel account data. It supports read-only operations for a wide range of OpsLevel resources such as actions, campaigns, checks, components, documentation, domains, and more. The tool is compatible with popular environments including Claude Desktop and VS Code, enabling easy integration via configuration and API tokens. Installation options include Homebrew, Docker, and standalone binaries.
- ⭐ 8
- MCP
- OpsLevel/opslevel-mcp
docker-mcp
A powerful MCP server for seamless Docker container and compose stack management.
docker-mcp is a Model Context Protocol (MCP) server that enables robust Docker container and compose stack management via Claude AI. It offers easy installation through Smithery or manual setup, supporting container creation, Docker Compose stack deployment, log retrieval, and monitoring. Integration with the Claude Desktop app is straightforward, and the included MCP Inspector aids debugging. This tool simplifies Docker operations for automation and AI model interactions.
- ⭐ 419
- MCP
- QuantGeekDev/docker-mcp
Sourcerer MCP
Semantic code search & navigation MCP server for efficient AI agent context retrieval.
Sourcerer MCP provides a Model Context Protocol (MCP) server that enables AI agents to perform semantic code search and navigation. By indexing codebases at the function, class, and chunk level, it allows agents to retrieve only the necessary code snippets, greatly reducing token consumption. The tool integrates with Tree-sitter for language parsing and OpenAI for generating code embeddings, supporting advanced contextual code understanding without full file ingestion.
- ⭐ 95
- MCP
- st3v3nmw/sourcerer-mcp
Didn't find tool you were looking for?