The Ant Design Components MCP Server provides access to Ant Design component documentation for LLMs, enabling developers to:

• List all available Ant Design components with names, descriptions, and usage context

• Retrieve detailed documentation for specific components, including API properties

• Access code examples for specific components to see implementation details

• View component changelogs to track version history and updates

• Extract documentation data directly from Ant Design repositories

• Utilize pre-configured prompts for Ant Design component interactions

• Integrate with LLMs like Claude for enhanced component exploration and understanding

• Optimize context-aware interactions to reduce repetitive tool calls

Provides Ant Design component documentation, allowing access to component details, properties, API definitions, code examples, and changelogs for Ant Design UI components.

Mentions compatibility issues with GitHub Copilot plugins, indicating attempted but currently non-functional integration with the Copilot service.

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@antd-components-mcp show me the API for the Button component"

That's it! The server will respond to your query, and you can continue using it as needed.

Here is a step-by-step guide with screenshots.

# 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

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]

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

# 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

# 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.

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.

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