Servidor MCP shadcn-ui

Servidor MCP para referencias de componentes shadcn/ui

Este es un servidor MCP basado en TypeScript que proporciona información de referencia para los componentes shadcn/ui. Implementa un servidor de Protocolo de Contexto de Modelo (MCP) que ayuda a los asistentes de IA a acceder a la documentación y los ejemplos de los componentes shadcn/ui.

Características

Herramientas

• list_shadcn_components : obtiene una lista de todos los componentes shadcn/ui disponibles

• get_component_details : obtener información detallada sobre un componente específico

• get_component_examples : obtener ejemplos de uso para un componente específico

• search_components - Buscar componentes por palabra clave

Funcionalidad

Este servidor recopila y almacena en caché información de:

• El sitio oficial de documentación de shadcn/ui ( https://ui.shadcn.com )

• El repositorio de GitHub shadcn/ui

Proporciona datos estructurados que incluyen:

• Descripciones de componentes

• Instrucciones de instalación

• Ejemplos de uso

• Accesorios y variantes

• Ejemplos de código

Related MCP server: Shadcn UI MCP Server

Desarrollo

Instalar dependencias:

npm install

Construir el servidor:

npm run build

Para desarrollo con reconstrucción automática:

npm run watch

Instalación

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

Opción 1: Usar compilación local

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

Opción 2: Usar el comando npx

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

Configuración de windsurf

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

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

Configuración del cursor

Agregue esto a su .cursor/mcp.json :

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

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 , disponible como script de paquete:

npm run inspector

El Inspector proporcionará una URL para acceder a las herramientas de depuración en su navegador.