Antd Components Mcp

中文文档 | 英文文档

Ant Design 组件 MCP 服务

一个模型上下文协议（MCP）服务，可向 Claude 等大模型提供 Ant Design 组件文档。该服务可通过一组专用工具，帮助大模型探索和了解 Ant Design 组件。

相关文章：

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

功能特性

• 🚀 预处理数据，开箱即用（预处理版本：Ant Design V6.6.8 2026/10/26）
  • 🔨 可提取最新版本或其他版本的文档
• 🔗 列出所有可用的 Ant Design 组件
  • 📃 包含组件名称、描述、可用版本以及组件的适用场景
• 📃 查看特定组件的文档（已筛选出便于上下文使用的内容）
• 📃 查看组件属性和 API 定义
• 📃 查看特定组件的代码示例
• 📖 查看特定组件的更新日志
• 💪 提供大量缓存，有效降低 IO 压力
• ⚙️ 预配置提示词，减少重复工具调用（针对上下文进行了优化）
  • 😺 已测试，可与 Claude 客户端配合使用
  • 😩 目前无法与 github copilot/Cline 插件配合使用

版本映射

本软件包采用版本映射策略：软件包主版本号对应 Ant Design 主版本号：

• Ant Design 5.0 → 使用软件包版本 1.0.x
• Ant Design 6.0 → 使用软件包版本 2.0.x
• Ant Design 7.0 → 对应软件包版本 3.0.x（未来）

版本同步策略

Ant Design 发布新的主版本时，本软件包也会按照以下规则发布对应的新主版本：Ant Design 主版本号 + 1 = 软件包主版本号。

例如：

• Ant Design 7.0 发布时，本软件包将发布 3.0.0 版本
• 软件包版本号始终比 Ant Design 主版本号高 1，以保持清晰的版本映射关系

每个软件包版本都包含 peerDependencies，帮助你选择正确的版本：

• 1.0.x 版本需要 antd ^5.0.0
• 2.0.x 版本需要 antd ^6.0.0
• 3.0.x 版本将需要 antd ^7.0.0（未来）

路线图

• 实现 Ant Design 组件更新时自动提取数据
• 为工具调用添加上下文感知（例如，返回“请使用之前获取的内容”）
  • 通过 [system-description](## MCP Prompt) 提示词实现
• 添加详细的 MCP 工具示例文档
• 考虑将提取的数据托管在 CDN 上，以便实时访问
  • 目前 npx 会自动检查并安装新版本
• 支持通过参数调整工具注册，以改进上下文
  • 部分客户端已支持手动切换工具（例如 cline、github copilot）
• 考虑兼容 Ant Design 4.x 或其他 UI 库
  • 例如 Ant Design X 系列组件

什么时候需要自行提取组件文档？

1. 想要使用最新的组件文档
2. 想要使用其他版本的文档

组件文档

# 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

组件变更日志

组件变更日志提取依赖于 Ant Design 的 scripts/generate-component-changelog.ts 脚本：

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]

这会创建一个数据目录，其中包含为 MCP 服务提取的所有组件文档。

Claude Desktop 集成

要在 Claude Desktop 中使用此 MCP 服务，请编辑 claude_desktop_config.json 配置文件：

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

配置文件位置：

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

MCP 提示词

该服务提供以下用于与大模型交互的提示词：

• system-description：专业的 Ant Design 组件专家助手，可有效减少重复的工具调用
• system-pages-generate：专业的前端 Ant Design 页面开发助手，可有效减少重复的工具调用，专注于页面生成

注意：对于不支持提示词的客户端，你可以复制以下内容：

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.

MCP 工具

该服务提供以下工具，用于交互式查阅 Ant Design 组件文档：

• list-components：列出所有可用的 Ant Design 组件
• get-component-docs：获取特定 Ant Design 组件的详细文档（不含代码示例）
• list-component-examples：获取特定 Ant Design 组件的代码示例
• get-component-changelog：列出特定 Ant Design 组件的变更日志

示例查询

试试以下示例查询：

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.

工作原理

scripts/extract-docs.ts 脚本从 Ant Design 仓库中提取文档，并将其保存到 componentData 目录中，其中包括：

• 组件文档（Markdown 格式）
• API/属性文档
• 示例代码
• 完整的变更日志

优势：

1. 用户无需克隆整个 Ant Design 仓库
2. MCP 服务启动更快
3. 包体积更小
4. 发布新版本时更容易更新

要更新 Ant Design 文档，只需运行： npx @jzone-mcp/antd-components-mcp extract [ant design repo path]

架构

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

数据流

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

组件数据结构

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
    }

缓存机制

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]

## 定时文档提取与发布机制

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