Skip to main content
Glama
ymadd
by ymadd

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.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ymadd/shadcn-ui-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server