Antdv MCP

🚀 Ant Design Vue MCP

Ant Design Vueのドキュメント用のモデルコンテキストプロトコル（MCP）サーバーで、インデクサCLI付きです。このプロジェクトは、MCPツールを通じてAnt Design Vueコンポーネントドキュメント（v3とv4）への構造化されたアクセスを提供し、AIアシスタントがコンポーネントAPIを照会し、ドキュメントを検索し、正確な情報を提供できるようにします。

日本語ドキュメント: README.zh-CN.md

✨ 主な機能

• 📚 ドキュメントインデクサ: Ant Design Vue v3とv4のドキュメントをクロールし、インデックスを作成します。
• 🔍 全文検索: SQLite FTS5を使用したページとAPIアイテム全体の検索機能。
• 🛠️ MCPツール: VS Codeを通じてプログラムでコンポーネントAPIを照会できます。
• 📊 構造化APIデータ: Props、イベント、スロット、メソッドをクエリ可能なデータベースに抽出します。
• 🏷️ 正規化されたコンポーネント名: コンポーネントタグ（例: a-button）を正規識別子として使用します。

📦 インストール

# 依存関係のインストール
pnpm install

# すべてのパッケージをビルド
pnpm build

💻 使用例

1. ドキュメントのインデックス作成

MCPサーバーを使用する前に、Ant Design Vueのドキュメントをインデックスする必要があります。

# v3ドキュメントのインデックス作成
pnpm index:v3

# v4ドキュメントのインデックス作成
pnpm index:v4

# v3とv4の両方のインデックス作成
pnpm index:all

インデクサは以下のことを行います。

1. すべてのコンポーネントドキュメントページを見つけます。
2. 各ページを取得して解析します。
3. コンポーネントのメタデータとAPIテーブルを抽出します。
4. すべてを./data/antdv.sqliteのSQLiteデータベースに保存します。

注意: データベースファイルはgitignoredされており、ローカルで生成する必要があります。

2. VS Code MCPの設定

VS Codeの設定にMCPサーバーを追加します。~/.config/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.jsonを作成または編集します。

{
  "mcpServers": {
    "antdv": {
      "command": "node",
      "args": [
        "/absolute/path/to/antdv-mcp/packages/mcp-server/dist/index.js"
      ],
      "env": {
        "ANTDV_DB_PATH": "/absolute/path/to/antdv-mcp/data/antdv.sqlite"
      }
    }
  }
}

重要: サーバースクリプトとデータベースファイルの両方に絶対パスを使用してください。

3. 利用可能なMCPツール

設定が完了すると、VS Codeで以下のツールが利用可能になります。

adv_search_docs

全文検索でドキュメントを検索します。

{
  query: string,           // 検索クエリ
  version?: 'v3' | 'v4' | 'all',  // デフォルト: 'all'
  limit?: number          // デフォルト: 10
}

例: ボタンのサイズ情報を検索

{
  "query": "button size",
  "version": "v4",
  "limit": 5
}

adv_list_components

指定したバージョンのすべての利用可能なコンポーネントをリストします。

{
  version: 'v3' | 'v4'
}

例: v4のすべてのコンポーネントをリスト

{
  "version": "v4"
}

adv_get_component_api

コンポーネントの構造化されたAPIドキュメントを取得します。

{
  component: string,      // コンポーネント名 (例: "a-button", "button", "Button")
  version: 'v3' | 'v4'
}

例: v4のボタンAPIを取得

{
  "component": "button",
  "version": "v4"
}

返り値:

{
  component: Component,
  props: ApiItem[],
  events: ApiItem[],
  slots: ApiItem[],
  methods: ApiItem[]
}

adv_find_prop

特定のプロパティまたはAPIアイテムを検索し、似た名前の提案を表示します。

{
  component: string,
  prop: string,
  version: 'v3' | 'v4'
}

例: ボタンの "type" プロパティを検索

{
  "component": "a-button",
  "prop": "type",
  "version": "v4"
}

コンポーネント名の解決

システムはコンポーネントタグ（例: a-button）を正規識別子として使用します。以下の方法でクエリを行うことができます。

• 正規タグ: a-button
• 接頭辞なし: button
• パスカルケース: Button
• 中国語のタイトル: エイリアスを介して一致させます。

すべての出力は正規タグ形式で表示されます。

プロジェクト構造

antdv-mcp/
├── packages/
│   ├── shared/          # 共有タイプとユーティリティ
│   ├── indexer/         # ドキュメントクローラーとインデクサ
│   └── mcp-server/      # MCPサーバーの実装
├── data/                # SQLiteデータベース (gitignored, 生成済み)
├── package.json         # ワークスペーススクリプト付きのルートパッケージ
└── pnpm-workspace.yaml  # pnpmワークスペースの設定

データベーススキーマ

テーブル

• pages: FTS付きの完全なページコンテンツ
• components: コンポーネントのメタデータとエイリアス
• api_items: APIドキュメント（props/イベント/スロット/メソッド）

全文検索

• pages_fts: ページコンテンツのFTS5インデックス
• api_items_fts: API説明のFTS5インデックス

開発

ビルド

# すべてのパッケージをビルド
pnpm build

# 特定のパッケージをビルド
pnpm --filter @antdv-mcp/indexer build

テスト

# すべてのテストを実行
pnpm test

# 特定のパッケージのテストを実行
pnpm --filter @antdv-mcp/indexer test

リント

# すべてのパッケージをリント
pnpm lint

# コードを整形
pnpm format

仕組み

インデックス作成プロセス

1. 探索: 概要ページをクロールして、すべてのコンポーネントドキュメントのURLを見つけます。
2. 取得: 各コンポーネントページをレート制限付きでダウンロードします。
3. 変更検出: SHA-256ハッシュを使用して、変更されていないページをスキップします。
4. 解析: Cheerioを使用してコンポーネントのメタデータとAPIテーブルを抽出します。
5. 正規化: テーブルヘッダーを標準化し、列挙値を抽出します。
6. 保存: 構造化データを全文検索付きでSQLiteに保存します。

MCPサーバー

• stdioベースのMCPサーバーとして実行されます。
• SQLiteデータベースから読み取ります（読み取り専用）。
• ドキュメントクエリ用のツールを公開します。
• 構造化されたJSONレスポンスを返します。

トラブルシューティング

データベースが見つからない場合

まずインデクサを実行してください。

pnpm index:all

MCPサーバーがVS Codeに表示されない場合

• cline_mcp_settings.json のパスが絶対パスであることを確認してください。
• サーバーがビルドされていることを確認してください: pnpm build
• VS Codeを再起動してください。

APIアイテムが見つからない場合

一部のコンポーネントは非標準のテーブル形式を持っている場合があります。パーサーは一般的なケースを処理しますが、エッジケースを見逃す可能性があります。

📄 ライセンス

MIT

コントリビューション

これは汎用的なドキュメントインデクサとMCPサーバーであり、公式のAnt Design Vueツールではありません。コントリビューションは大歓迎です！