Ant Design Component Model Context Protocol (MCP) Service: Design, Implementation, and Usage Guide

Introduction

With the rise of AI large language models (LLMs) such as ChatGPT, Claude, Gemini, and others, the author explores how to increase the relevance of LLM responses for specific frontend component scenarios by using a Model Context Protocol (MCP) combined with system prompts.

What is MCP?

MCP (Model Context Protocol) is a standardized way to describe model context, allowing a client (e.g., Claude Desktop, Cursor, GitHub Copilot) to load Tools, Prompts, and Resources from MCP servers and include them in the system prompt sent to the LLM.

Client examples: Claude Desktop (supports Prompt and Resource), Cursor, GitHub Copilot.

Tool: core processing function invoked by the LLM.

Prompt: preset prompt that can be selected manually.

Resource: pre‑loaded content such as Ant Design component documentation.

Project Background

The author discovered MCP a month ago and decided to build a frontend‑focused MCP service using Ant Design as the component library. The goal is to enable queries like "show Button component docs" and generate related code automatically.

Solution Thinking

Key idea: keep the process simple—implement first, then optimise. The core workflow is to prepare component documentation, expose it via MCP Tools, and let the LLM combine user queries with tool results to produce more relevant answers.

Architecture Design

The service is modular and includes the following core modules:

Component documentation extraction

Tool definitions (list components, get component details, fetch API, retrieve examples, get changelog)

Prompt design (system‑description, system‑pages‑generate)

Technical Scheme

GitHub repository: zhixiaoqiang/antd-components-mcp

Data extraction extracts component names, descriptions, versions, markdown docs, API definitions, and example code from the Ant Design repository (supports v4.x and v5.x). The extracted data is cached to reduce I/O and token usage.

Tools Design

Tool1: List available components (name, description, version, usage).

Tool2: Get detailed component documentation.

Tool3: Retrieve component API.

Tool4: Fetch component example code.

Tool5: Get component changelog.

Prompt Design

Two system prompts are provided:

system-description : "Professional Ant Design component expert assistant, reduces repetitive tool calls."

system-pages-generate : "Professional Ant Design page development assistant, focuses on full page generation."

Implementation Features

Pre‑processed data for Ant Design v5.24.7 (open‑source, ready‑to‑use).

CLI command to extract documentation: npx @jzone-mcp/antd-components-mcp extract [repo‑path] .

Configuration file claude_desktop_config.json for macOS/Linux and Windows.

Provided built‑in prompts for component query and page generation.

Cache mechanism to minimise I/O.

Token‑saving strategies: filter irrelevant content, compress JSON with JSON.stringify .

Future Plans

Automatic monitoring of Ant Design updates and data re‑extraction.

Context‑aware tool calls.

Support for Ant Design 4.x, Ant Design X, and other UI libraries.

Potential CDN hosting of extracted data.

Conclusion

The Ant Design MCP service enables precise component knowledge retrieval, AI‑assisted code generation, and efficient frontend development. It demonstrates how MCP can be applied in the frontend domain and provides a reusable blueprint for building domain‑specific AI assistants.