shadcn MCP Server
Servidor MCP oficial que permite a los asistentes de IA explorar, buscar e instalar componentes de shadcn/ui directamente desde registros usando lenguaje natural, impulsando el desarrollo de UI sin alucinaciones.
Descripción general
El shadcn MCP Server es la implementación oficial del Model Context Protocol (MCP) para shadcn/ui. Permite que los asistentes y agentes de IA se conecten de forma segura a registros de componentes compatibles con shadcn, exploren los componentes disponibles, busquen elementos específicos, obtengan código fuente, demos y metadatos, e incluso los instalen directamente en los proyectos mediante instrucciones en lenguaje natural.
Esto elimina problemas comunes de la IA, como el uso de información desactualizada o la generación de props inexistentes, al proporcionar acceso en tiempo real y estructurado a los datos más recientes del registro e integrarse con el CLI de shadcn.
Características
- Explorar y buscar en registros: La IA puede listar y consultar componentes, bloques y gráficos desde cualquier registro compatible con shadcn.
- Obtener datos precisos: Accede a código fuente actualizado en TypeScript, props/interfaces, ejemplos de uso y comandos de instalación.
- Instalación directa: Permite que la IA ejecute automáticamente comandos
shadcn addmediante el puente CLI integrado. - Registros independientes del framework: Funciona con cualquier registro shadcn (oficial o personalizado), incluyendo componentes basados en React y Tailwind.
- Ejecución local y segura: Se ejecuta como un servidor local (generalmente mediante npx o paquete instalado) con autenticación configurable.
- Integración con IDE y herramientas: Soporte nativo en herramientas como Cursor, Claude Desktop, Zed y otras compatibles con MCP.
Cómo funciona
- Instala el servidor MCP (normalmente mediante npx o configuración del proyecto).
- Configura tu registro en
components.json. - Conecta tu asistente de IA al endpoint MCP local.
- Usa instrucciones en lenguaje natural como "añade un bonito dashboard con gráficos de shadcn" — la IA consulta el registro, selecciona los componentes y los instala.
Casos de uso
- Prototipado de UI impulsado por IA en Cursor o Claude Code.
- Automatización de instalación de componentes en grandes bases de código.
- Creación de flujos de trabajo multiagente donde un agente investiga componentes y otro construye la UI.
- Integración de registros personalizados para sistemas de diseño empresariales.
Primeros pasos
Consulta la documentación oficial: https://ui.shadcn.com/docs/mcp
Normalmente se inicia con:
npx shadcn@latest mcp
o configurándolo en tu proyecto y utilizándolo con herramientas de IA compatibles.
Existen múltiples forks de la comunidad y versiones mejoradas (por ejemplo, con soporte para múltiples frameworks como Svelte/Vue), pero la versión oficial de shadcn/ui es la recomendada para la mayoría de los usuarios.