This MCP server provides access to Ant Design component documentation for Large Language Models (LLMs) like Claude. It enables LLMs to explore component details, view props, browse code examples, and search for specific components without needing to access the full Ant Design repository.
Before using the MCP server for the first time, you need to extract the documentation from the Ant Design repository:
# First, clone the Ant Design repository (can be temporary)
git clone https://github.com/ant-design/ant-design.git
# Extract documentation
cd mcp-antd-components
npm run extract # Uses the default ./ant-design path
# OR
node scripts/extract-docs.mjs /path/to/ant-design # For a custom path
After extraction is complete, the Ant Design repository can be deleted if desired. The extracted documentation is saved in the data directory for the MCP server to use.
To verify that everything is working correctly, run the test script:
npm test
# OR
node scripts/test-server.mjs
This will run the MCP server and test all available tools with sample queries.
Run the MCP server using one of these commands:
# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components
To use this MCP server with Claude Desktop, edit your claude_desktop_config.json
configuration file:
{
"mcpServers": {
"Ant Design Components": {
"command": "npx",
"args": ["-y", "mcp-antd-components"]
}
}
}
Location of the configuration file:
~/Library/Application Support/Claude/claude_desktop_config.json
$env:AppData\Claude\claude_desktop_config.json
To use this MCP server with Claude Code CLI, follow these steps:
Add the Ant Design Components MCP server:
claude mcp add antd-components npx -y mcp-antd-components
Verify the MCP server is registered:
# List all configured servers
claude mcp list
# Get details for your Ant Design components server
claude mcp get antd-components
Remove the server if needed:
claude mcp remove antd-components
Tip: Use the -s
or --scope
flag with project
(default) or global
to specify where the configuration is stored.
The MCP server provides the following tools for interacting with Ant Design component documentation:
Try these queries when interacting with the MCP server:
Note: Use component names in PascalCase format (e.g., Button, DatePicker, Table) to match React component naming conventions.
There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json
file so that it is available in all of your projects.
If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json
file.
To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".
When you click that button the ~/.cursor/mcp.json
file will be opened and you can add your server like this:
{
"mcpServers": {
"cursor-rules-mcp": {
"command": "npx",
"args": [
"-y",
"cursor-rules-mcp"
]
}
}
}
To add an MCP server to a project you can create a new .cursor/mcp.json
file or add it to the existing one. This will look exactly the same as the global MCP server example above.
Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.
The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.
You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.