Antd Components MCP

🚀 Project Structure

This project presents a well - organized structure for managing Ant Design components, with a caching mechanism for efficiency and a document extraction and publishing mechanism to keep the documentation up - to - date.

🚀 Quick Start

The project mainly consists of component directories, metadata files, and configuration files. You can start the project by running the following commands in the package.json scripts:

npm start

📦 Installation

To install the project dependencies, run the following command:

npm install

💻 Usage Examples

Basic Usage of Components

Here are some basic usage examples of components:

<Alert message="操作成功" type="success" />
<Alert message="注意事项" type="warning" />

API Usage

The Alert component has the following API:

📚 Documentation

Directory Structure

.
├── components          # Component data directory
│   ├── alert         # Example component directory
│   │   └── doc.md    # Component documentation file
│   └── examples.json  # Component example file
├── metadata.json       # Metadata file
└── package.json        # npm package configuration file

Main File Descriptions

package.json

{
  "name": "@jzone-mcp/antd-components",
  "version": "1.0.0",
  "description": "Ant Design Components Monitoring Platform",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "extract": "./bin/extract-docs.js"
  },
  "dependencies": {
    "@jzone-mcp/utils": "^1.0.0",
    "express": "^4.18.2"
  }
}

components/components-index.json

[
  {
    "name": "alert",
    "dirName": "alert",
    "title": "Alert 提示框",
    "subtitle": "用于重要信息的提示"
  },
  {
    "name": "button",
    "dirName": "button",
    "title": "Button 按钮",
    "subtitle": "页面中的按钮元素"
  }
]

components/alert/doc.md

## Alert 提示框

### Description
The Alert component is used to display important information prompts on the page, supporting four types: success, warning, error, and info.

### Usage
```javascript
<Alert message="内容" type="success|warning|error|info" />

API

Example Code

<Alert message="操作成功" type="success" />
<Alert message="注意事项" type="warning" />

## 🔧 Technical Details

### Caching Mechanism
To improve the system's response speed and efficiency, MCP adopts a caching mechanism. When requesting component information, the system first checks if the data exists in the cache. If it does, the cached data is directly returned; otherwise, the data is read from the data source and updated in the cache.

```mermaid
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]

Document Extraction and Publishing Mechanism

To keep the documentation up - to - date, MCP provides functions for periodic and manual document extraction and publishing. By default, the system automatically executes this process every Monday at 10 PM.

flowchart TD
    A[Start] --> B[Trigger Condition]
    B --> |Every Monday at 10 PM| C[Automatic Trigger]
    B --> |Manual Trigger| D[Manual Trigger]

    C --> E[Set Environment Variables]
    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 Information| I[Display Version Information]

    H --> J{Are Versions Consistent?}
    J --> |Yes| K[End Process]
    J --> |No| L[Create Dynamic Branch]

    L --> M[Generate Ant Design Change Log]
    M --> N[Extract Document Data]
    N --> O[Commit and Push Changes]

    O --> P[Publish npm Package]
    P --> Q[Create PR]

    Q --> R{Is There an Existing PR?}
    R --> |Yes| S[Record Existing PR]
    R --> |No| T[Create New PR]

    S --> K
    T --> K

Through the above mechanisms, MCP ensures the real - time and accuracy of component information.