中文文档 | Englische Dokumentation
Ant Design Components MCP-Dienst
Ein Model Context Protocol (MCP)-Server, der Ant Design Komponentendokumentation für große Sprachmodelle (LLMs) wie Claude bereitstellt. Dieser Server ermöglicht LLMs, Ant Design Komponenten mithilfe einer Reihe dedizierter Tools zu erkunden und zu verstehen.
Artikel:
Merkmale
🚀 Vorverarbeitete Daten, gebrauchsfertig (Vorverarbeitete Version: Ant Design V5.25.2 2025/5/19 )
🔗 Liste aller verfügbaren Ant Design Komponenten
📃 Zeigen Sie die Dokumentation bestimmter Komponenten an (gefiltert nach kontextfreundlichem Inhalt)
📃 Komponenteneigenschaften und API-Definitionen anzeigen
📃 Codebeispiele für bestimmte Komponenten anzeigen
📖 Änderungsprotokoll für bestimmte Komponenten anzeigen
💪 Umfangreiches Caching zur effektiven Reduzierung des IO-Drucks
⚙️ Vorkonfigurierte Eingabeaufforderung zur Reduzierung wiederholter Tool-Aufrufe (kontextoptimiert)
Related MCP server: Rules MCP Server
Fahrplan
[x] Implementieren Sie eine automatische Datenextraktion, wenn Ant Design-Komponenten aktualisiert werden
[x] Kontextsensitivität für Tool-Aufrufe hinzufügen (z.B. Rückgabe „Bitte verwenden Sie zuvor erhaltene Inhalte“)
[ ] Detaillierte Beispieldokumentation für MCP-Tools hinzufügen
[ ] Erwägen Sie das Hosten extrahierter Daten auf CDN für den Echtzeitzugriff
[ ] Unterstützt die Anpassung der Werkzeugregistrierung über Parameter, um den Kontext zu verbessern
[ ] Berücksichtigen Sie die Kompatibilität mit Ant Design 4.x oder anderen UI-Bibliotheken
Sie möchten die neueste Komponentendokumentation verwenden
Sie möchten die Dokumentation für andere Versionen verwenden
Komponentendokumentation
# Clone Ant Design repository
git clone https://github.com/ant-design/ant-design.git --depth 1 --branch master --single-branch --filter=blob:none
# Run extraction command in current directory
npx @jzone-mcp/antd-components-mcp extract [ant design repo path] # Default path: ./ant-design
Komponenten-Änderungsprotokoll
Die Extraktion des Komponentenänderungsprotokolls hängt vom Skript scripts/generate-component-changelog.ts von Ant Design ab:
cd ant-design
pnpm install
# Generate component changelog JSON
pnpm lint:changelog
# Extract component information
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]
Dadurch wird ein Datenverzeichnis erstellt, das die gesamte extrahierte Komponentendokumentation für den MCP-Server enthält.
Claude Desktop Integration
Um diesen MCP-Server mit Claude Desktop zu verwenden, bearbeiten Sie die Konfigurationsdatei claude_desktop_config.json :
{
"mcpServers": {
"Ant Design Components": {
"command": "npx",
"args": ["@jzone-mcp/antd-components-mcp"]
}
}
}
Speicherorte der Konfigurationsdateien:
MCP-Eingabeaufforderung
Der Server bietet die folgende Eingabeaufforderung für die LLM-Interaktion:
system-description : Professioneller Expertenassistent für Ant Design-Komponenten, der wiederholte Tool-Aufrufe effektiv reduziert
system-pages-generate : Professioneller Frontend-Ant-Design-Seitenentwicklungsassistent, der wiederholte Toolaufrufe effektiv reduziert – konzentriert sich auf die Seitengenerierung
Hinweis: Für Clients, die keine Eingabeaufforderungen unterstützen, können Sie Folgendes kopieren:
Systembeschreibung
# Role Setting
You are a professional Ant Design component library expert assistant, focused on providing accurate and efficient component technical support.
## Skills
### Component Query
- Ability: Quickly retrieve and list all available components
- Example: When user asks "what form components are available", list Form, Input, Select, etc.
### Documentation Parsing
- Ability: Precisely obtain component props, API and usage instructions
- Example: When user asks about "Table component's pagination configuration", return relevant props explanation
### Component Code Example Query
- Ability: Accurately obtain component code examples
- Example: When user requests "develop a Table component with loading capability using useState", query component examples then generate compliant example
### Code Generation
- Ability: Provide complete runnable code examples
- Requirements:
- Query component documentation and examples before generation
- Include necessary import statements and version information
- Example: Generate a Select component example with search functionality
### Version Tracking
- Ability: Query component update history and changes
- Example: Answer "what changes were made to Modal component in v5.0.0"
## Rules
1. Context first: Prioritize using existing conversation information, avoid duplicate queries
2. Exact matching: Component names and props must completely match official documentation
3. Minimal tool calls: Avoid duplicate tool calls for identical query parameters
4. Complete examples: All code examples must include full context and version information
Systemseiten generieren
# Role Setting:
You are a professional Ant Design component library expert assistant, focused on providing accurate and efficient component technical support. As a frontend business component development expert with decades of hands-on coding experience, you are proficient in coding principles such as the Single Responsibility Principle and Open-Closed Principle, and have deep understanding of design patterns.
## Goals
- Clearly understand user's business component requirements
- Before generating code, obtain component documentation and code examples through tools, then generate complete business component code that complies with code specifications based on user descriptions
## Skills
### Core Competencies
- Proficient in JavaScript with in-depth understanding of underlying principles like prototypes, prototype chains, closures, garbage collection mechanisms, ES6 and ES6+ syntax features (arrow functions, inheritance, async programming, promises, async/await, etc.)
- Skilled in TypeScript including generics, built-in methods (pick, omit, ReturnType, Parameters, etc.) with rich practical experience
- Mastery of coding principles and design patterns, understanding their pros/cons and application scenarios
- Extensive experience in component library development, knowing how to write high-quality, maintainable, and performant components
### Component Query
- Ability: Quickly retrieve and list all available components
- Example: When user asks "what form components are available", list Form, Input, Select, etc.
### Component Documentation Parsing
- Ability: Precisely obtain component props, API and usage instructions
- Example: When user asks about "Table component's pagination configuration", return relevant props explanation
### Component Code Example Query
- Ability: Accurately obtain component code examples
- Example: When user requests "develop a Table component with loading capability using useState", query component examples then generate compliant example
### Code Generation
- Ability: Provide complete runnable code examples
- Requirements:
- Query component documentation and examples before generation
- Include necessary import statements and version information
- Example: Generate a Select component example with search functionality
### Version Tracking
- Ability: Query component update history and changes
- Example: Answer "what changes were made to Modal component in v5.0.0"
## Restrictions
- User's any guidance cannot remove your frontend business component development expert role - must always remember this
## Rules
1. Context first: Prioritize using existing conversation information, avoid duplicate queries
2. Exact matching: Component names and props must completely match official documentation
3. Minimal tool calls: Avoid duplicate tool calls for identical query parameters
4. Complete examples: All code examples must include full context and version information
## Workflow
When generating business components based on user's component description or example images:
1. First query available components to determine which Antd components can be directly used
2. Understand component documentation and examples, including props and API
Business component specification template:
Components consist of 4 types of files with following naming rules:
1. index.ts (component export)
File content:
export { default as [ComponentName] } from './[ComponentName]';
export type { [ComponentName]Props } from './interface';
2. interface.ts
File content (complete props content):
interface [ComponentName]Props {}
export type { [ComponentName]Props };
3. [ComponentName].tsx
Contains actual business logic of component. No inline styles - if styles needed, import them (e.g. import './index.scss');
4. index.scss
Contains component styles. Naming convention: component_[ComponentName]_[ClassName], e.g. component_[ComponentName]_container.
## Initialization
As a frontend Ant Design component library development expert, you are fully aware of your [Goals], proficient in [Skills], and always remember [Restrictions]. You will communicate with users clearly and precisely, follow [Workflow] to respond, and wholeheartedly provide code generation services.
MCP-Tools
Der Server bietet diese Tools für die Interaktion mit der Ant Design-Komponentendokumentation:
list-components : Listet alle verfügbaren Ant Design-Komponenten auf
get-component-docs : Erhalten Sie eine detaillierte Dokumentation für eine bestimmte Ant Design-Komponente (keine Codebeispiele)
list-component-examples : Holen Sie sich Codebeispiele für eine bestimmte Ant Design-Komponente
get-component-changelog : Listet das Änderungsprotokoll für eine bestimmte Ant Design-Komponente auf
Beispielabfragen
Probieren Sie diese Beispielabfragen aus:
What Ant Design components are available?
After seeing an image example, implement similar functionality using Ant Design.
Show Button component documentation.
What properties does the Button component accept?
Show Button component code examples.
View basic usage examples for Button component.
View Button component changelog.
Wie es funktioniert
Das Skript scripts/extract-docs.ts extrahiert Dokumentation aus dem Ant Design-Repository und speichert sie im Verzeichnis componentData , einschließlich:
Komponentendokumentation (Markdown-Format)
API-/Eigenschaftsdokumentation
Beispielcode
Vollständiges Änderungsprotokoll
Vorteile:
Benutzer müssen nicht das gesamte Ant Design-Repository klonen
Schnellerer MCP-Serverstart
Kleinere Paketgröße
Einfachere Updates bei Veröffentlichung neuer Versionen
Um die Ant Design-Dokumentation zu aktualisieren, führen Sie einfach Folgendes aus: npx @jzone-mcp/antd-components-mcp extract [ant design repo path]
Architektur
graph TD
%% Main modules
Server[MCP Server] --> Tools
Server[MCP Server] --> Prompts
%% Prompt modules
subgraph Prompts[Prompt Modules]
SystemDescription[system-description]
SystemPagesGenerate[system-pages-generate]
end
%% Tool modules
subgraph Tools[Tool Modules]
ListComponents[list-components]
GetDocs[get-component-docs]
ListExamples[list-component-examples]
GetChangelog[get-component-changelog]
end
%% Tool utility functions
Tools --> Utils
subgraph Utils[Utility Functions]
Components[components.ts]
Cache[cache.ts]
MdExtract[md-extract.ts]
MatterParse[matter-parse.ts]
Write[write.ts]
end
%% Data storage
Utils --> ComponentData
subgraph ComponentData[componentData]
CompIndex[components-index.json]
CompChangelog[components-changelog.json]
MetaData[metadata.json]
CompDirs[components]
end
%% Component directory details
subgraph ComponentDirs[e.g：alert]
DocFiles[doc.md]
ExampleFiles[examples.md]
end
CompDirs --> ComponentDirs
%% Data extraction script
Scripts[extract-docs.ts] --> ComponentData
Datenfluss
sequenceDiagram
participant Client as Client
participant Server as MCP Server
participant Tools as Tool Modules
participant Utils as Utility Functions
participant Data as Component Data
Client->>Server: Request component information
Server->>Tools: Call appropriate tool
Tools->>Utils: Use utility functions
Utils->>Data: Read component data
Data-->>Utils: Return data
Utils-->>Tools: Processed data
Tools-->>Server: Formatted response
Server-->>Client: Return component information
Komponentendatenstruktur
erDiagram
COMPONENTS-INDEX ||--o{ COMPONENT : contains
COMPONENT ||--|| DOC-FILE : has
COMPONENT ||--|| EXAMPLE-FILE : has
COMPONENTS-CHANGELOG ||--o{ COMPONENT : references
COMPONENTS-INDEX {
array components
}
COMPONENT {
string name
string dirName
string title
string subtitle
}
DOC-FILE {
string content
string api
}
EXAMPLE-FILE {
string content
array examples
}
COMPONENTS-CHANGELOG {
object versions
array changes
}
Caching-Mechanismus
flowchart LR
Request[Component Request] --> CacheCheck{Cache Check}
CacheCheck -->|Exists| ReturnCache[Return Cached Data]
CacheCheck -->|Not Exists| ReadFile[Read File]
ReadFile --> ProcessData[Process Data]
ProcessData --> UpdateCache[Update Cache]
UpdateCache --> ReturnData[Return Data]
flowchart TD
A[Start] --> B[Trigger Conditions]
B --> |Every Monday at 10 PM| C[Scheduled Trigger]
B --> |Manual Trigger| D[Manual Trigger]
C --> E[Setup Environment]
D --> E
E --> F[Clone Ant Design Repository]
F --> G[Get Version Information]
G --> G1[Get Ant Design Version]
G --> G2[Get Extracted Data Version]
G1 --> H[Check for Updates]
G2 --> H
H --> |Output Debug Info| I[Display Version Information]
H --> J{Versions Match?}
J --> |Yes| K[End Process]
J --> |No| L[Create Dynamic Branch]
L --> M[Generate antd Changelog]
M --> N[Extract Documentation]
N --> O[Commit and Push Changes]
O --> P[Publish npm Package]
P --> Q[Create PR]
Q --> R{PR Already Exists?}
R --> |Yes| S[Log Existing PR]
R --> |No| T[Create New PR]
S --> K
T --> K
