Shadcn Ui MCP Server README

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, plus protocol cache hints (ttlMs/cacheScope) on list and read results
⌨️ Argument Completion - Autocomplete for prompt and resource-template arguments (component names, package managers, build tools, and more)
🌐 Streamable HTTP Transport - Stateless /mcp endpoint for multi-client deployments (MCP spec 2026-07-28)
🐳 Docker Ready - Production-ready containerization with Docker Compose

🚀 Quick Start

bash

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

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

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

References: Anthropic Desktop Extensions | Building MCPB

🌐 HTTP Transport & Docker Deployment

The server implements the 2026-07-28 MCP specification (via MCP TypeScript SDK v2) and stays compatible with 2025-era clients. To make your client use the modern protocol, or to require it, see the Modern Protocol Guide. Besides stdio, it can serve Streamable HTTP at a single stateless /mcp endpoint for multi-client and production deployments:

Quick Start with HTTP

bash

# HTTP mode (stateless, supports many concurrent clients)
node build/index.js --mode http --port 7423

# Docker Compose (production ready)
docker-compose up -d

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

Transport Modes

stdio (default) - Standard input/output for CLI usage
http - Streamable HTTP at /mcp
dual - Both stdio and HTTP simultaneously

The legacy SSE transport (/sse + /message) was removed. --mode sse is still accepted as a deprecated alias for http.

Docker Examples

bash

# 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|http|dual)
MCP_PORT - HTTP server port (default: 7423 - SHADCN on keypad!)
MCP_HOST - Host binding (default: 0.0.0.0)
MCP_CORS_ORIGINS - CORS origins (comma-separated)
MCP_PROTOCOL - Protocol eras to accept: any (default; 2026-07-28 plus 2025-era fallback) or modern (2026-07-28 only). CLI: --protocol
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.

bash

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

config.json

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

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

server.ts

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

2. Run Server

bash

# 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

Autohand Code: See Autohand Code Integration below
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

💻 Autohand Code Integration

Use the Autohand Code CLI to add the shadcn/ui MCP server:

bash

autohand mcp add shadcn bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

Add --scope project before shadcn to save the server in the current project's .autohand configuration instead of your user configuration.

💻 Claude Code Integration

Quick Add (CLI)

bash

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

HTTP Transport

For production deployments with the Streamable HTTP transport:

bash

# Start server in HTTP mode
node build/index.js --mode http --port 7423

# Connect with Claude Code
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

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 - Stateless HTTP transport scales horizontally without sticky sessions
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

bash

# 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 >= 20.0.0
npm or pnpm

Build Steps

bash

# 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

bash

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