shadcn-ui-mcp-server
installs/mo ยท npmstarsforks
How to install shadcn-ui-mcp-server?
jpisnice/shadcn-ui-mcp-server
$git clone https://github.com/Jpisnice/shadcn-ui-mcp-server> ๐ The fastest way to integrate shadcn/ui components into your AI workflow
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 |
People who liked this also viewed
6 picksType
- fastapi_mcpExpose your FastAPI endpoints as Model Context Protocol (MCP) tools, with Auth!MCP ServersNov 2025
- lean-lsp-mcpLean Theorem Prover MCPMCP ServersJul 2026
- rulesyncA Utility CLI for AI Coding AgentsMCP ServersJul 2026
- FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.MCP ServersJul 2026
- repomix๐ฆ Repomix is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codebase to Large Language Models (LLMs) or other AI tools like Claude, ChatGPT, DeepSeek, Perplexity, Gemini, Gemma, Llama, Grok, and more.MCP ServersJul 2026
- mcp-serverMCP server for AI-assisted development of CAP applicationsMCP ServersJul 2026
