Shadcn UI MCP Server

Shadcn UI MCP Server

El servidor Shadcn UI MCP es un servidor basado en TypeScript que permite a los asistentes de IA acceder, obtener y trabajar directamente con el código fuente de los componentes React de shadcn/ui, demostraciones de uso y guías de instalación a través del Protocolo de Contexto del Modelo (MCP). Sirve como puente entre modelos de IA (como Claude o aquellos integrados en IDEs) y la biblioteca de componentes shadcn/ui, apoyando flujos de trabajo eficientes tanto para desarrolladores como para agentes de IA.

Author: Jpisnice


Ver Protocolo

¿Qué es el servidor Shadcn UI MCP?

El servidor Shadcn UI MCP es un servidor MCP de código abierto que expone componentes de shadcn/ui y recursos relacionados a aplicaciones de IA. Permite a los modelos de lenguaje y agentes inteligentes recuperar programáticamente el código fuente de los componentes, ver demostraciones de uso y generar scripts de instalación o guías específicas de marco a través de una interfaz estandarizada. Esto facilita la integración fluida del conocimiento de los componentes de shadcn/ui en flujos de trabajo impulsados por IA y asistentes de código.

Cómo Configurar

  1. Clona el repositorio en tu entorno de desarrollo.

  2. Asegúrate de tener Node.js (v18 o posterior) y npm instalados.

  3. Instala las dependencias con:

    npm install

  4. Construye e inicia el servidor usando:

    bash startup.sh

    o los mismos pasos por separado:

    npm run clean
npm run build
npm run start

  5. Para habilitar la integración con otras aplicaciones (por ejemplo, el modo agente de VS Code), configura tu cliente (como el archivo settings.json de VS Code) para conectarse al punto final SSE, por ejemplo:

    "mcp": {
    "servers": {
        "shadcnui": {
            "type": "sse",
            "url": "http://localhost:3001/sse"
        }
    }
}

  6. Opcionalmente, utiliza el Inspector MCP integrado (por defecto en http://127.0.0.1:6274) para depuración interactiva e inspección del servidor.

Cómo Usar

  1. Inicia el servidor y verifica que esté en funcionamiento (punto final SSE por defecto en http://localhost:3001/sse).
  2. En tu herramienta de IA, IDE o asistente (como VS Code con modo agente), asegúrate de que el servidor MCP esté configurado correctamente como un proveedor de herramientas externas.
  3. Usa los comandos disponibles para:
    • Listar todos los componentes de la UI de shadcn/ui
    • Obtener el código fuente de cualquier componente (por ejemplo, button, accordion)
    • Recuperar código de demostración y ejemplos de uso para componentes
    • Generar scripts de instalación específicos de gestores de paquetes
    • Solicitar guías de instalación específicas de marco
  4. Prueba los puntos finales de la API directamente (para desarrolladores) usando curl, navegador o UI del Inspector para verificar la funcionalidad.
  5. Analiza las respuestas e integra los resultados en tu flujo de trabajo de codificación o proceso de desarrollo impulsado por IA.

Características Clave

  • Acceso directo al código fuente más reciente de los componentes de shadcn/ui desde el repositorio oficial de GitHub.
  • Recuperación a demanda de código de demostración y ejemplos prácticos de uso de componentes para prototipos rápidos.
  • Generación de instrucciones de instalación adaptadas a tu gestor de paquetes preferido (npm, yarn, pnpm, bun).
  • Guías de instalación específicas de marco para entornos soportados (Next.js, Vite, Remix y otros).
  • Servidor MCP fácil de usar con manejo de errores de mejores prácticas y extensibilidad para añadir nuevas herramientas o recursos.
  • Integración fluida con herramientas de desarrollo y asistentes de IA, incluyendo el modo agente de VS Code.

Casos de Uso

  • Asistentes de Codificación IA: Potenciando herramientas de IA o chatbots que ayudan a los desarrolladores a explorar, insertar o modificar componentes de shadcn/ui en su base de código.
  • Integración en IDE: Posibilitando flujos de trabajo en el editor para obtener código fuente de componentes o demostraciones y generar scripts de instalación al instante.
  • Configuración Automatizada de Proyectos: Permitiendo que bots o scripts preparen programáticamente pasos de instalación para marcos y gestores de paquetes específicos.
  • Herramientas de Aprendizaje para Desarrolladores: Suministrando fragmentos de código y guías actualizadas a aplicaciones educativas o generadores de documentación.
  • Refactorización de Código Impulsada por IA: Asistiendo en actualizaciones de componentes o tareas de migración proporcionando siempre el código fuente actual de los componentes.

Preguntas Frecuentes

Q1: ¿Cómo encuentra el servidor la versión más reciente de los componentes?
El servidor obtiene información de los componentes directamente del repositorio de GitHub de shadcn/ui, utilizando múltiples estrategias de búsqueda para adaptarse a cómo se almacenan o nombran los componentes.

Q2: ¿Qué debo hacer si no se encuentra un nombre de componente o devuelve un error?
Verifica de nuevo el nombre del componente tal y como aparece en la biblioteca oficial de shadcn/ui. Si sigue fallando, verifica la estructura del repositorio de shadcn/ui o busca cualquier cambio reciente en el nombre o desaprobación.

Q3: ¿Puedo extender el servidor para añadir nuevas herramientas o recursos?
Sí, el servidor está diseñado para ser extensible. Puedes añadir nuevas herramientas a tools.ts, recursos a resources.ts, y plantillas de recursos a resource-templates.ts.

Q4: ¿Está este servidor listo para producción?
Aunque es robusto, este proyecto está diseñado principalmente para desarrollo local, experimentación e integración con asistentes. Si lo implementas en producción, revisa y refuerza su seguridad y manejo de errores.

Q5: ¿Cómo depuro problemas con el servidor o su integración?
Utiliza el Inspector MCP en http://127.0.0.1:6274, monitorea los registros de la consola y asegúrate de tener acceso correcto a la red tanto en tu entorno de desarrollo como en el repositorio de GitHub de shadcn/ui.