shadcn/ui MCP

- 🎯 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

# 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

📦 One-Click Installation (Claude Desktop)

Manual install:Claude Desktop → Settings → MCP → Add Server → Browse → Select.mcpbfile

Run the server withServer-Sent Events (SSE)transport for multi-client support and production deployments:

# 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

- stdio(default) - Standard input/output for CLI usage
- sse- Server-Sent Events for HTTP-based connections
- dual- Both stdio and SSE simultaneously

# 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

- 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
- UI_LIBRARY- UI primitive library:radix(default) orbase(React only)

This MCP server supports four popular shadcn implementations:

shadcn/ui v4 supports two primitive libraries for React:Radix UI(default) andBase 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

# Add the shadcn-ui MCP server claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

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

- 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

# Global installation (optional) npm install -g @jpisnice/shadcn-ui-mcp-server # Or use npx (recommended) npx @jpisnice/shadcn-ui-mcp-server

# 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

# After building, run with options node build/index.js --github-api-key YOUR_TOKEN node build/index.js --framework svelte

Star ⭐ this repo if you find it helpful!

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.

The MCP server for Bitrix24 provides AI assistants with structured access to the Bitrix24 API. It delivers up-to-date method descriptions, parameters, and valid values, allowing assistants to work with precise data instead of guesswork. This reduces code errors and accelerates Bitrix24 integration development.

Official Context7 MCP server that brings up-to-date, version-specific library documentation and code examples into AI coding prompts.

Remote, no-auth MCP server providing AI-powered codebase context and answers

Extentos is a multi-vendor development platform for adding smart-glasses capabilities to existing iOS and Android apps. The simplest analogy is Stripe for smart glasses