ブラウザツール MCP

AIツールの認識能力を10倍向上させ、ブラウザとのインタラクション能力を高めます

このアプリケーションは、Anthropic の Model Context Protocol (MCP) を介して AI 搭載アプリケーションが Chrome 拡張機能を通じてブラウザデータをキャプチャおよび分析できるようにする強力なブラウザ監視およびインタラクションツールです。

完全なインストール、クイックスタート、貢献ガイドについては、ドキュメントをお読みください。

ロードマップ

プロジェクトのロードマップはこちらをご覧ください: Github ロードマップ / プロジェクトボード

アップデート

v1.2.0 がリリースされました！アップデートの概要は以下のとおりです。

開発ツールパネルで「カーソルへの自動貼り付けを許可」を有効にできるようになりました。スクリーンショットは自動的にカーソルに貼り付けられます（カーソルのエージェント入力フィールドにフォーカス/クリックしてください。そうしないと機能しません）。
Lighthouse を介して SEO、パフォーマンス、アクセシビリティ、ベストプラクティス分析ツールのスイートを統合しました。
NextJS アプリケーションの SEO を改善するために使用される NextJS 固有のプロンプトを実装しました
すべてのデバッグツールを特定の順序で実行するツールとしてデバッガーモードを追加し、推論を改善するためのプロンプトも表示しました。
すべての監査ツールを特定の順序で実行するためのツールとして監査モードを追加しました
Windowsの接続問題を解決
ホスト/ポートの自動検出、自動再接続、正常なシャットダウンのメカニズムにより、BrowserToolsサーバー、拡張機能、MCPサーバー間のネットワークが改善されました。
Ctrl+C でブラウザツールサーバーから簡単に終了できる機能を追加しました

クイックスタートガイド

この MCP ツールを実行するには、次の 3 つのコンポーネントがあります。

ここからChrome拡張機能をインストールしてください: v1.2.0 BrowserToolsMCP Chrome拡張機能
IDE 内で次のコマンドから MCP サーバーをインストールします: npx @agentdeskai/browser-tools-mcp@latest
新しいターミナルを開き、このコマンドを実行します: npx @agentdeskai/browser-tools-server@latest

IDEごとに設定は異なりますが、このコマンドは一般的に良い出発点となります。適切な設定については、IDEのドキュメントを参照してください。

重要なヒント - インストールする必要があるサーバーが2つあります。

browser-tools-server（ログ収集用のミドルウェアであるローカルNode.jsサーバー）と
browser-tools-mcp (拡張機能と通信する IDE にインストールする MCP サーバー + browser-tools-server)

npx @agentdeskai/browser-tools-mcp@latest IDE に入力するものでありnpx @agentdeskai/browser-tools-server@latest新しいターミナルウィンドウで実行するものである。

これらの 3 つの手順を実行した後、Chrome 開発ツールを開き、BrowserToolsMCP パネルを開きます。

それでも問題が解決しない場合は、次の手順を試してください。

ブラウザを終了します。ウィンドウだけでなく、Chrome 全体も終了します。
ローカルノードサーバー（browser-tools-server）を再起動します。
Chrome開発ツールパネルのインスタンスが1つだけ開いていることを確認してください

その後は動作するはずですが、動作しない場合はお知らせください。問題に関するログ/情報を収集するための手順をさらに共有できます。

ご質問や問題がありましたら、お気軽にチケットを開いてください。また、改善のためのアイデアがありましたら、お気軽にお問い合わせください。改善タグを付けてチケットを開くか、 @tedx_ai までご連絡ください。

完全なアップデートノート:

Cursorのようなコーディングエージェントは、現在のページに対してこれらの監査をシームレスに実行できます。PuppeteerとLighthouse npmライブラリを活用することで、BrowserTools MCPは次のことが可能になります。

ページのWCAG準拠を評価する
パフォーマンスのボトルネックを特定する
ページ上の SEO の問題を報告
ウェブ開発のベストプラクティスの遵守を確認する
SEO に関する NextJS 特有の問題を確認する

...IDE を離れることなくすべて実行できます🎉

🔑 主な追加点

監査の種類	説明
アクセシビリティ	WCAG 準拠では、色のコントラスト、代替テキストの欠落、キーボードナビゲーショントラップ、ARIA 属性などをチェックします。
パフォーマンス	レンダリングをブロックするリソース、過剰な DOM サイズ、最適化されていない画像、およびページ速度に影響を与えるその他の要因を Lighthouse で分析します。
SEO	ページ上の SEO 要素 (メタデータ、見出し、リンク構造など) を評価し、検索での可視性を高めるための改善を提案します。
ベストプラクティス	Web 開発における一般的なベストプラクティスをチェックします。
NextJS 監査	NextJS 監査を実行するために使用されるプロンプトを挿入します。
監査モード	すべての監査ツールを順番に実行します。
デバッガーモード	すべてのデバッグツールを順番に実行します。

🛠️ 監査ツールの使用

✅始める前に

以下のことを確認してください:

ブラウザのアクティブなタブ
BrowserTools拡張機能が有効

▶️監査の実行

ヘッドレスブラウザ自動化:
Puppeteer は、ヘッドレス Chrome インスタンスを自動化してページを読み込み、監査データを収集し、SPA や JavaScript 経由で読み込まれたコンテンツでも正確な結果を保証します。

ヘッドレスブラウザインスタンスは、最後の監査呼び出し後60 秒間アクティブなままになり、連続する監査要求を効率的に処理します。

構造化された結果:
各監査は、総合スコアと詳細な問題リストを含む構造化されたJSON形式で結果を返します。これにより、MCP対応のクライアントは結果を容易に解釈し、実用的な洞察を提示できます。

MCPサーバーは、現在のページで監査を実行するためのツールを提供しています。監査をトリガーするために使用できるクエリの例を以下に示します。

アクセシビリティ監査 ( `runAccessibilityAudit` )

ページが WCAG などのアクセシビリティ標準を満たしていることを確認します。

クエリの例:
「このページにはアクセシビリティの問題がありますか？」
「アクセシビリティ監査を実行します。」
「このページが WCAG 標準に準拠しているかどうかを確認してください。」

パフォーマンス監査 ( `runPerformanceAudit` )

パフォーマンスのボトルネックと読み込みの問題を特定します。

クエリの例:
「このページの読み込みがなぜこんなに遅いのですか？」
「このページのパフォーマンスを確認してください。」
「パフォーマンス監査を実行します。」

SEO 監査 ( `runSEOAudit` )

ページが検索エンジンに対してどの程度最適化されているかを評価します。

クエリの例:
「このページの SEO を改善するにはどうすればよいですか？」
「SEO 監査を実行します。」
「このページの SEO をチェックしてください。」

ベストプラクティス監査 ( `runBestPracticesAudit` )

Web 開発における一般的なベストプラクティスをチェックします。

クエリの例:
「ベストプラクティス監査を実行します。」
「このページのベストプラクティスを確認してください。」
「このページにはベストプラクティスに関する問題はありますか？」

監査モード ( `runAuditMode` )

すべての監査を特定の順序で実行します。フレームワークが検出された場合は、NextJS 監査を実行します。

クエリの例:
「監査モードを実行します。」
「監査モードに入ります。」

NextJS 監査 ( `runNextJSAudit` )

NextJS アプリケーションのベストプラクティスと SEO 改善をチェックします

クエリの例:
「NextJS 監査を実行します。」
「NextJS 監査を実行します。アプリルーターを使用しています。」
「NextJS 監査を実行します。ページルーターを使用しています。」

デバッガーモード ( `runDebuggerMode` )

すべてのデバッグツールを特定の順序で実行します

クエリの例:
「デバッガーモードに入ります。」

建築

ブラウザデータをキャプチャして分析するために使用されるコアコンポーネントは 3 つあります。

Chrome 拡張機能: スクリーンショット、コンソールログ、ネットワークアクティビティ、DOM 要素をキャプチャするブラウザ拡張機能。
ノードサーバー: Chrome 拡張機能と MCP サーバーのインスタンス間の通信を容易にする中間サーバー。
MCP サーバー: AI クライアントがブラウザーと対話するための標準化されたツールを提供するモデルコンテキストプロトコルサーバー。

┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐
│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │
│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │
│   Cursor)   │     │   Handler)   │     │               │     │             │
└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘

モデルコンテキストプロトコル（MCP）は、Anthropic AIモデルがサポートする機能で、互換性のあるクライアント向けにカスタムツールを作成できます。Claude Desktop、Cursor、Cline、ZedなどのMCPクライアントは、MCPサーバーを実行できます。MCPサーバーは、これらのクライアントに使用可能な新しいツールを「教える」ことができます。

これらのツールは外部APIを呼び出すことができますが、私たちの場合、すべてのログはユーザーのマシンにローカルに保存され、サードパーティのサービスやAPIに送信されることはありません。BrowserTools MCPは、BrowserTools Chrome拡張機能と通信するNodeJS APIサーバーのローカルインスタンスを実行します。

BrowserTools MCP サーバーのすべてのコンシューマーは、同じ NodeJS API と Chrome 拡張機能を使用してインターフェースします。

Chrome拡張機能

XHR リクエスト/レスポンスとコンソールログを監視します
選択したDOM要素を追跡します
すべてのログと現在の要素を BrowserTools コネクタに送信します
Websocketサーバーに接続してスクリーンショットをキャプチャ/送信します
ユーザーがトークン/切り捨て制限とスクリーンショットフォルダのパスを設定できるようにします

ノードサーバー

Chrome拡張機能とMCPサーバー間のミドルウェアとして機能します
Chrome拡張機能からログと現在選択されている要素を受け取ります
MCP サーバーからのリクエストを処理して、ログ、スクリーンショット、または現在の要素をキャプチャします。
スクリーンショットをキャプチャするために、Chrome拡張機能にWebsocketコマンドを送信します。
トークン制限を回避するために、ログ内の文字列と重複オブジェクトの数をインテリジェントに切り捨てます。
MCP クライアントの LLM への送信を回避するために、Cookie と機密ヘッダーを削除します。

MCPサーバー

モデルコンテキストプロトコルを実装する
AIクライアント向けに標準化されたツールを提供
さまざまな MCP クライアント (Cursor、Cline、Zed、Claude Desktop など) と互換性があります。

インストール

インストール手順については、次のドキュメントをご覧ください。

BrowserTools MCP ドキュメント

使用法

インストールと構成が完了すると、互換性のある MCP クライアントは次のことを実行できるようになります。

ブラウザコンソールの出力を監視する
ネットワークトラフィックをキャプチャする
スクリーンショットを撮る
選択した要素を分析する
MCPサーバーに保存されているログを消去します
アクセシビリティ、パフォーマンス、SEO、ベストプラクティスの監査を実行する

互換性

MCP互換クライアントならどれでも動作します
主にカーソルIDE統合用に設計されています
他のAIエディターとMCPクライアントをサポート