shadcn/ui

Proporciona datos estructurados para los componentes de shadcn/ui, incluyendo descripciones, instrucciones de instalación, ejemplos de uso y propiedades.

GitHub
60

Documentación

shadcn-ui MCP Server

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 de shadcn/ui. Implementa un servidor del Model Context Protocol (MCP) que ayuda a los asistentes de IA a acceder a la documentación y ejemplos de los componentes de shadcn/ui.

Características

Herramientas

  • list_shadcn_components - Obtén una lista de todos los componentes shadcn/ui disponibles
  • get_component_details - Obtén información detallada sobre un componente específico
  • get_component_examples - Obtén ejemplos de uso para un componente específico
  • search_components - Busca componentes por palabra clave

Funcionalidad

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

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

Proporciona datos estructurados que incluyen:

  • Descripciones de componentes
  • Instrucciones de instalación
  • Ejemplos de uso
  • Props y variantes
  • Ejemplos de código

Desarrollo

Instala las dependencias:

npm install

Compila el servidor:

npm run build

Para desarrollo con recompilación automática:

npm run watch

Instalación

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

Opción 1: Usar la 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

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

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

Configuración de Cursor

Añade esto a tu .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 un desafío. Recomendamos usar el MCP Inspector, que está disponible como script de paquete:

npm run inspector

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