CodingBaby-Browser-MCP

CodingBaby-Browser-MCP

概要

CodingBaby-Browser-MCP は、Claude 3.7 Sonnet in Cursor のような AI アシスタントが Chrome ブラウザを制御して自動化タスクを実行できるようにする強力なツールです。このツールは、WebSocket ベースの通信プロトコルを通じて AI とウェブブラウザのインタラクションのギャップを埋めます。

機能

• ブラウザオートメーション: Chrome ブラウザをプログラムで制御してウェブサイトを閲覧し、フォームに入力し、クリック操作を実行します
• スクリーンショットキャプチャ: ページ全体または特定の領域のスクリーンショットを取得します
• マルチタブサポート: ブラウザタブを作成、一覧表示、選択、閉じます
• フォームインタラクション: テキストを入力し、キーを押し、フォーム要素を選択します
• バッチコマンド: 複数のブラウザ操作を順序立てて実行します
• ビューポート制御: レスポンシブテスト用にブラウザウィンドウサイズを調整します

アーキテクチャ

このプロジェクトは 2 つの主要コンポーネントで構成されています。

1. MCP サーバーツール: Cursor の AI アシスタントと通信するために Model Context Protocol（MCP）を実装する Node.js サーバーです
2. Chrome 拡張機能: MCP サーバーからコマンドを受け取り、ブラウザを制御するブラウザ拡張機能です

このシステムは WebSocket（デフォルトではポート 9876）を使用して、MCP サーバーと Chrome 拡張機能の間に双方向通信チャネルを確立します。

インストール

前提条件

• Node.js（v14 以上）
• Chrome ブラウザ
• Claude 3.7 Sonnet を備えた Cursor エディター

MCP ツールセットアップ

1. Cursor で Settings → MCP に移動します
2. 以下の設定で新しいグローバル MCP サーバーを追加します:

{
  "mcpServers": {
    "CodingBaby-Browser-MCP": {
      "command": "npx",
      "args": ["@sydneyassistent/codingbaby-browser-mcp"]
    }
  }
}

Chrome 拡張機能セットアップ

1. Chrome ウェブストアから CodingBaby 拡張機能をインストールします
2. 拡張機能を有効にし、必要なパーミッションがあることを確認します

使用方法

インストール後、Cursor の Claude 3.7 にブラウザを制御するよう指示できます:

Use the browser to navigate to https://example.com

利用可能なコマンド

• navigate: ブラウザで URL を開きます
• click: 要素をクリックします
• type: フォームフィールドにテキストを入力します
• pressKey: キーボード操作をシミュレートします
• scroll: 任意の方向にスクロールします
• takeScreenshot: ブラウザコンテンツをキャプチャします
• wait: 指定時間実行を一時停止します
• setViewport: ブラウザウィンドウの寸法を変更します
• tabNew、tabList、tabSelect、tabClose: タブ管理
• batch: 複数のコマンドを順序立てて実行します
• close: ブラウザセッションを閉じます

開発とデバッグ

ソースコードをダウンロードした場合、開発およびデバッグの目的でプロジェクトをセットアップできます。

Chrome 拡張機能のデバッグ

ソースコードから Chrome 拡張機能を読み込んでデバッグするには:

1. Chrome を開いて chrome://extensions/ に移動します
2. 右上隅のスイッチを切り替えることで「デベロッパーモード」を有効にします
3. 「拡張機能を読み込む」ボタンをクリックします
4. プロジェクトの chrome-extension ディレクトリに移動してそれを選択します
5. 拡張機能がデベロッパーモードで読み込まれます
6. 拡張機能アイコンを右クリックして「検査」を選択し、Console タブを開くことでコンソールログを表示できます
7. 拡張機能コードを変更し、拡張機能カード上のリフレッシュアイコンをクリックして変更を適用します

Cursor での MCP サーバーのデバッグ

ローカル MCP サーバーコードをデバッグに使用するには:

1. リポジトリをローカルマシンにクローンまたはダウンロードします
2. プロジェクトディレクトリに移動して依存関係をインストールします:

   cd Browser-MCP
   npm install
   

3. Cursor で Settings → MCP に移動します
4. 以下の設定で新しい MCP サーバーを追加します:

   {
     "mcpServers": {
       "CodingBaby-Browser-MCP-Dev": {
         "command": "node",
         "args": ["/absolute/path/to/your/Browser-MCP/index.js"]
       }
     }
   }
   

   /absolute/path/to/your/ をダウンロードしたプロジェクトへの実際のパスに置き換えます
5. 「Refresh」をクリックして MCP サーバーを読み込みます
6. これで MCP サーバーコードに変更を加え、Cursor の MCP 設定で「Refresh」をクリックしてサーバーを再起動できます

デバッグのために、以下を実行できます:

• MCP ステータスアイコンをクリックして Cursor MCP ログを確認します
• より詳細なログを記録するため、コードに console.error() ステートメントを追加します
• ターミナルから MCP サーバーを手動で実行して、完全なコンソール出力を取得します

トラブルシューティング

• ポート競合: ポート 9876 が既に使用されている場合、ツールは自動的にそれを解放しようとします
• 接続の問題: Chrome 拡張機能が正しくインストールされ、有効になっていることを確認します

ライセンス

MIT

リンク

• 公式ウェブサイト: www.codingbaby.fun
• NPM パッケージ: @sydneyassistent/codingbaby-browser-mcp
• Chrome 拡張機能: CodingBaby Extension