BrowserTools MCP

BrowserTools MCP

BrowserTools MCPは、AIエージェントと互換性のあるエディタが、Chrome拡張機能とローカルサーバーを使用してブラウザデータをキャプチャ、分析、監査できる高度なブラウザ監視および相互作用ツールです。これにより、言語モデルはブラウザの状態にリアルタイムでアクセスでき、エージェントはより文脈を意識できるようになり、自動化されたブラウザ監査やデバッグタスクを幅広く実行できます。データはすべてお使いのマシンに留まります。

Author: AgentDeskAI


プロトコルを表示

BrowserTools MCPとは？

BrowserTools MCPは、ブラウザとAIアプリケーションまたはエディタをつなぐシステムです。Chrome拡張機能、ローカルNodeJSサーバー、MCPサーバーを活用することで、言語モデルやコーディングエージェントにブラウザログ、DOM詳細、スクリーンショット、ネットワークリクエストへのアクセスを提供し、アクセシビリティ、パフォーマンス、SEO、ベストプラクティスの自動監査を実行できます。すべてお使いのマシンで動作し、プライバシーを守ります。

設定方法

  1. Chrome拡張機能をインストール: リリースページからBrowserTools MCP Chrome拡張機能をダウンロードし、ブラウザに追加します。
  2. MCPサーバーを設定: IDEまたはMCP互換のクライアントで、次のコマンドを実行します:
    npx @agentdeskai/browser-tools-mcp@latest
  3. ローカルNodeサーバーを実行: 別のターミナルを開き、次のコマンドを実行します:
    npx @agentdeskai/browser-tools-server@latest
  4. 拡張機能パネルを有効化: Chrome DevToolsを開き、BrowserToolsMCPパネルに移動して、アクティブになっていることを確認します。
  5. 接続を確認: DevToolsパネルのインスタンスが1つだけ開いていることを確認し、トラブルシューティングのためにブラウザとサーバーを再起動します。
  6. オプションを設定: 拡張機能のオプションを使用して、スクリーンショットフォルダ、トークン/切り捨て制限、およびプライバシーの設定を行います。

使用方法

  • 設定が完了し、すべてのコンポーネントが動作している状態で、MCP互換のエディタやエージェント（Cursorなど）を使用して、監査をトリガーしたり、ログやスクリーンショットをキャプチャしたり、ページ要素と対話します。
  • よくある使用例には、AIエージェントにアクセシビリティの監査を依頼したり、パフォーマンスを分析したり、SEOをレビューしたり、コードをデバッグしたりすることが含まれます。これらはすべて、ブラウザ内の現在のページに対して直接行います。
  • 結果は、IDEやエージェント環境内に表示され、ブラウザセッションからリアルタイムで取得されます。自然言語や関数呼び出しを用いて促すことができます。

主な機能

  • AIツール向けに、ブラウザログ、ネットワークアクティビティ、スクリーンショットにシームレスにリアルタイムアクセス。
  • アクセシビリティ（WCAG）、パフォーマンス、SEO、ベストプラクティス、およびNextJSの具体的な自動監査をLighthouse統合を使用して実施。
  • ローカルファースト: すべてのブラウザデータはお使いのマシンで処理され、保存されます。情報は第三者に送信されません。
  • 深いチェックのシーケンスを1つのコマンドで制御するデバッガーと監査モード。
  • エージェントのワークフローに適した構造化されたJSON結果。
  • 柔軟な設定と堅牢なクロスプラットフォーム接続。
  • 拡張機能パネルからのワンクリックでのログおよびスクリーンショット管理。

使用例

  • 自動アクセシビリティ検証: 開発中にプログラム的に監査を実行し、チームが構築するすべてのページがアクセシビリティ基準を満たしていることを確認します。
  • パフォーマンスチューニング: コードをリリースする前にボトルネックや最適化されていないリソースを検出し、IDEで行動可能な提案を提示します。
  • SEOおよびベストプラクティス分析: ページ内のSEOおよびコードのベストプラクティスを即座にレビューし、検索可視性やウェブの健全性を最大化します。
  • ブラウザデバッグ: テストケースやバグ再現中にログ、ネットワークトレース、スクリーンショットをキャプチャし、コンテキストが豊富なレポートを共有します。
  • 継続的なコード品質: MCP互換ツールを通じて自動チェックをスクリプト化し、CI/CDプロセスに監査を統合します。

よくある質問

Q: BrowserTools MCPはブラウザデータを外部サーバーに送信しますか？
いいえ。すべてのログ、スクリーンショット、および診断データはローカルに保存され、第三者サービスに送信されることはありません。プライバシーとセキュリティが厳格に保たれています。

Q: BrowserTools MCPで使用できるAIエディタまたはエージェントは何ですか？
Cursor、Claude Desktop、Zed、Clineなど、Model Context Protocol（MCP）をサポートする任意のエディタやツールが、BrowserTools MCPの機能を活用できます。

Q: 接続の問題が発生しています。何を確認すれば良いですか？
まず、NodeJSサーバーとMCPサーバーの両方が実行されていることを確認し、Chrome DevToolsパネルのインスタンスが1つだけアクティブであることを確認してください。問題が続く場合は、Chromeと両方のサーバーを完全に閉じて再起動し、再度DevToolsを開きます。