Repository files navigation

🚀 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 toshadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.

• 🎯 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) - Recommendednpx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here# Switch frameworksnpx @jpisnice/shadcn-ui-mcp-server --framework sveltenpx @jpisnice/shadcn-ui-mcp-server --framework vuenpx @jpisnice/shadcn-ui-mcp-server --framework react-native

🎯 Get your GitHub token in 2 minutes:docs/getting-started/github-token.md

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 Codeclaude 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 containerdocker run -p 7423:7423 shadcn-ui-mcp-server# With GitHub API tokendocker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server# Docker Compose (recommended)docker-compose up -dcurl 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

This MCP server supports four popular shadcn implementations:

# Visit: https://github.com/settings/tokens# Generate token with no scopes neededexport GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

# React (default)npx @jpisnice/shadcn-ui-mcp-server# Sveltenpx @jpisnice/shadcn-ui-mcp-server --framework svelte# Vuenpx @jpisnice/shadcn-ui-mcp-server --framework vue# React Nativenpx @jpisnice/shadcn-ui-mcp-server --framework react-native

• 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

• 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

• 📖Full Documentation
• 🚀Getting Started Guide
• 🌐SSE Transport & Docker Guide
• 🎨Framework Comparison
• 🔧API Reference
• 🐛Troubleshooting
• 💬Issues & Discussions

MIT License - seeLICENSE for details.

• 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 ❤️ byJanardhan Polle

Star ⭐ this repo if you find it helpful!