The @jpisnice/shadcn-ui-mcp-server provides AI assistants with comprehensive access to shadcn/ui (React) and shadcn-svelte (Svelte) components, blocks, and metadata via the Model Context Protocol (MCP).
Retrieve Component Source Code: Fetch TypeScript/Svelte source for shadcn/ui components (e.g.,
button,accordion)Access Component Demos: Get example implementations and usage patterns
List Available Components: Discover all shadcn/ui components
Retrieve Component Metadata: Get dependencies, descriptions, and configuration details
Retrieve Block Implementations: Get complete UI blocks (dashboards, calendars, login forms) with optional dependent component files
Filter Blocks by Category: List blocks by type (calendar, dashboard, login, sidebar, products)
Browse Repository Structure: Explore the shadcn/ui or shadcn-svelte repository directories
Switch Frameworks: Toggle between React (default) and Svelte implementations
Improve API Rate Limits: Use GitHub Personal Access Token to increase limits from 60 to 5,000 requests per hour
Integrate with AI Clients: Configure with Claude Desktop, Continue.dev, VS Code, and Cursor for seamless AI assistant interaction
Integrates with GitHub API for efficient caching and rate limit handling, enabling the server to access and retrieve shadcn/ui component resources from the GitHub repository.
Provides comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata, allowing AI assistants to retrieve component source code, example implementations, block implementations, dependencies, and repository structure information.
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
Related MCP server: MCP LLMS-TXT Documentation Server
🚀 Quick Start
🎯 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
Transport Modes
stdio(default) - Standard input/output for CLI usagesse- Server-Sent Events for HTTP-based connectionsdual- Both stdio and SSE simultaneously
Docker Examples
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 |
Installation, setup, and first steps | |
Framework selection, tokens, and options | |
Editor and tool integrations | |
Examples, tutorials, and use cases | |
Framework-specific documentation | |
Common issues and solutions | |
Tool reference and technical details |
🎨 Framework Support
This MCP server supports four popular shadcn implementations:
Framework | Repository | Maintainer | Description |
React (default) | React components from shadcn/ui v4 | ||
Svelte | Svelte components from shadcn-svelte | ||
Vue | Vue components from shadcn-vue | ||
React Native | React Native components from react-native-reusables |
🛠️ Essential Setup
1. Get GitHub Token (Recommended)
2. Run Server
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
🔗 Quick Links
📄 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
Star ⭐ this repo if you find it helpful!