Shadcn Dashboard MCP

Kit de panel Shadcn listo para producción, construido para equipos modernos

Documentación

shadcndashboard-mcp

Servidor oficial del Model Context Protocol (MCP) para Shadcn Dashboard.

Este servidor MCP permite que IDE y agentes impulsados por IA descubran, busquen e instalen bloques de UI de Shadcn Dashboard directamente en tus proyectos, con caché en memoria, listados ligeros eficientes en tokens, detección anticipada de Free vs PRO, planos de composición de layout y fragmentos de código JSX automáticos.

Instalar configuración de MCP

npx shadcndashboard-cli install <client>

Clientes compatibles

Instalación manual

Agrega a la configuración de MCP de tu IDE:

{
  "mcpServers": {
    "shadcndashboard-mcp": {
      "command": "npx",
      "args": ["-y", "shadcndashboard-mcp@latest"]
    }
  }
}

Para MCP, visita su PÁGINA PRINCIPAL
Para más información, consulta nuestra documentación sobre Cómo usar el servidor MCP

Herramientas disponibles

El servidor proporciona las siguientes herramientas invocables a través de MCP:

Nombre de la herramienta	Descripción
`get_audit_checklist`	Ejecutar primero. Devuelve reglas estrictas de flujo de trabajo, requisitos previos de `components.json`, reglas de Free vs PRO y requisitos de estructura de shell.
`listBlocks`	Lista todos los bloques de Shadcn Dashboard con filtrado por categoría (`shells`, `charts`, `metrics`, `tables`, `forms`, `layout`, `ai-ops`) y nivel de licencia (`free`, `pro`, `all`).
`listFreeBlocks`	Herramienta de acceso directo dedicada para listar solo bloques 100% gratuitos que no requieren licencia.
`listComponents`	Proporciona una lista ligera de componentes de UI de Shadcn Dashboard con filtrado opcional por nivel.
`getBlockInstall`	Devuelve el comando de instalación oficial, el nombre de exportación del componente, la declaración de importación y un fragmento de uso JSX limpio.
`searchBlocks`	Busca bloques por palabras clave o etiquetas con filtrado opcional por nivel de licencia (`free`, `pro`, `all`).
`listInstalledBlocks`	Lista todos los bloques que están actualmente instalados en el proyecto.
`getDashboardLayoutGuidelines`	Obtén reglas de prioridad de shell de dashboard, recetas de composición por dominio (AI Ops, SaaS, Ecommerce, Logística, Salud) y pautas de alineación y equilibrio de altura con CSS Grid / Flex.
`handleError`	Clasificador inteligente de errores y guía de recuperación para errores de `components.json` faltante, licencia, CLI o no encontrado.

Prompts disponibles

El servidor proporciona prompts enriquecidos para guiar a los agentes de IA a través de flujos de trabajo comunes:

Prompt/Comando	Descripción
`search`	Busca componentes o bloques por tema.
`create-ui`	Arquitectura una página de UI completa usando shells de dashboard preconstruidos y layouts de cuadrícula equilibrados.
`build-dashboard`	Construye un dashboard completo específico de dominio (AI Ops, Ecommerce, SaaS/AI, Logística, POS de restaurante, Escuela, Salud).
`add-analytics-section`	Agrega una sección moderna de analítica y gráficos con tarjetas de métricas a una página existente.
`create-auth-flow`	Genera páginas de autenticación (inicio de sesión, registro, OTP, recuperación de contraseña, incorporación en varios pasos).
`create-data-view`	Crea una vista de gestión de datos con filtrado, búsqueda y paginación.
`customization-guidelines`	Define qué partes de los bloques instalados pueden modificarse de forma segura (solo texto).

Ejemplo de uso

Una vez configurado, tu agente de IA puede realizar tareas como:

"Lista todos los shells de dashboard gratuitos" -> La IA llama a listFreeBlocks(category: "shells")

"Dame el comando de instalación para dashboard-shell-01" -> La IA llama a getBlockInstall(name: "dashboard-shell-01", packageManager: "pnpm dlx") y obtiene el comando + fragmento de importación.

"Crea un layout de dashboard de analítica SaaS" -> La IA usa build-dashboard y sigue getDashboardLayoutGuidelines

"Busca bloques de gráficos gratuitos" -> La IA llama a searchBlocks(query: "chart", tier: "free")

Instrucciones para agentes (Claude / Cursor / Windsurf)

Si usas Claude Projects, Cursor o Windsurf, hemos preparado un conjunto de instrucciones que puedes copiar y pegar para que tu IA use este servidor MCP sin problemas. Consulta claude-instructions.md.

Créditos

Creado por shadcndashboard.

MIT