Shadcn UI v4 MCP Server

🚀 La forma más rápida de integrar los componentes shadcn/ui en tu flujo de trabajo con IA

Un servidor Model Context Protocol (MCP) que proporciona a los asistentes de IA acceso completo a los componentes, bloques, demos y metadatos de shadcn/ui v4. Recupera sin problemas implementaciones en React, Svelte, Vue y React Native para tu flujo de trabajo de desarrollo impulsado por IA.

✨ Características Principales

• 🎯 Soporte Multi-Framework - Implementaciones en React, Svelte, Vue y React Native

• 📦 Código Fuente de Componentes - Código fuente TypeScript más reciente de shadcn/ui v4

• 🎨 Demos de Componentes - Implementaciones de ejemplo y patrones de uso

• 🏗️ Soporte de Bloques - Implementaciones completas de bloques (paneles, calendarios, formularios)

• 📋 Acceso a Metadatos - Dependencias, descripciones y detalles de configuración

• 🔍 Exploración de Directorios - Explora las estructuras de repositorios

• ⚡ Caché Inteligente - Integración eficiente con la API de GitHub con manejo de límites de tasa

• 🌐 Transporte SSE - Soporte de Server-Sent Events para despliegues multi-cliente

• 🐳 Listo para Docker - Contenedorización lista para producción con Docker Compose

Related MCP server: shadcn-ui MCP Server

🚀 Inicio Rápido

# 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

🎯 Obtén tu token de GitHub en 2 minutos: docs/getting-started/github-token.md

📦 Instalación con un Clic (Claude Desktop)

Descarga y haz doble clic en el archivo .mcpb para una instalación instantánea:

1. Descarga shadcn-ui-mcp-server.mcpb desde Releases

2. Haz doble clic en el archivo: Claude Desktop se abre automáticamente

3. Introduce tu token de GitHub (opcional, para límites de tasa más altos)

4. Haz clic en Instalar: las herramientas están disponibles de inmediato

Instalación manual: Claude Desktop → Configuración → MCP → Añadir Servidor → Explorar → Seleccionar el archivo .mcpb

Referencias: Anthropic Desktop Extensions | Building MCPB

🌐 Transporte SSE y Despliegue con Docker

Ejecuta el servidor con transporte Server-Sent Events (SSE) para soporte multi-cliente y despliegues de producción:

Inicio Rápido con 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

Modos de Transporte

• stdio (predeterminado) - Entrada/salida estándar para uso CLI

• sse - Server-Sent Events para conexiones basadas en HTTP

• dual - Tanto stdio como SSE simultáneamente

Ejemplos con Docker

# 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

Variables de Entorno

• MCP_TRANSPORT_MODE - Modo de transporte (stdio|sse|dual)

• MCP_PORT - Puerto del servidor SSE (predeterminado: 7423 - SHADCN en el teclado numérico!)

• MCP_HOST - Enlace de host (predeterminado: 0.0.0.0)

• MCP_CORS_ORIGINS - Orígenes CORS (separados por comas)

• GITHUB_PERSONAL_ACCESS_TOKEN - Token de API de GitHub

• UI_LIBRARY - Librería de primitivas de UI: radix (predeterminado) o base (solo React)

📚 Documentación

🎨 Soporte de Frameworks

Este servidor MCP soporta cuatro implementaciones populares de shadcn:

Librería de UI (solo React)

shadcn/ui v4 soporta dos librerías de primitivas para React: Radix UI (predeterminada) y 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

Ejemplo de configuración de Claude Desktop:

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

🛠️ Configuración Esencial

1. Obtén tu Token de GitHub (Recomendado)

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

2. Ejecuta el Servidor

# 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. Integra con tu Editor

• Claude Code: Consulta la Integración con Claude Code a continuación

• VS Code: docs/integration/vscode.md

• Cursor: docs/integration/cursor.md

• Claude Desktop: docs/integration/claude-desktop.md

• Continue.dev: docs/integration/continue.md

💻 Integración con Claude Code

Adición Rápida (CLI)

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

Transporte SSE

Para despliegues de producción con transporte SSE:

# 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

Comandos Específicos por Framework

Consulta la Guía de Integración con Claude Code para comandos específicos por framework (React, Svelte, Vue, React Native).

Referencia: Documentación MCP de Claude Code

🎯 Casos de Uso

• Desarrollo Impulsado por IA - Deja que los asistentes de IA construyan interfaces con shadcn/ui

• Despliegues Multi-Cliente - El transporte SSE soporta múltiples conexiones concurrentes

• Entornos de Producción - Listo para Docker Compose con comprobaciones de salud y monitorización

• Descubrimiento de Componentes - Explora los componentes disponibles y su uso

• Aprendizaje Multi-Framework - Compara implementaciones en React, Svelte, Vue y React Native

• Prototipado Rápido - Obtén implementaciones completas de bloques para paneles, formularios, etc.

• Generación de Código - Genera código de componentes con las dependencias adecuadas

📦 Instalación

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

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

🔨 Compilar desde el Código Fuente

Requisitos Previos

• Node.js >= 18.0.0

• npm o pnpm

Pasos de Compilación

# 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

Ejecutar Localmente

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

Compilar el Paquete MCPB

El proyecto incluye un manifest.json que sigue la especificación MCPB. El archivo .mcpb es un archivo ZIP que contiene el servidor, las dependencias y la configuración.

Consulta CONTRIBUTING.md para instrucciones detalladas de empaquetado.

Referencia: Building Desktop Extensions with MCPB

🔗 Enlaces Rápidos

• 📖 Documentación Completa

• 🚀 Guía de Inicio Rápido

• 🌐 Guía de Transporte SSE y Docker

• 🎨 Comparación de Frameworks

• 🔧 Referencia de API

• 🐛 Solución de Problemas

• 💬 Problemas y Discusiones

📄 Licencia

Licencia MIT: consulta LICENSE para más detalles.

🙏 Agradecimientos

• shadcn - Por la increíble librería de componentes de interfaz React

• huntabyte - Por la excelente implementación en Svelte

• unovue - Por la completa implementación en Vue

• Founded Labs - Por la implementación en React Native

• Anthropic - Por la especificación del Model Context Protocol

Hecho con ❤️ por Janardhan Polle

¡Deja una ⭐ a este repositorio si te resulta útil!