remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

Provides reference information for shadcn/ui components, including component listings, detailed documentation, usage examples, and search functionality. Scrapes and caches data from the official documentation site and GitHub repository.

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

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.

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

Ayuda a los asistentes de IA a acceder a la documentación y los ejemplos de componentes shadcn/ui a través de un servidor MCP basado en TypeScript que proporciona información de referencia para detalles de componentes, ejemplos de uso y capacidades de búsqueda.

Appeared in Searches

Resources for React TypeScript UI Components