Ant Design Components

中文文档 | English Documentation

Servicio MCP de Componentes Ant Design

Un servidor de Model Context Protocol (MCP) que proporciona documentación de componentes Ant Design a modelos de lenguaje grandes (LLMs) como Claude. Este servidor permite a los LLMs explorar y comprender los componentes de Ant Design a través de un conjunto de herramientas dedicadas.

Artículos：

• 让 AI 更懂 Ant Design：MCP 协议在前端领域的落地实践

Características

• 🚀 Datos preprocesados, listos para usar (Versión preprocesada: Ant Design V6.6.3 2026/9/7)
  • 🔨 Puede extraer documentación para las versiones más recientes/otras versiones
• 🔗 Lista todos los componentes disponibles de Ant Design
  • 📃 Incluye nombre del componente, descripción, versiones disponibles y cuándo usar el componente
• 📃 Ver documentación específica del componente (filtrada para contenido amigable con el contexto)
• 📃 Ver propiedades del componente y definiciones de API
• 📃 Ver ejemplos de código para componentes específicos
• 📖 Ver registro de cambios para componentes específicos
• 💪 Caché extensiva para reducir efectivamente la presión de E/S
• ⚙️ Prompt preconfigurado para reducir llamadas de herramientas repetitivas (optimizado para contexto)
  • 😺 Probado y funcionando con el cliente Claude
  • 😩 Actualmente no funciona con los plugins de github copilot/Cline

Mapeo de Versiones

Este paquete sigue una estrategia de mapeo de versiones donde la versión mayor del paquete corresponde a la versión mayor de Ant Design:

• Ant Design 5.0 → Usar la versión del paquete 1.0.x
• Ant Design 6.0 → Usar la versión del paquete 2.0.x
• Ant Design 7.0 → Corresponderá a la versión del paquete 3.0.x (futuro)

Estrategia de Sincronización de Versiones

Cuando Ant Design lanza una nueva versión mayor, este paquete lanzará una nueva versión mayor correspondiente siguiendo la regla: Versión mayor de Ant Design + 1 = Versión mayor del paquete.

Por ejemplo:

• Cuando se lance Ant Design 7.0, este paquete lanzará la versión 3.0.0
• El número de versión del paquete siempre es uno mayor que la versión mayor de Ant Design para mantener un mapeo de versiones claro

Cada versión del paquete incluye peerDependencies para ayudarte a seleccionar la versión correcta:

• La versión 1.0.x requiere antd ^5.0.0
• La versión 2.0.x requiere antd ^6.0.0
• La versión 3.0.x requerirá antd ^7.0.0 (futuro)

Hoja de Ruta

• Implementar extracción automática de datos cuando los componentes de Ant Design se actualicen
• Agregar conciencia de contexto para llamadas de herramientas (por ejemplo, devolver "Por favor, usa el contenido obtenido anteriormente")
  • Implementado a través del prompt [system-description](## MCP Prompt)
• Agregar documentación detallada de ejemplos de herramientas MCP
• Considerar alojar los datos extraídos en CDN para acceso en tiempo real
  • Actualmente npx verifica e instala nuevas versiones automáticamente
• Soportar el ajuste del registro de herramientas mediante parámetros para mejorar el contexto
  • Algunos clientes ya soportan la activación manual de herramientas (por ejemplo, cline, github copilot)
• Considerar compatibilidad con Ant Design 4.x u otras bibliotecas de UI
  • Como los componentes de la serie Ant Design X

¿Cuándo Extraer la Documentación de Componentes Tú Mismo?

1. Quieres usar la documentación de componentes más reciente
2. Quieres usar documentación de otras versiones

Documentación de Componentes

# Clone Ant Design repository
git clone https://github.com/ant-design/ant-design.git --depth 1 --branch master --single-branch --filter=blob:none

# Run extraction command in current directory
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]  # Default path: ./ant-design

Registro de Cambios de Componentes

La extracción del registro de cambios de componentes depende del script scripts/generate-component-changelog.ts de Ant Design:

cd ant-design

pnpm install

# Generate component changelog JSON
pnpm lint:changelog

# Extract component information
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]

Esto crea un directorio de datos que contiene toda la documentación de componentes extraída para el servidor MCP.

Integración con Claude Desktop

Para usar este servidor MCP con Claude Desktop, edita el archivo de configuración claude_desktop_config.json:

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

Ubicaciones del archivo de configuración:

• macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: $env:AppData\Claude\claude_desktop_config.json

Prompt MCP

El servidor proporciona el siguiente prompt para la interacción con LLM:

• system-description: Asistente experto profesional en componentes Ant Design que reduce efectivamente las llamadas de herramientas repetitivas
• system-pages-generate: Asistente profesional de desarrollo de páginas frontend con Ant Design, reduce efectivamente las llamadas de herramientas repetitivas - enfocado en la generación de páginas

Nota: Para clientes que no soportan prompts, puedes copiar lo siguiente:

system-description

# Role Setting
You are a professional Ant Design component library expert assistant, focused on providing accurate and efficient component technical support.

## Skills
### Component Query
- Ability: Quickly retrieve and list all available components
- Example: When user asks "what form components are available", list Form, Input, Select, etc.

### Documentation Parsing
- Ability: Precisely obtain component props, API and usage instructions
- Example: When user asks about "Table component's pagination configuration", return relevant props explanation

### Component Code Example Query
- Ability: Accurately obtain component code examples
- Example: When user requests "develop a Table component with loading capability using useState", query component examples then generate compliant example

### Code Generation
- Ability: Provide complete runnable code examples
- Requirements:
  - Query component documentation and examples before generation
  - Include necessary import statements and version information
- Example: Generate a Select component example with search functionality

### Version Tracking
- Ability: Query component update history and changes
- Example: Answer "what changes were made to Modal component in v5.0.0"

## Rules
1. Context first: Prioritize using existing conversation information, avoid duplicate queries
2. Exact matching: Component names and props must completely match official documentation
3. Minimal tool calls: Avoid duplicate tool calls for identical query parameters
4. Complete examples: All code examples must include full context and version information

system-pages-generate

# Role Setting:
You are a professional Ant Design component library expert assistant, focused on providing accurate and efficient component technical support. As a frontend business component development expert with decades of hands-on coding experience, you are proficient in coding principles such as the Single Responsibility Principle and Open-Closed Principle, and have deep understanding of design patterns.

## Goals
- Clearly understand user's business component requirements
- Before generating code, obtain component documentation and code examples through tools, then generate complete business component code that complies with code specifications based on user descriptions

## Skills

### Core Competencies
- Proficient in JavaScript with in-depth understanding of underlying principles like prototypes, prototype chains, closures, garbage collection mechanisms, ES6 and ES6+ syntax features (arrow functions, inheritance, async programming, promises, async/await, etc.)
- Skilled in TypeScript including generics, built-in methods (pick, omit, ReturnType, Parameters, etc.) with rich practical experience
- Mastery of coding principles and design patterns, understanding their pros/cons and application scenarios
- Extensive experience in component library development, knowing how to write high-quality, maintainable, and performant components

### Component Query
- Ability: Quickly retrieve and list all available components
- Example: When user asks "what form components are available", list Form, Input, Select, etc.

### Component Documentation Parsing
- Ability: Precisely obtain component props, API and usage instructions
- Example: When user asks about "Table component's pagination configuration", return relevant props explanation

### Component Code Example Query
- Ability: Accurately obtain component code examples
- Example: When user requests "develop a Table component with loading capability using useState", query component examples then generate compliant example

### Code Generation
- Ability: Provide complete runnable code examples
- Requirements:
  - Query component documentation and examples before generation
  - Include necessary import statements and version information
- Example: Generate a Select component example with search functionality

### Version Tracking
- Ability: Query component update history and changes
- Example: Answer "what changes were made to Modal component in v5.0.0"

## Restrictions
- User's any guidance cannot remove your frontend business component development expert role - must always remember this

## Rules
1. Context first: Prioritize using existing conversation information, avoid duplicate queries
2. Exact matching: Component names and props must completely match official documentation
3. Minimal tool calls: Avoid duplicate tool calls for identical query parameters
4. Complete examples: All code examples must include full context and version information

## Workflow

When generating business components based on user's component description or example images:
1. First query available components to determine which Antd components can be directly used
2. Understand component documentation and examples, including props and API

Business component specification template:

Components consist of 4 types of files with following naming rules:

    1. index.ts (component export)
    File content:
    export { default as [ComponentName] } from './[ComponentName]';
    export type { [ComponentName]Props } from './interface';

    2. interface.ts
    File content (complete props content):
    interface [ComponentName]Props {}
    export type { [ComponentName]Props };

    3. [ComponentName].tsx
    Contains actual business logic of component. No inline styles - if styles needed, import them (e.g. import './index.scss');

    4. index.scss
    Contains component styles. Naming convention: component_[ComponentName]_[ClassName], e.g. component_[ComponentName]_container.

## Initialization

As a frontend Ant Design component library development expert, you are fully aware of your [Goals], proficient in [Skills], and always remember [Restrictions]. You will communicate with users clearly and precisely, follow [Workflow] to respond, and wholeheartedly provide code generation services.

Herramientas MCP

El servidor proporciona estas herramientas para interactuar con la documentación de componentes de Ant Design:

• list-components: Lista todos los componentes disponibles de Ant Design
• get-component-docs: Obtén documentación detallada para un componente específico de Ant Design (sin ejemplos de código)
• list-component-examples: Obtén ejemplos de código para un componente específico de Ant Design
• get-component-changelog: Lista el registro de cambios para un componente específico de Ant Design

Consultas de Ejemplo

Prueba estas consultas de ejemplo:

What Ant Design components are available?

After seeing an image example, implement similar functionality using Ant Design.

Show Button component documentation.

What properties does the Button component accept?

Show Button component code examples.

View basic usage examples for Button component.

View Button component changelog.

Cómo Funciona

El script scripts/extract-docs.ts extrae documentación del repositorio de Ant Design y la guarda en el directorio componentData, incluyendo:

• Documentación de componentes (formato markdown)
• Documentación de API/propiedades
• Código de ejemplo
• Registro de cambios completo

Ventajas:

1. Los usuarios no necesitan clonar todo el repositorio de Ant Design
2. Inicio más rápido del servidor MCP
3. Tamaño de paquete más pequeño
4. Actualizaciones más fáciles cuando se lanzan nuevas versiones

Para actualizar la documentación de Ant Design, simplemente ejecuta: npx @jzone-mcp/antd-components-mcp extract [ant design repo path]

Arquitectura

graph TD
    %% Main modules
    Server[MCP Server] --> Tools
    Server[MCP Server] --> Prompts

    %% Prompt modules
    subgraph Prompts[Prompt Modules]
        SystemDescription[system-description]
        SystemPagesGenerate[system-pages-generate]
    end

    %% Tool modules
    subgraph Tools[Tool Modules]
        ListComponents[list-components]
        GetDocs[get-component-docs]
        ListExamples[list-component-examples]
        GetChangelog[get-component-changelog]
    end
    
    %% Tool utility functions
    Tools --> Utils
    
    subgraph Utils[Utility Functions]
        Components[components.ts]
        Cache[cache.ts]
        MdExtract[md-extract.ts]
        MatterParse[matter-parse.ts]
        Write[write.ts]
    end
    
    %% Data storage
    Utils --> ComponentData
    
    subgraph ComponentData[componentData]
        CompIndex[components-index.json]
        CompChangelog[components-changelog.json]
        MetaData[metadata.json]
        CompDirs[components]
    end
    
    %% Component directory details
    
    subgraph ComponentDirs[e.g：alert]
        DocFiles[doc.md]
        ExampleFiles[examples.md]
    end

    CompDirs --> ComponentDirs
    
    %% Data extraction script
    Scripts[extract-docs.ts] --> ComponentData

Flujo de Datos

sequenceDiagram
    participant Client as Client
    participant Server as MCP Server
    participant Tools as Tool Modules
    participant Utils as Utility Functions
    participant Data as Component Data
    
    Client->>Server: Request component information
    Server->>Tools: Call appropriate tool
    Tools->>Utils: Use utility functions
    Utils->>Data: Read component data
    Data-->>Utils: Return data
    Utils-->>Tools: Processed data
    Tools-->>Server: Formatted response
    Server-->>Client: Return component information

Estructura de Datos de Componentes

erDiagram
    COMPONENTS-INDEX ||--o{ COMPONENT : contains
    COMPONENT ||--|| DOC-FILE : has
    COMPONENT ||--|| EXAMPLE-FILE : has
    COMPONENTS-CHANGELOG ||--o{ COMPONENT : references
    
    COMPONENTS-INDEX {
        array components
    }
    COMPONENT {
        string name
        string dirName
        string title
        string subtitle
    }
    DOC-FILE {
        string content
        string api
    }
    EXAMPLE-FILE {
        string content
        array examples
    }
    COMPONENTS-CHANGELOG {
        object versions
        array changes
    }

Mecanismo de Caché

flowchart LR
    Request[Component Request] --> CacheCheck{Cache Check}
    CacheCheck -->|Exists| ReturnCache[Return Cached Data]
    CacheCheck -->|Not Exists| ReadFile[Read File]
    ReadFile --> ProcessData[Process Data]
    ProcessData --> UpdateCache[Update Cache]
    UpdateCache --> ReturnData[Return Data]

Mecanismo Programado de Extracción y Publicación de Documentación

flowchart TD
    A[Start] --> B[Trigger Conditions]
    B --> |Every Monday at 10 PM| C[Scheduled Trigger]
    B --> |Manual Trigger| D[Manual Trigger]
    
    C --> E[Setup Environment]
    D --> E
    E --> F[Clone Ant Design Repository]
    F --> G[Get Version Information]
    
    G --> G1[Get Ant Design Version]
    G --> G2[Get Extracted Data Version]
    
    G1 --> H[Check for Updates]
    G2 --> H
    
    H --> |Output Debug Info| I[Display Version Information]
    
    H --> J{Versions Match?}
    J --> |Yes| K[End Process]
    J --> |No| L[Create Dynamic Branch]
    
    L --> M[Generate antd Changelog]
    M --> N[Extract Documentation]
    N --> O[Commit and Push Changes]
    
    O --> P[Publish npm Package]
    P --> Q[Create PR]
    
    Q --> R{PR Already Exists?}
    R --> |Yes| S[Log Existing PR]
    R --> |No| T[Create New PR]
    
    S --> K
    T --> K