shadcn/ui MCP Server — Instalar & Demo en vivo

Por qué usarlo

Características clave

Obtención en tiempo real del código fuente del componente desde el registro de shadcn/ui
Multi-framework: React, Vue, Svelte 5, React Native
Grafo de dependencias de componentes (p. ej. Dialog necesita Portal)
Comando de instalación por gestor de paquetes (npm/pnpm/yarn/bun)
Ejemplos + código fuente de demos, no solo el componente base
Plantillas de bloque (páginas de auth, dashboards) incluidas

Demo en vivo

Cómo se ve en la práctica

shadcn-ui-mcp.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: shadcn/ui MCP Server

Montar un Form de shadcn/ui sin deriva de API

👤 Devs frontend construyendo apps React/Next ⏱ ~20 min intermediate

Cuándo usarlo: Quieres un Form + react-hook-form + Zod, pero Claude sigue usando imports de shadcn desactualizados.

Requisitos previos

App Next.js / Vite con shadcn/ui inicializado — npx shadcn@latest init

Flujo

Obtener el código fuente actual de Form

shadcn-ui MCP: obtén el código fuente actual de form (React) más sus dependencias. Muéstrame el comando de instalación.✓ Copiado

→ Código fuente más reciente devuelto; lista de deps incluye react-hook-form, zod
Construir mi formulario

Ahora construye un SignupForm usando exactamente estas APIs. Email + password + checkbox de términos; schema Zod con mensajes de validación. Sin imports inventados.✓ Copiado

→ El componente compila contra la versión actual de shadcn
Verificar

Ejecuta tsc --noEmit e informa de cualquier import sin resolver.✓ Copiado

→ TS limpio

Resultado: Un Form funcionando contra la API actual de shadcn/ui — sin errores de import { ... } from '@/components/ui/nombre-viejo'.

Errores comunes

El proyecto está en una versión más antigua de shadcn — Fija via --registry o acepta la actualización y ejecuta shadcn upgrade

Combinar con: filesystem

Insertar un bloque de shadcn (auth/dashboard)

👤 Devs que necesitan layouts pre-construidos ⏱ ~15 min beginner

Cuándo usarlo: Necesitas una página de login completa o un layout de dashboard, no solo un componente.

Flujo

Explorar bloques

shadcn-ui: lista los bloques disponibles. Quiero un layout de dashboard con sidebar.✓ Copiado

→ Lista de bloques con nombres + previsualizaciones
Extraer y adaptar

Extrae el código fuente de sidebar-07. Adáptalo a mis rutas — reemplaza los enlaces de demo con /dashboard, /clients, /settings.✓ Copiado

→ Código del bloque devuelto; mis rutas intercambiadas

Resultado: Layout de dashboard completo en ejecución, personalizado para mi app, en menos de 10 min.

Errores comunes

El bloque depende de componentes que no tienes instalados — MCP devuelve la lista de deps; instala los que falten primero

Combinar con: filesystem

Portar el uso de shadcn de una app React a Svelte

👤 Devs migrando frameworks ⏱ ~30 min advanced

Cuándo usarlo: Estás pasando de Next a SvelteKit y quieres los equivalentes de shadcn-svelte.

Flujo

Mapear componentes

Lista los componentes que mi app importa de @/components/ui. Para cada uno, obtén el equivalente Svelte 5 desde el MCP de shadcn-ui.✓ Copiado

→ Mapeo componente por componente con notas sobre las diferencias de API
Traducir un ejemplo

Traduce este uso de Form en React a la versión Svelte usando la API actual real.✓ Copiado

→ Código idiomático Svelte 5

Resultado: Plan de migración + traducción de referencia para que el equipo la siga.

Errores comunes

Algunos componentes no existen en el port Svelte todavía — MCP dirá 'not found'; márcalos para port manual

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

shadcn-ui-mcp + filesystem

Generar componentes directamente en tu repositorio

shadcn: obtén Form. Filesystem: escribe el código en src/components/SignupForm.tsx con mi schema.✓ Copiado

shadcn-ui-mcp + github

PR para un refactor de UI que usa la API actual de shadcn

Extrae la API actual de Dialog. Refactoriza src/components/Modal.tsx para que coincida. Abre un PR.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
list_components	framework?: react\|vue\|svelte\|react-native	Descubrimiento	1 fetch
get_component	name: str, framework?: str	Antes de escribir código	1 fetch
get_component_demo	name: str, framework?: str	Ver uso real	1 fetch
list_blocks	framework?: str	Encontrar layouts pre-construidos	1 fetch
get_block	name: str	Insertar un layout	1 fetch

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Fetches raw de GitHub (60/h sin autenticar, 5000/h autenticado)
Tokens por llamada: 300–4000 (el código fuente de los componentes puede ser grande)
Monetario: OSS gratuito
Consejo: Pasa GITHUB_PERSONAL_ACCESS_TOKEN para evitar el límite de 60/h

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Token de GitHub opcional para aumentar el rate limit

Salida de datos: github.com (raw y api)

No conceder nunca: repo:write

MCP solo obtiene código público — no escribe en tu repositorio a menos que se combine con filesystem

Resolución de problemas

Errores comunes y soluciones

Rate limit superado

Configura la variable de entorno GITHUB_PERSONAL_ACCESS_TOKEN

Componente no encontrado en el framework

Los ports Vue/Svelte van detrás de React; comprueba con list_components para ese framework

El código fuente devuelto usa una API diferente a mi proyecto

El proyecto está en una versión más antigua de shadcn; actualiza o fija a la versión antigua del registro

Alternativas

shadcn/ui MCP Server vs otros

Alternativa	Cuándo usarla	Contrapartida
Magic MCP (21st Dev)	Quieres generación de UI más amplia, no solo shadcn	Más opinionado; más pesado
Component MCP (registro personalizado)	Tienes un sistema de diseño interno	Constrúyelo tú mismo

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills