Happy slice of mcp pizzaMCP.pizza

shadcn-ui-mcp-unofficial

MCP.Pizza Chef: Jpisnice

Coding assistants tend to invent component code that does not match the actual library. This hands them the genuine shadcn/ui source, live demos, and prebuilt blocks such as dashboards, calendars, and login forms, in React, Svelte, Vue, or React Native. It plugs into Claude Desktop, Claude Code, Cursor, VS Code, and Continue. A free GitHub access key is optional but worth adding, since it lifts the hourly request limit from sixty to five thousand.

Coding
Images/Design

Use This MCP server To

Get the real code for a component instead of a guess Build a dashboard page from a ready-made block See a working example of a form before I copy it Check which packages a component needs first Get the Svelte or Vue version of a component Browse what components are available without leaving my editor

README

Shadcn UI v4 MCP Server

npm version License: MIT

Trust Score

🚀 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

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

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

📦 One-Click Installation (Claude Desktop)

Download and double-click the .mcpb file for instant installation:

  1. Download shadcn-ui-mcp-server.mcpb from Releases
  2. Double-click the file - Claude Desktop opens automatically
  3. Enter your GitHub token (optional, for higher rate limits)
  4. Click Install - tools are available immediately

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

References: Anthropic Desktop Extensions | Building MCPB

🌐 SSE Transport & Docker Deployment

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

Quick Start with SSE

# 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

Transport Modes

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

Docker Examples

# 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

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

📚 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 four 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
React Native react-native-reusables Founded Labs React Native components from react-native-reusables

UI Library (React only)

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

Claude Desktop config example:

{
  "args": ["--framework", "react", "--ui-library", "base"]
}

🛠️ 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

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. Integrate with Your Editor

  • Claude Code: See Claude Code Integration below
  • VS Code: docs/integration/vscode.md
  • Cursor: docs/integration/cursor.md
  • Claude Desktop: docs/integration/claude-desktop.md
  • Continue.dev: docs/integration/continue.md

💻 Claude Code Integration

Quick Add (CLI)

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

SSE Transport

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

Framework-Specific Commands

See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).

Reference: Claude Code MCP Documentation

🎯 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

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

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

🔨 Building from Source

Prerequisites

  • Node.js >= 18.0.0
  • npm or pnpm

Build Steps

# 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

Run Locally

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

Building MCPB Package

The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.

See CONTRIBUTING.md for detailed packaging instructions.

Reference: Building Desktop Extensions with MCPB

🔗 Quick Links

  • 📖 Full Documentation
  • 🚀 Getting Started Guide
  • 🌐 SSE Transport & Docker 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
  • Founded Labs - For the React Native implementation
  • Anthropic - For the Model Context Protocol specification

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

shadcn-ui-mcp-unofficial FAQ

Which editors does this work in?
Claude Desktop, Claude Code, Cursor, VS Code, and Continue.
Can I use this to build a dashboard page?
Yes. It ships complete block implementations for dashboards, calendars, and forms that your assistant can drop in.
Do I need a GitHub access key?
No, but without one you are capped at sixty requests an hour instead of five thousand.
Does it cover frameworks other than React?
Yes. Svelte, Vue, and React Native are all supported, and React can use either Radix or Base primitives.
How hard is the setup?
Claude Desktop users can double-click a downloadable installer. Everyone else pastes one short command into their editor settings.
Is this the official shadcn project?
No. It is a community-built connector that reads from the public shadcn repositories.