Shadcn UI MCP Server

Servidor MCP de Shadcn UI

Un servidor MCP (Protocolo de Control de Modelos) potente y flexible, diseñado para mejorar la experiencia de desarrollo con componentes de Shadcn UI. Este servidor proporciona una base sólida para construir y gestionar componentes de interfaz de usuario con herramientas y funcionalidades avanzadas.

Características

Herramientas

El servidor MCP proporciona un conjunto de herramientas que se pueden utilizar a través del Protocolo de Control de Modelos:

• list-components: Obtener la lista de componentes shadcn/ui disponibles
• get-component-docs: Obtener documentación para un componente específico
• install-component: Instalar un componente shadcn/ui
• list-blocks: Obtener la lista de bloques shadcn/ui disponibles
• get-block-docs: Obtener documentación para un bloque específico
• install-blocks: Instalar un bloque shadcn/ui

Funcionalidad

• Gestión de Componentes

  • Listar componentes shadcn/ui disponibles
  • Obtener documentación detallada para componentes específicos
  • Instalar componentes con soporte para múltiples gestores de paquetes (npm, pnpm, yarn, bun)

• Gestión de Bloques

  • Listar bloques shadcn/ui disponibles
  • Obtener documentación y código para bloques específicos
  • Instalar bloques con soporte para múltiples gestores de paquetes

• Soporte de Gestores de Paquetes

  • Soporte flexible en tiempo de ejecución para npm, pnpm, yarn y bun
  • Detección automática del gestor de paquetes preferido del usuario

Instalación

Requisitos previos

• Node.js (v18 o superior)
• Gestor de paquetes npm o yarn

Configuración de Claude Desktop

Para usar con Claude Desktop, añade la configuración del servidor:

En MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json En Windows: %APPDATA%/Claude/claude_desktop_config.json

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

Configuración de Windsurf

Añade esto a tu ./codeium/windsurf/model_config.json:

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

Configuración de Cursor

Añade esto a tu .cursor/mcp.json:

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

Desarrollo y Depuración

Desarrollo Local

1. Instala las dependencias:

npm install

2. Compila el servidor:

npm run build

Depuración

Dado que los servidores MCP se comunican a través de stdio, la depuración puede ser un desafío. Recomendamos usar el Inspector MCP para depurar:

npm run inspector

El Inspector proporcionará una URL para acceder a las herramientas de depuración en tu navegador, lo que te permitirá:

• Monitorear la comunicación MCP
• Inspeccionar llamadas y respuestas de herramientas
• Depurar el comportamiento del servidor
• Ver registros en tiempo real

Proyectos Relacionados y Dependencias

Este proyecto está construido utilizando las siguientes herramientas y bibliotecas:

• SDK de TypeScript del Protocolo de Contexto de Modelos - El SDK oficial de TypeScript para servidores y clientes MCP
• Inspector MCP - Una herramienta de depuración para servidores MCP
• Cheerio - Implementación rápida, flexible y ligera del núcleo de jQuery, diseñada específicamente para el servidor

Licencia

Licencia MIT: siéntete libre de usar este proyecto para tus propios fines.

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar una Solicitud de Extracción (Pull Request).