Content
# Ant Design Component Library 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.
## Features
- Preprocessed data, ready to use (preprocessed version is `Ant Design V5.24.6 2025/4/12`)
- You can extract the latest/other versions of component documentation yourself
- Lists all available `Ant Design` components
- Includes component names, descriptions, available versions, and information on when to use the current component
- View specific component documentation (filtered for relevance and context)
- View specific component properties and API definitions
- View code examples for specific components
- View update logs for specific components
- Extensive caching to effectively alleviate IO pressure
## Future Plans
- [ ] Implement monitoring of updates to the Ant Design component library for automatic data extraction and release
- [ ] Add detailed example documentation
- [ ] Consider placing extracted data on a CDN for real-time access
- In practice, executing with npx will check for new versions and install the latest, currently ensuring data real-time availability
- [ ] Consider supporting parameter adjustments for tool registration to improve context
- Currently, some clients support manual toggling of individual tools: cline, GitHub Copilot, etc.
- [ ] Consider compatibility with Ant Design 4.x versions or other UI libraries
- Such as Ant Design X and other component libraries
## When Do You Need to Extract Component Documentation Yourself?
1. You want to use the latest component documentation
2. You want to use documentation for other versions of components
### Component Documentation
```bash
# Clone the Ant Design repository
git clone https://github.com/ant-design/ant-design.git --depth 1 --branch master --single-branch --filter=blob:none
# Execute the documentation extraction command in the current directory
npx @jzone-mcp/antd-components-mcp extract [ant design repo path] # Default extraction path is ./ant-design
```
### Component Update Logs
Extracting component update logs relies on the `Ant Design` `scripts/generate-component-changelog.ts` script, which needs to be generated after dependencies:
```bash
cd ant-design
pnpm install
# Generate component update log JSON
pnpm lint:changelog
# Extract component information
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]
```
This will create a data directory containing all extracted component documentation for use by the MCP server.
## Claude Desktop Integration
To use this MCP server in the Claude desktop version, edit the `claude_desktop_config.json` configuration file:
```json
{
"mcpServers": {
"Ant Design Components": {
"command": "npx",
"args": ["@jzone-mcp/antd-components-mcp"]
}
}
}
```
Configuration file location:
- macOS/Linux: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `$env:AppData\Claude\claude_desktop_config.json`
## MCP Tools
The server provides the following tools for LLMs to interact with the Ant Design component documentation:
- `list-components`: List all available Ant Design components
- `get-component-docs`: Retrieve detailed documentation for a specific Ant Design component, excluding code examples
- `list-component-examples`: Retrieve code examples for a specific Ant Design component
- `get-component-changelog`: List the update logs for a specific Ant Design component
## Query Examples
Example queries you can try:
```text
What available components does Ant Design have?
After uploading an image example, implement the functionality as shown using Ant Design.
Show the documentation for the Button component.
What properties does the Button component accept?
Show the code example for the Button component.
View the basic usage of the Button component.
View the update history of the Button component.
```
## 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 (in markdown format)
- API/property documentation
- Example code
- Complete update logs
This approach has several advantages:
1. Users do not need to clone the entire Ant Design repository
2. The MCP server starts faster
3. The package size is smaller
4. It is easier to update when new versions are released
When you need to update the Ant Design documentation, simply execute the command `npx @jzone-mcp/antd-components-mcp extract [ant design repo path]`.
