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.
中文文档 | English Documentation
Ant Design Components MCP Service
A Model Context Protocol (MCP) server that provides Ant Design
component documentation to large language models (LLMs) like Claude
. This server allows LLMs to explore and understand Ant Design
components through a set of dedicated tools.
Articles:
Features
- 🚀 Pre-processed data, ready to use (Pre-processed version:
Ant Design V5.25.2 2025/5/19
)- 🔨 Can extract documentation for the latest/other versions
- 🔗 List all available
Ant Design
components- 📃 Includes component name, description, available versions, and when to use the component
- 📃 View specific component documentation (filtered for context-friendly content)
- 📃 View component properties and API definitions
- 📃 View code examples for specific components
- 📖 View changelog for specific components
- 💪 Extensive caching to effectively reduce IO pressure
- ⚙️ Pre-configured prompt to reduce repetitive tool calls (optimized for context)
- 😺 Tested working with Claude client
- 😩 Currently not working with github copilot/Cline plugins
Roadmap
- Implement automatic data extraction when Ant Design components update
- Add context awareness for tool calls (e.g. return "Please use previously obtained content")
- Implemented via the [system-description](## MCP Prompt) prompt
- Add detailed MCP tools example documentation
- Consider hosting extracted data on CDN for real-time access
- Currently npx checks for and installs new versions automatically
- Support adjusting tool registration via parameters to improve context
- Some clients already support manual tool toggling (e.g. cline, github copilot)
- Consider compatibility with Ant Design 4.x or other UI libraries
- Such as Ant Design X series components
When to Extract Component Documentation Yourself?
- You want to use the latest component documentation
- You want to use documentation for other versions
Component Documentation
Component Changelog
Component changelog extraction depends on Ant Design's scripts/generate-component-changelog.ts
script:
This creates a data directory containing all extracted component documentation for the MCP server.
Claude Desktop Integration
To use this MCP server with Claude Desktop, edit the claude_desktop_config.json
configuration file:
Configuration file locations:
- macOS/Linux:
~/Library/Application Support/Claude/claude_desktop_config.json
- Windows:
$env:AppData\Claude\claude_desktop_config.json
MCP Prompt
The server provides the following prompt for LLM interaction:
system-description
: Professional Ant Design components expert assistant that effectively reduces repetitive tool callssystem-pages-generate
: Professional frontend Ant Design page development assistant, effectively reducing repetitive tool calls - focused on page generation
Note: For clients that don't support prompts, you can copy the following:
system-description
system-pages-generate
MCP Tools
The server provides these tools for interacting with Ant Design component documentation:
list-components
: List all available Ant Design componentsget-component-docs
: Get detailed documentation for a specific Ant Design component (no code examples)list-component-examples
: Get code examples for a specific Ant Design componentget-component-changelog
: List changelog for a specific Ant Design component
Example Queries
Try these example queries:
How It Works
The scripts/extract-docs.ts
script extracts documentation from the Ant Design repository and saves it to the componentData
directory, including:
- Component documentation (markdown format)
- API/property documentation
- Example code
- Complete changelog
Advantages:
- Users don't need to clone the entire Ant Design repository
- Faster MCP server startup
- Smaller package size
- Easier updates when new versions are released
To update Ant Design documentation, simply run:
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]
Architecture
Data Flow
Component Data Structure
Caching Mechanism
## Scheduled Documentation Extraction and Publishing Mechanism
hybrid server
The server is able to function both locally and remotely, depending on the configuration or use case.
一个 Ant Design 组件查询的 mcp 服务,包含 组件文档、API 文档、代码示例、组件更新日志查询
Related MCP Servers
- -securityFlicense-qualityAn MCP server that provides AI tools with access to Rust documentation from docs.rs, enabling search for crates, documentation, type information, feature flags, version information, and source code.Last updated -3TypeScript
- -securityAlicense-qualityAn MCP server that provides semantic search over local git repositories, enabling users to clone repositories, process branches, and search code through vectorized code chunks.Last updated -TypeScriptMIT License
- -securityFlicense-qualityA Model Context Protocol (MCP) service that enables integration with Mantis Bug Tracker, allowing users to query and analyze bug tracking data through natural language commands.Last updated -925TypeScript
- AsecurityFlicenseAqualityAn MCP server that supercharges AI assistants with powerful tools for software development, enabling research, planning, code generation, and project scaffolding through natural language interaction.Last updated -1140TypeScript