Get the FREE Ultimate OpenClaw Setup Guide →

antd-components

An MCP service for Ant Design components query | 一个减少 Ant Design 组件代码生成幻觉的 MCP 服务,包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

Installation
Run this command in your terminal to add the MCP server to Claude Code.
Run in terminal:
Command
claude mcp add --transport stdio zhixiaoqiang-antd-components-mcp npx @jzone-mcp/antd-components-mcp

How to use

This MCP server provides pre-processed Ant Design component documentation to help large language models understand and reason about components more effectively. It exposes a set of specialized tools and data, including a catalog of available components, detailed component documentation with props and APIs, code examples, and changelogs. Use it to quickly lookup components, inspect their props, view usage examples, and retrieve versioned information aligned with Ant Design major versions. The server is optimized for context-aware tool calls and caching to minimize repeated data fetches when exploring multiple components or versions. When integrated with an LLM workflow, you can query for a component’s API surface, fetch example snippets, or retrieve changelog history to inform design decisions or generate accurate code snippets.

How to install

Prerequisites:

  • Node.js (recommended: LTS version, e.g., 18.x or newer) and npm installed on your system.

Installation and setup:

  1. Ensure Node.js and npm are available:
    • node -v
    • npm -v
  2. Run the MCP server using npx (no local installation required):
    • npx @jzone-mcp/antd-components-mcp

Optional advanced usage:

  • To use via Claude Desktop or similar clients, ensure your config points to the server via the provided mcpServers configuration (see README example). You can also attach any environment variables if your deployment environment requires customization.

Notes:

  • The server auto-resolves and caches data for faster responses. If you need to refresh data after Ant Design updates, re-run the same npx command to trigger a fresh fetch and extraction.

Additional notes

Tips and common considerations:

  • Version mapping: The MCP package uses a version mapping strategy tied to Ant Design major versions. Ensure you select the correct package version for your target Ant Design version (e.g., 1.x for Ant Design 5.x, 2.x for 6.x).
  • Claude Desktop integration: You can configure Claude Desktop to connect to this MCP server via claude_desktop_config.json. Example mapping is provided in the README.
  • Tools behavior: The MCP prompt emphasizes context-first reasoning and minimal tool calls. If the user asks about a component’s current API, try to return the exact props and API definitions rather than duplicating the docs.
  • Data freshness: The server supports automatic data extraction of updated Ant Design components. If you see stale data, re-run the npx command to trigger an update.
  • Troubleshooting: If npx installation or execution fails due to network or npm permissions, ensure your environment allows npm install/run from the command line and that your network can access the npm registry.

Related MCP Servers

Sponsor this space

Reach thousands of developers