BrowserTools MCP Server

BrowserTools MCP Server とは？

BrowserTools MCP Server は AgentDeskAI が提供するブラウザ MCP（browser MCP）サーバーで、ログイン済みの実際の Chrome セッションからコンソールログ、ネットワークリクエスト、スクリーンショット、Lighthouse 監査の結果を Cursor、Claude Code、Windsurf などの AI コーディングエージェントに届けます。

別の自動化ブラウザを起動するのではなく Chrome DevTools 拡張機能を通じて動作するため、エージェントはあなたがデバッグしているのと同じページを、既存のログイン状態のまま参照できます。バージョン 2.0（npm パッケージ @agentdeskai/browser-tools-mcp、執筆時点で 2.0.2）は全面的な書き直しで、3 つのプロセスが 1 つになり、コネクタはループバック限定かつ認証付きとなり、認証情報のマスキングも行われます。プロジェクトは MIT ライセンスのオープンソースです。

BrowserTools MCP Server の使い方

セットアップは 2 つの要素からなります。MCP サーバー（npx コマンド 1 つ）と Chrome 拡張機能です。

前提条件： Node.js 22.19 以降（node --version で確認。nvm や asdf を使っている場合は、エディタが同じバージョンを引き継ぐようにしてください）と、Google Chrome または他の Chromium 系ブラウザ。API キーは不要です。

1. クライアントに MCP サーバーを追加する

README に記載されている設定です。標準的な mcpServers ブロックを受け付けるクライアントであれば使えます。

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["-y", "@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

Windows でクライアントが npx を見つけられない場合は、"command": "cmd" と "args": ["/c", "npx", "-y", "@agentdeskai/browser-tools-mcp@latest"] を使います。

2. Chrome 拡張機能を読み込む

1. browser-tools-mcp リポジトリをダウンロードまたはクローンします。
2. chrome://extensions を開き、Developer mode（デベロッパー モード）をオンにします。
3. Load unpacked（パッケージ化されていない拡張機能を読み込む）を選び、chrome-extension ディレクトリを指定します。

2 つ目のサーバーを起動する必要はありません。2.0 では MCP サーバー自身がコネクタを実行します。

3. DevTools を開いてエージェントに依頼する

調べたいページで Chrome DevTools（F12）を開きます。DevTools を開いた時点でキャプチャが始まり、BrowserTools パネルは設定とステータス表示のためだけに使います。あとは「check the console for errors」（コンソールのエラーを確認して）のように依頼します。

Claude Code

Claude Code CLI で同じコマンドを登録します。

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

Cursor

上記の JSON ブロックを Cursor の MCP 設定（プロジェクト単位なら .cursor/mcp.json、グローバルなら ~/.cursor/mcp.json）に追加し、Cursor を再読み込みします。

Windsurf

同じ mcpServers ブロックを Windsurf の MCP 設定に追加し、サーバー一覧を更新します。

BrowserTools MCP Server の主な機能

• 実際のセッションで動作： DevTools 拡張機能経由で接続するため、ログイン状態のまま、開いていたページで作業を続けられます。README によると、Chrome 136 以降はデフォルトプロファイルへのリモートデバッグが拒否されるため、CDP ベースのサーバーは新しいプロファイルを使います。
• コンソールとネットワークのキャプチャ： コンソール出力、未捕捉の例外、ステータス・所要時間・本文を含む XHR/fetch リクエスト。
• スクリーンショットを画像として返却し、保存先パスも返します。バイト上限（デフォルト 3 MB）があり、モデルのコンテキストに収まるようにします。
• Lighthouse 監査： アクセシビリティ、パフォーマンス（Core Web Vitals を含む）、SEO、ベストプラクティス。
• 複数タブ対応： DevTools を開いた各タブを個別に追跡し、すべての結果に取得元の tabId と url が付きます。
• コンテキストに優しい出力： limit/offset によるページング、キーワードフィルタ、構造化された出力スキーマ、大きなデータ向けの MCP リソース（HAR 1.2 エクスポートを含む）。
• プライバシー重視の初期設定： ループバック限定のコネクタ、実行ごとの認証トークン、Authorization/Cookie ヘッダー・JWT・クラウドキーのマスキング。
• 設定可能： --port（デフォルト 3025）、--screenshot-dir、--only、--exclude、--doctor などのフラグ、または対応する BROWSER_TOOLS_* 環境変数。

BrowserTools MCP Server のツール

これらの browser tools MCP ツールは 4 つのグループに分かれます。

• コンソールログ： getConsoleLogs と getConsoleErrors はコンソール出力とエラーを返し、keywords、limit、offset で絞り込めます。
• ネットワーク： getNetworkLogs と getNetworkErrors はリクエスト全体、または失敗したものと 4xx/5xx のみを返し、urlKeywords と bodyKeywords で絞り込めます。
• ページとブラウザの状態： getSelectedElement（Elements パネルで選択中の要素）、getPageInfo、getConnectionStatus、listBrowserTabs、takeScreenshot、refreshBrowser、getBrowserStorage（localStorage、sessionStorage、Cookie。値は明示的に要求しない限り返しません）、wipeLogs。
• 監査： runAccessibilityAudit、runPerformanceAudit、runSEOAudit、runBestPracticesAudit は別のヘッドレスブラウザで Lighthouse を実行します。

さらに 3 つの MCP プロンプト debuggerMode、auditMode、nextjsSeoAudit が、エージェントに段階的なデバッグや監査の手順を提供します。1.x ではこれらはツールでした。

BrowserTools MCP Server のユースケース

• コピー＆ペーストなしでフロントエンドのエラーをデバッグ： 「このページのコンソールエラーを確認して、エラーを投げているコンポーネントを修正して」
• 失敗している API 呼び出しの調査： 「/api/ リクエストのネットワークエラーを表示して、POST が 500 を返す理由を説明して」
• コーディング中のアクセシビリティチェック： 「このページでアクセシビリティ監査を実行して、重大な問題を修正して」
• パフォーマンスと SEO のレビュー： 「パフォーマンス監査を実行して、Core Web Vitals を悪化させている原因を教えて」。Next.js アプリでは nextjsSeoAudit プロンプトも使えます。
• ログイン後のページの見た目を確認： 「現在のタブのスクリーンショットを撮って、CSS を変更した後にレイアウトが崩れていないか確認して」

BrowserTools MCP Server と代替ツールの比較

• Playwright MCP、Puppeteer MCP Server、Chrome DevTools MCP： これらは新しい自動化ブラウザを操作するため、テスト作成やスクリプトによる自動化に向いています。BrowserTools は普段使っているブラウザを観察し、Lighthouse 監査も提供しますが、クリックやフォーム入力は行いません。
• Browser MCP（browsermcp.io）： 名前は似ていますが別のプロジェクトです。こちらも MCP サーバーと Chrome 拡張機能の組み合わせで既存のブラウザプロファイルを使いますが、ブラウザの自動操作を目的としており（Playwright MCP を元にしています）、BrowserTools はデバッグ用のデータ取得と監査に特化しています。「browser mcp」で検索し、エージェントにページを操作させたい場合は Browser MCP か Playwright MCP のほうが適しています。

BrowserTools MCP Server のトラブルシューティング

• 何もキャプチャされない： npx @agentdeskai/browser-tools-mcp --doctor を実行します。Node のバージョン、コネクタが起動したか、拡張機能が接続されているか、スクリーンショットのディレクトリに書き込めるかを報告します。
• インストール時に engines エラーが出る： 2.0 は engines で Node 22.19 以降を宣言しているため、古い Node ではインストール時に失敗します。Node を更新し、エディタがそのバージョンを引き継ぐようにしてください。
• ページ読み込み時のリクエストが記録されていない： ネットワークのキャプチャは DevTools を開いた時点から始まります。ページを再読み込みすると読み込み全体を記録できます。
• 「started debugging this browser」バナーが表示される： コンソールのキャプチャはデフォルトで DevTools プロトコルを使います。パネルのキャプチャモードを Wrap page console に切り替えてください。
• 1.x からのアップグレード： 古い拡張機能を削除して新しい chrome-extension ディレクトリを読み込み直し、browser-tools-server を別途起動する手順を削除します。詳しくはリポジトリの MIGRATION.md を参照してください。