shadcn-ui-mcp-server

shadcn-ui-mcp-server

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

Stars: 2648

Visit
 screenshot

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It allows users to seamlessly retrieve React, Svelte, Vue, and React Native implementations for AI-powered development workflows. The server supports multi-frameworks, component source code, demos, blocks, metadata access, directory browsing, smart caching, SSE transport, and Docker containerization. Users can quickly start the server, integrate with Claude Desktop, deploy with SSE transport or Docker, and access documentation for installation, configuration, integration, usage, frameworks, troubleshooting, and API reference. The server supports React, Svelte, Vue, and React Native implementations, with options for UI library selection. It enables AI-powered development, multi-client deployments, production environments, component discovery, multi-framework learning, rapid prototyping, and code generation.

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

📄 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!

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for shadcn-ui-mcp-server

Similar Open Source Tools

For similar tasks

For similar jobs