Antd Components MCP

🚀 プロジェクト構造

このプロジェクトは、Ant Design コンポーネントを管理するためのシステムで、コンポーネントのメタデータ管理、キャッシュ機構、ドキュメントの抽出と公開機構を備えています。

📦 ディレクトリ構造

.
├── components          # コンポーネントデータディレクトリ
│   ├── alert         # サンプルコンポーネントディレクトリ
│   │   └── doc.md    # コンポーネントドキュメントファイル
│   └── examples.json  # コンポーネントサンプルファイル
├── metadata.json       # メタデータファイル
└── package.json        # npm パッケージ構成ファイル

📄 主要ファイル説明

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 提示框

### 説明
Alert コンポーネントは、ページ内で重要な情報を表示するために使用され、成功、警告、エラー、情報の4種類のタイプをサポートしています。

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

API

サンプルコード

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

## 🔄 キャッシュ機構

システムの応答速度と効率を向上させるために、MCP はキャッシュ機構を採用しています。コンポーネント情報を要求するたびに、システムはまずキャッシュに該当データが存在するかを確認します。存在する場合は、キャッシュ内のデータを直接返します。存在しない場合は、データソースからデータを読み取り、キャッシュを更新します。

具体的な流れは以下の通りです。

```mermaid
flowchart LR
    Request[コンポーネント要求] --> CacheCheck{キャッシュチェック}
    CacheCheck -->|存在| ReturnCache[キャッシュデータを返す]
    CacheCheck -->|存在しない| ReadFile[ファイルを読み取る]
    ReadFile --> ProcessData[データを処理する]
    ProcessData --> UpdateCache[キャッシュを更新する]
    UpdateCache --> ReturnData[データを返す]

📃 ドキュメント抽出と公開機構

ドキュメントの最新性を維持するために、MCP は定期的および手動でドキュメントの抽出と公開をトリガーする機能を提供しています。デフォルトでは、システムは毎週月曜日の夜10時に自動的にこのプロセスを実行します。

具体的な流れは以下の通りです。

flowchart TD
    A[開始] --> B[トリガー条件]
    B --> |毎週月曜日の夜10時| C[自動トリガー]
    B --> |手動トリガー| D[手動トリガー]

    C --> E[環境変数を設定する]
    D --> E
    E --> F[Ant Design リポジトリをクローンする]
    F --> G[バージョン情報を取得する]

    G --> G1[Ant Design バージョンを取得する]
    G --> G2[抽出済みデータのバージョンを取得する]

    G1 --> H[更新を確認する]
    G2 --> H

    H --> |デバッグ情報を出力する| I[バージョン情報を表示する]

    H --> J{バージョンが一致するか？}
    J --> |はい| K[プロセスを終了する]
    J --> |いいえ| L[動的ブランチを作成する]

    L --> M[Ant Design 変更ログを生成する]
    M --> N[ドキュメントデータを抽出する]
    N --> O[変更をコミットしてプッシュする]

    O --> P[npm パッケージを公開する]
    P --> Q[PR を作成する]

    Q --> R{既存の PR があるか？}
    R --> |はい| S[既存の PR を記録する]
    R --> |いいえ| T[新しい PR を作成する]

    S --> K
    T --> K

上記の機構により、MCP はコンポーネント情報のリアルタイム性と正確性を保証しています。