shadcn-ui-mcp-server
byjpisnice· 1 MCP server
> 🚀 The fastest way to integrate shadcn/ui components into your AI workflow
How to install shadcn-ui-mcp-server?
jpisnice/shadcn-ui-mcp-server
$git clone https://github.com/jpisnice/shadcn-ui-mcp-serverInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Install shadcn-ui-mcp-server by running `git clone https://github.com/jpisnice/shadcn-ui-mcp-server`, then use it for the current task and follow its documentation at https://github.com/jpisnice/shadcn-ui-mcp-server.
README.md
| 1 | # Shadcn UI v4 MCP Server |
| 2 | |
| 3 | [](https://badge.fury.io/js/@jpisnice%2Fshadcn-ui-mcp-server) |
| 4 | [](https://opensource.org/licenses/MIT) |
| 5 | |
| 6 | [](https://archestra.ai/mcp-catalog/jpisnice__shadcn-ui-mcp-server) |
| 7 | |
| 8 | > **🚀 The fastest way to integrate shadcn/ui components into your AI workflow** |
| 9 | |
| 10 | A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to [shadcn/ui v4](https://ui.shadcn.com/) components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow. |
| 11 | |
| 12 | ## ✨ Key Features |
| 13 | |
| 14 | - **🎯 Multi-Framework Support** - React, Svelte, Vue, and React Native implementations |
| 15 | - **📦 Component Source Code** - Latest shadcn/ui v4 TypeScript source |
| 16 | - **🎨 Component Demos** - Example implementations and usage patterns |
| 17 | - **🏗️ Blocks Support** - Complete block implementations (dashboards, calendars, forms) |
| 18 | - **📋 Metadata Access** - Dependencies, descriptions, and configuration details |
| 19 | - **🔍 Directory Browsing** - Explore repository structures |
| 20 | - **⚡ Smart Caching** - Efficient GitHub API integration with rate limit handling |
| 21 | - **🌐 SSE Transport** - Server-Sent Events support for multi-client deployments |
| 22 | - **🐳 Docker Ready** - Production-ready containerization with Docker Compose |
| 23 | |
| 24 | ## 🚀 Quick Start |
| 25 | |
| 26 | ```bash |
| 27 | # Basic usage (60 requests/hour) |
| 28 | npx @jpisnice/shadcn-ui-mcp-server |
| 29 | |
| 30 | # With GitHub token (5000 requests/hour) - Recommended |
| 31 | npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here |
| 32 | |
| 33 | # Switch frameworks |
| 34 | npx @jpisnice/shadcn-ui-mcp-server --framework svelte |
| 35 | npx @jpisnice/shadcn-ui-mcp-server --framework vue |
| 36 | npx @jpisnice/shadcn-ui-mcp-server --framework react-native |
| 37 | |
| 38 | # Use Base UI instead of Radix (React only) |
| 39 | npx @jpisnice/shadcn-ui-mcp-server --ui-library base |
| 40 | ``` |
| 41 | |
| 42 | **🎯 Get your GitHub token in 2 minutes**: [docs/getting-started/github-token.md](docs/getting-started/github-token.md) |
| 43 | |
| 44 | ## 📦 One-Click Installation (Claude Desktop) |
| 45 | |
| 46 | Download and double-click the `.mcpb` file for instant installation: |
| 47 | |
| 48 | 1. Download `shadcn-ui-mcp-server.mcpb` from [Releases](https://github.com/Jpisnice/shadcn-ui-mcp-server/releases) |
| 49 | 2. Double-click the file - Claude Desktop opens automatically |
| 50 | 3. Enter your GitHub token (optional, for higher rate limits) |
| 51 | 4. Click Install - tools are available immediately |
| 52 | |
| 53 | **Manual install:** Claude Desktop → Settings → MCP → Add Server → Browse → Select `.mcpb` file |
| 54 | |
| 55 | > **References:** [Anthropic Desktop Extensions](https://www.anthropic.com/engineering/desktop-extensions) | [Building MCPB](https://support.claude.com/en/articles/12922929-building-desktop-extensions-with-mcpb) |
| 56 | |
| 57 | ## 🌐 SSE Transport & Docker Deployment |
| 58 | |
| 59 | Run the server with **Server-Sent Events (SSE)** transport for multi-client support and production deployments: |
| 60 | |
| 61 | ### Quick Start with SSE |
| 62 | ```bash |
| 63 | # SSE mode (supports multiple concurrent connections) |
| 64 | node build/index.js --mode sse --port 7423 |
| 65 | |
| 66 | # Docker Compose (production ready) |
| 67 | docker-compose up -d |
| 68 | |
| 69 | # Connect with Claude Code |
| 70 | claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse |
| 71 | ``` |
| 72 | |
| 73 | ### Transport Modes |
| 74 | - **`stdio`** (default) - Standard input/output for CLI usage |
| 75 | - **`sse`** - Server-Sent Events for HTTP-based connections |
| 76 | - **`dual`** - Both stdio and SSE simultaneously |
| 77 | |
| 78 | ### Docker Examples |
| 79 | ```bash |
| 80 | # Basic container |
| 81 | docker run -p 7423:7423 shadcn-ui-mcp-server |
| 82 | |
| 83 | # With GitHub API token |
| 84 | docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server |
| 85 | |
| 86 | # Docker Compose (recommended) |
| 87 | docker-compose up -d |
| 88 | curl http://localhost:7423/health |
| 89 | ``` |
| 90 | |
| 91 | ### Environment Variables |
| 92 | - `MCP_TRANSPORT_MODE` - Transport mode (stdio|sse|dual) |
| 93 | - `MCP_PORT` - SSE server port (default: 7423 - SHADCN on keypad!) |
| 94 | - `MCP_HO |
Related
6 picksType
- jcodemunch-mcpToken-efficient code exploration via tree-sitter AST parsing. 70+ languages, 95%+ token savings.Jul 2026
- minimax-coding-plan-mcpSpecialized MiniMax Model Context Protocol (MCP) server designed for coding-plan usersFeb 2026
- neoNeo.mjs is a self-evolving software organism: a professional end-to-end AI engineering team whose cross-model swarm inhabits live apps via Neural Link, Active Hybrid GraphRAG, DreamService, and self-healing loops.Jul 2026
- kicad-mcp-proProduction-grade MCP server for KiCad EDA—PCB design, DRC, simulation, BOM, DFM, and manufacturing.Jul 2026
- taiga-ui-mcpModel Context Protocol server providing Taiga UI documentation search and scaffolding tools.Jul 2026
- mcpOfficial MCP server for Magic UI.Apr 2026
