Mcp_usehooks

mcp-usehooks

usehooks.io の React フックに、書式設定オプションとキャッシュ機能を強化してアクセスするための Model Context Protocol（MCP）サーバーです。

機能

• usehooks.io リポジトリにあるすべてのフックにアクセス
• キーワードまたはカテゴリでフックを検索
• 実装コードを含む、特定のフックの詳細情報を取得
• コードスニペット付きの例を表示
• JSON または Markdown 形式で出力
• パフォーマンス向上のための効率的なキャッシュ
• 包括的なエラー処理

インストール

クイックインストール（推奨）

自動セットアップには、インストールスクリプトを使用します。

Linux/macOS：

curl -fsSL https://raw.githubusercontent.com/small-lab-io/usehooks.io/main/packages/usehooks-mcp/scripts/install.sh | bash

Windows： リポジトリから scripts/install.bat をダウンロードして実行します。

手動インストール

npm install -g mcp-usehooks

または、ローカルにインストールします。

npm install mcp-usehooks

使い方

サーバーの起動

グローバルにインストールした場合：

mcp-usehooks

ローカルにインストールした場合：

npx mcp-usehooks

または、リポジトリから直接実行します。

node mcp_usehooks_server.js

開発モード

ファイルの変更時に自動再起動する開発モードでは、次のコマンドを実行します。

npm run dev

IDE との連携

Claude Desktop

この MCP サーバーを Claude Desktop で使用するには：

1. パッケージをグローバルにインストールします：npm install -g mcp-usehooks
2. Claude Desktop で、Settings > MCP Servers に移動します
3. 次の設定で新しい MCP サーバーを追加します：
   • 名前：UseHooks
   • コマンド：mcp-usehooks

接続すると、Claude は MCP ツールを通じてフックを利用できるようになります。

VSCode および Windsurf IDE

VSCode、Windsurf IDE、その他の開発環境との連携に関する詳細な手順は、IDE Integration Guide を参照してください。

VSCode のクイックセットアップ：

1. グローバルにインストールします：npm install -g mcp-usehooks
2. Claude Desktop または Cline 拡張機能をインストールします
3. MCP サーバーの設定を追加します：

   {
     "usehooks": {
       "command": "mcp-usehooks",
       "args": []
     }
   }
   

Windsurf IDE のクイックセットアップ：

1. グローバルにインストールします：npm install -g mcp-usehooks
2. Settings → Extensions → MCP Servers に移動します
3. コマンド mcp-usehooks を指定して新しいサーバーを追加します

利用可能なツール

list_hooks

利用可能なすべての React フックを一覧表示します。カテゴリで絞り込むこともできます。

パラメーター：

• category（任意）：フックをカテゴリで絞り込みます（例：「state」、「browser」、「utility」）
• format（任意）：出力形式。「json」または「markdown」（デフォルト：「markdown」）

例：

{
  "server_name": "usehooks",
  "tool_name": "list_hooks",
  "args": {
    "category": "state",
    "format": "markdown"
  }
}

get_categories

利用可能なフックのカテゴリをすべて取得します。

パラメーター：

• with_counts（任意）：各カテゴリのフック数を含めます（デフォルト：false）

例：

{
  "server_name": "usehooks",
  "tool_name": "get_categories",
  "args": {
    "with_counts": true
  }
}

search_hooks

名前、タイトル、説明に含まれるキーワードでフックを検索します。

パラメーター：

• keyword：フックの名前、タイトル、説明から検索するキーワード
• category（任意）：検索結果をカテゴリで絞り込みます
• format（任意）：出力形式。「json」または「markdown」（デフォルト：「markdown」）

例：

{
  "server_name": "usehooks",
  "tool_name": "search_hooks",
  "args": {
    "keyword": "storage",
    "category": "browser",
    "format": "markdown"
  }
}

get_hook

実装コードと例を含む、特定のフックの詳細情報を取得します。

パラメーター：

• name：取得するフックの名前（例：「use-counter」、「use-local-storage」）
• format（任意）：出力形式。「json」または「markdown」（デフォルト：「markdown」）
• include_examples（任意）：サンプルコードのスニペットを含めます（デフォルト：true）

例：

{
  "server_name": "usehooks",
  "tool_name": "get_hook",
  "args": {
    "name": "use-counter",
    "format": "markdown",
    "include_examples": true
  }
}

機能の詳細

キャッシュ

サーバーは、パフォーマンスを向上させ API 呼び出しを減らすため、TTL（有効期間）を5分に設定した効率的なキャッシュ機構を実装しています。キャッシュには次の内容が含まれます。

• すべてのフックの一覧
• カテゴリ別に整理されたフック
• 個々のフックの詳細情報

Markdown 形式

すべてのツールは、AI アシスタントで使用した際に読みやすくなるよう、Markdown 形式での出力をサポートしています。Markdown 出力には次の内容が含まれます。

• 適切に書式設定された見出し
• 構文強調表示付きのコードブロック
• リストと説明
• コードスニペット付きの例

コントリビューション

コントリビューションを歓迎します。お気軽にプルリクエストを送信してください。

ライセンス

MIT