Servidor MCP de interfaz de usuario de Shadcn

Un servidor MCP (Protocolo de Control de Modelos) potente y flexible, diseñado para optimizar la experiencia de desarrollo con componentes de interfaz de usuario de Shadcn. Este servidor proporciona una base sólida para crear 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 : obtiene la lista de componentes shadcn/ui disponibles

• get-component-docs : obtener la documentación de un componente específico

• install-component : instala un componente shadcn/ui

• list-blocks : obtiene la lista de bloques shadcn/ui disponibles

• get-block-docs : obtener la documentación de un bloque específico

• install-blocks : instala un bloque shadcn/ui

Funcionalidad

• Gestión de componentes

  • Lista de componentes shadcn/ui disponibles

  • Obtenga documentación detallada para componentes específicos

  • Instalar componentes con soporte para múltiples administradores de paquetes (npm, pnpm, yarn, bun)

• Gestión de bloques

  • Lista de bloques shadcn/ui disponibles

  • Obtenga documentación y código para bloques específicos

  • Instalar bloques con soporte para múltiples administradores de paquetes

• Soporte del administrador de paquetes

  • Soporte de tiempo de ejecución flexible para npm, pnpm, yarn y bun

  • Detección automática del gestor de paquetes preferido del usuario

Related MCP server: aceternityui-mcp

Instalación

Prerrequisitos

• Node.js (v18 o superior)

• gestor de paquetes npm o yarn

Configuración del escritorio de Claude

Para utilizar con Claude Desktop, agregue 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

Agregue esto a su ./codeium/windsurf/model_config.json :

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

Configuración del cursor

Agregue esto a su .cursor/mcp.json :

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

Desarrollo y depuración

Desarrollo local

1. Instalar dependencias:

npm install

2. Construir el servidor:

npm run build

Depuración

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

npm run inspector

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

• Monitorear la comunicación MCP

• Inspeccionar las llamadas y respuestas de las herramientas

• Depurar el comportamiento del servidor

• Ver registros en tiempo real

Proyectos y dependencias relacionados

Este proyecto se construye utilizando las siguientes herramientas y bibliotecas:

• Protocolo de contexto de modelo SDK de TypeScript : el SDK oficial de TypeScript para servidores y clientes MCP

• MCP Inspector : una herramienta de depuración para servidores MCP

• Cheerio : implementación rápida, flexible y sencilla del núcleo jQuery diseñado específicamente para el servidor

Licencia

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

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.