Servidor de protocolo de contexto del modelo de componentes de diseño de Ant

Un servidor de Protocolo de Contexto de Modelo (MCP) que expone la documentación de los componentes de Ant Design a Modelos de Lenguaje Grandes (LLM) como Claude. Este servidor permite a un LLM explorar y comprender los componentes de Ant Design mediante un conjunto de herramientas especializadas.

Características

• Fácil de usar: no es necesario clonar todo el repositorio de Ant Design

• Documentación de componentes preextraída para un inicio más rápido

• Enumere todos los componentes de Ant Design disponibles

• Obtenga documentación detallada de los componentes, incluidas descripciones y usos.

• Ver propiedades de componentes y definiciones de API

• Explorar ejemplos de código para componentes específicos

• Buscar componentes por nombre o funcionalidad

Related MCP server: Ant Design MCP Server

Configuración inicial

Antes de utilizar el servidor MCP por primera vez, debe extraer la documentación del repositorio de Ant Design:

# First, clone the Ant Design repository (can be temporary)
git clone https://github.com/ant-design/ant-design.git

# Extract documentation
cd mcp-antd-components
npm run extract   # Uses the default ./ant-design path
# OR
node scripts/extract-docs.mjs /path/to/ant-design  # For a custom path

# After extraction is complete, the Ant Design repo can be deleted if desired

Esto creará un directorio data con toda la documentación de los componentes extraídos, que utilizará el servidor MCP.

Probando el servidor

Para verificar que todo funciona correctamente, puedes ejecutar el script de prueba:

npm test
# OR
node scripts/test-server.mjs

Esto ejecutará el servidor MCP y probará todas las herramientas disponibles con consultas de muestra.

Uso

Línea de comandos

Ejecute el servidor MCP:

# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components

Integración de escritorio de Claude

Para utilizar este servidor MCP con Claude Desktop, edite su archivo de configuración claude_desktop_config.json :

{
  "mcpServers": {
    "Ant Design Components": {
      "command": "npx",
      "args": ["-y", "mcp-antd-components"]
    }
  }
}

Ubicación del archivo de configuración:

• macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json

• Ventanas: $env:AppData\Claude\claude_desktop_config.json

Integración de Claude Code

Para utilizar este servidor MCP con Claude Code CLI, siga estos pasos:

1. Agregue el servidor MCP de Ant Design Components a Claude Code

   # Basic syntax
   claude mcp add antd-components npx -y mcp-antd-components

2. Verifique que el servidor MCP esté registrado

   # List all configured servers
   claude mcp list
   
   # Get details for your Ant Design components server
   claude mcp get antd-components

3. Quitar el servidor si es necesario

   claude mcp remove antd-components

4. Utilice la herramienta en Claude Code

   Una vez configurado, puede invocar la herramienta en su sesión de Claude Code haciendo preguntas sobre los componentes de Ant Design.

Consejos:

• Utilice el indicador -s o --scope con project (predeterminado) o global para especificar dónde se almacena la configuración

Herramientas MCP

El servidor proporciona las siguientes herramientas para que los LLM interactúen con la documentación de componentes de Ant Design:

• list-components : enumera todos los componentes de Ant Design disponibles en formato PascalCase (por ejemplo, Button, DatePicker)

• get-component-props : obtiene las propiedades y la documentación de la API para un componente específico (use nombres PascalCase como "Botón")

• get-component-docs : obtiene documentación detallada para un componente específico (use nombres PascalCase como "DatePicker")

• list-component-examples : enumera todos los ejemplos disponibles para un componente específico (use nombres PascalCase como "Tabla")

• get-component-example : obtiene el código para un ejemplo de componente específico (nombre del componente en PascalCase)

• search-components : busca componentes por patrón de nombre (funciona con patrones PascalCase)

Ejemplos

Consultas de ejemplo para probar:

What components are available in Ant Design?
Show me the documentation for the Button component.
What props does the Table component accept?
Show me code examples for the Modal component.
Get the example "basic" for the Form component.
Find components related to Input or Form elements.

Nota: Los nombres de los componentes se proporcionan en PascalCase (por ejemplo, Button, DatePicker, Table) para que coincidan con las convenciones de nomenclatura de componentes de React, aunque la estructura de directorio interna utiliza kebab-case (por ejemplo, button, date-picker, table).

Cómo funciona

El script scripts/extract-docs.mjs extrae la documentación del repositorio de Ant Design y la guarda en el directorio data . Esto incluye:

• Documentación de componentes (markdown)

• Documentación de API/props

• Código de ejemplo

• Documentación de accesorios comunes

Este enfoque tiene varias ventajas:

1. Los usuarios no necesitan clonar todo el repositorio de Ant Design

2. Tiempo de inicio más rápido para el servidor MCP

3. Tamaño de paquete más pequeño

4. Es más fácil actualizar cuando se lanzan nuevas versiones

Para actualizar la documentación de una nueva versión de Ant Design, simplemente ejecute el script de extracción nuevamente con el repositorio actualizado.