BrowserTools MCP

BrowserTools MCP

AI ツールをブラウザとのインタラクションで 10 倍優れた認識と能力を持たせる

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

docs で、完全なインストール、クイックスタート、貢献ガイドをご覧ください。

ロードマップ

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

アップデート

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

• DevTools パネル内で「Allow Auto-Paste into Cursor」を有効にできるようになりました。スクリーンショットは Cursor に自動的にペーストされます（Cursor のエージェント入力フィールドにフォーカス/クリックする必要があります。そうしないと機能しません！）
• Lighthouse を介した SEO、パフォーマンス、アクセシビリティ、ベストプラクティス分析ツールのスイートを統合しました
• NextJS アプリケーション向けの SEO を改善するための NextJS 固有のプロンプトを実装しました
• デバッガーモードをツールとして追加しました。これは特定のシーケンスですべてのデバッグツールを実行し、推論を改善するためのプロンプトが付随しています
• 監査モードをツールとして追加しました。特定のシーケンスですべての監査ツールを実行します
• Windows 接続の問題を解決しました
• ホスト/ポート自動検出、自動再接続、適切なシャットダウンメカニズムを備えた BrowserTools サーバー、拡張機能、MCP サーバー間のネットワークを改善しました
• Ctrl+C で Browser Tools サーバーをより簡単に終了できる機能を追加しました

クイックスタートガイド

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

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

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

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

• browser-tools-server（ログ収集用のミドルウェアである local nodejs サーバー） および
• browser-tools-mcp（拡張機能 + browser-tools-server と通信する IDE にインストールする MCP サーバー）

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

これら 3 つのステップの後、Chrome dev tools を開いてから、BrowserToolsMCP パネルを開いてください。

問題が発生している場合は、次のステップを試してください：

• ブラウザを終了/閉鎖してください。ウィンドウだけでなく、Chrome 全体を終了します。
• local node サーバー（browser-tools-server）を再起動してください
• Chrome dev tools パネルは 1 つだけ開いていることを確認してください

その後は機能するはずですが、機能しない場合は教えてください。ログ/問題に関する情報を収集するためのさらにいくつかのステップを共有できます！

ご質問や問題がある場合は、お気軽に issue チケットを開いてください！このをより良くするためのアイデアがある場合は、お気軽にご連絡いただくか、enhancement タグを付けて issue チケットを開くか、@tedx_ai on x でご連絡ください

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

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

• WCAG コンプライアンス用ページを評価する
• パフォーマンスボトルネックを特定する
• ページ上の SEO の問題にフラグを立てる
• Web 開発のベストプラクティスへの準拠を確認する
• NextJS 固有の SEO の問題を確認する

…すべて IDE を離れることなく🎉

---

🔑 主な追加機能

監査タイプ	説明
Accessibility	色コントラスト、代替テキストの欠落、キーボードナビゲーションの罠、ARIA 属性などの WCAG 準拠チェック。
Performance	レンダリングをブロッキングするリソース、過度な DOM サイズ、最適化されていない画像など、ページ速度に影響する要因の Lighthouse 駆動分析。
SEO	ページ内 SEO 要因（メタデータ、見出し、リンク構造など）を評価し、検索表示の改善を提案します。
Best Practices	Web 開発における一般的なベストプラクティスのチェック。
NextJS Audit	NextJS 監査を実行するために使用されるプロンプトを注入します。
Audit Mode	すべての監査ツールを順序立てて実行します。
Debugger Mode	すべてのデバッグツールを順序立てて実行します。

---

🛠️ 監査ツールの使用方法

✅ 始める前に

以下を確認してください：

• ブラウザのアクティブなタブ
• BrowserTools 拡張機能が有効になっていること

▶️ 監査の実行

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

ヘッドレスブラウザインスタンスは、最後の監査呼び出しから 60 秒間アクティブなままで、連続した監査リクエストを効率的に処理します。

構造化された結果：
各監査は構造化された JSON 形式で結果を返し、全体的なスコアと詳細な問題リストが含まれます。これにより、MCP 互換クライアントが検出結果を簡単に解釈し、実行可能な洞察を提示できます。

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

Accessibility 監査（runAccessibilityAudit）

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

クエリの例：

• 「このページにアクセシビリティの問題はありますか？」
• 「Accessibility 監査を実行します。」
• 「このページが WCAG 標準を満たしているか確認します。」

Performance 監査（runPerformanceAudit）

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

クエリの例：

• 「このページの読み込みが遅いのはなぜですか？」
• 「このページのパフォーマンスをチェックします。」
• 「Performance 監査を実行します。」

SEO 監査（runSEOAudit）

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

クエリの例：

• 「このページの SEO をどのように改善できますか？」
• 「SEO 監査を実行します。」
• 「このページの SEO をチェックします。」

Best Practices 監査（runBestPracticesAudit）

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

クエリの例：

• 「Best Practices 監査を実行します。」
• 「このページのベストプラクティスをチェックします。」
• 「このページにベストプラクティスの問題はありますか？」

Audit Mode（runAuditMode）

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

クエリの例：

• 「Audit Mode を実行します。」
• 「Audit Mode に入ります。」

NextJS 監査（runNextJSAudit）

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

クエリの例：

• 「NextJS 監査を実行します。」
• 「NextJS 監査を実行します。App Router を使用しています。」
• 「NextJS 監査を実行します。Pages Router を使用しています。」

Debugger Mode（runDebuggerMode）

すべてのデバッグツールを順序立てて実行します。

クエリの例：

• 「Debugger Mode に入ります。」

アーキテクチャ

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

1. Chrome Extension: スクリーンショット、コンソールログ、ネットワークアクティビティ、DOM要素をキャプチャするブラウザ拡張機能です。
2. Node Server: Chrome拡張機能とMCP サーバーのインスタンス間の通信を仲介する中間サーバーです。
3. MCP Server: AI クライアントがブラウザと対話するための標準化されたツールを提供するModel Context Protocol サーバーです。

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

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

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

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

Chrome Extension

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

Node Server

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

MCP Server

• Model Context Protocolを実装します
• AI クライアント向けの標準化されたツールを提供します
• さまざまなMCP クライアント（Cursor、Cline、Zed、Claude Desktopなど）と互換性があります

インストール

インストール手順はドキュメントで確認できます。

• BrowserTools MCP Docs

使用方法

インストールして設定すると、システムはすべての互換性のあるMCP クライアントが以下のことを実行できるようにします。

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

互換性

• すべてのMCP互換クライアントで機能します
• 主にCursor IDEの統合向けに設計されています
• その他のAIエディタとMCP クライアントをサポートします