vueuse-mcp

VueUse MCP

AI コーディングエージェントが VueUse のドキュメントにすぐアクセスできる MCP サーバーです。コンポーザブルの検索、ドキュメントの閲覧、提案の取得ができます。

コーディング時の動作

これは MCP（Model Context Protocol） サーバーです。Claude Code などの AI コーディングエージェントに接続すると、エージェントはコード作成を支援する際に VueUse のドキュメントを自動で参照できます。

たとえば、「Vue でマウスの位置を追跡する方法を教えて」と尋ねると、エージェントは次の処理を行います。

1. search_composables または suggest_composable を呼び出して、関連するコンポーザブルを検索します
2. get_composable_docs を呼び出して、useMouse のドキュメント全体を読み込みます
3. API、オプション、型を正しく使ってコードを作成します。自分で調べる必要はありません

ツールを手動で呼び出す必要はありません。質問に応じて、エージェントが使用するタイミングを判断します。

クイックスタート

Claude Code

claude mcp add vueuse-mcp -- npx vueuse-mcp

Codex CLI

MCP 設定に追加します。

{
  "servers": {
    "vueuse": {
      "command": "npx",
      "args": ["vueuse-mcp"]
    }
  }
}

OpenCode

opencode.json に追加します。

{
  "mcp": {
    "vueuse": {
      "command": "npx",
      "args": ["vueuse-mcp"]
    }
  }
}

利用可能なツール

ツール	説明
search_composables	名前、キーワード、または概念で検索します。説明付きのランキング結果を返します。
get_composable_docs	コンポーザブルのドキュメント全体を取得します。シグネチャ、型、オプション、例、関連関数が含まれます。
suggest_composable	ユースケースを自然言語で説明すると、トレードオフ付きのランキング提案を取得できます。
list_categories	コンポーザブル数とともに、すべてのカテゴリを一覧表示します。パッケージで絞り込むこともできます。

データを最新の状態に保つ

コンポーザブルのデータは VueUse GitHub リポジトリからスクレイピングされます。更新するには、次のコマンドを実行します。

npm run scrape && npm run build

スクレイピング中のレート制限を避けるには、GITHUB_TOKEN 環境変数を設定します。.env.example を参照してください。

開発

git clone https://github.com/kovoor/vueuse-mcp.git
cd vueuse-mcp
npm install
npm run scrape    # fetch composable data from GitHub
npm run build     # compile TypeScript
npm start         # run the server

コントリビューション

ツールの追加、スクレイピングパイプラインの更新、PR の提出方法については、CONTRIBUTING.md を参照してください。