shadcn-ui-mcp-server

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, and Vue implementations for your AI-powered development workflow.

✨ Key Features

• 🎯 Multi-Framework Support - React, Svelte, and Vue 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

🚀 Quick Start

# 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

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

📚 Documentation

Section	Description
🚀 Getting Started	Installation, setup, and first steps
⚙️ Configuration	Framework selection, tokens, and options
🔌 Integration	Editor and tool integrations
📖 Usage	Examples, tutorials, and use cases
🎨 Frameworks	Framework-specific documentation
🐛 Troubleshooting	Common issues and solutions
🔧 API Reference	Tool reference and technical details

🎨 Framework Support

This MCP server supports three popular shadcn implementations:

Framework	Repository	Maintainer	Description
React (default)	shadcn/ui	shadcn	React components from shadcn/ui v4
Svelte	shadcn-svelte	huntabyte	Svelte components from shadcn-svelte
Vue	shadcn-vue	unovue	Vue components from shadcn-vue

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

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

2. Run Server

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue

3. Integrate with Your Editor

• 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
• Component Discovery - Explore available components and their usage
• Multi-Framework Learning - Compare React, Svelte, and Vue implementations
• Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
• Code Generation - Generate component code with proper dependencies

📦 Installation

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

# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔗 Quick Links

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

📄 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
• Anthropic - For the Model Context Protocol specification

---

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!