Integrations
Enables integration with Lighthouse to perform website audits for accessibility, performance, SEO, and best practices directly through the MCP server.
Uses Puppeteer to automate headless browser instances for running audits and collecting page data for analysis.
ブラウザツール MCP
AIツールの認識能力を10倍向上させ、ブラウザとのインタラクション能力を高めます
このアプリケーションは、Anthropic の Model Context Protocol (MCP) を介して AI 搭載アプリケーションが Chrome 拡張機能を通じてブラウザ データをキャプチャおよび分析できるようにする強力なブラウザ監視およびインタラクション ツールです。
完全なインストール、クイックスタート、貢献ガイドについては、ドキュメントをお読みください。
ロードマップ
プロジェクトのロードマップはこちらをご覧ください: Github ロードマップ / プロジェクトボード
アップデート
v1.2.0 がリリースされました！アップデートの概要は以下のとおりです。
- 開発ツールパネルで「カーソルへの自動貼り付けを許可」を有効にできるようになりました。スクリーンショットは自動的にカーソルに貼り付けられます（カーソルのエージェント入力フィールドにフォーカス/クリックしてください。そうしないと機能しません）。
- Lighthouse を介して SEO、パフォーマンス、アクセシビリティ、ベスト プラクティス分析ツールのスイートを統合しました。
- NextJS アプリケーションの SEO を改善するために使用される NextJS 固有のプロンプトを実装しました
- すべてのデバッグツールを特定の順序で実行するツールとしてデバッガーモードを追加し、推論を改善するためのプロンプトも表示しました。
- すべての監査ツールを特定の順序で実行するためのツールとして監査モードを追加しました
- Windowsの接続問題を解決
- ホスト/ポートの自動検出、自動再接続、正常なシャットダウンのメカニズムにより、BrowserToolsサーバー、拡張機能、MCPサーバー間のネットワークが改善されました。
- Ctrl+C でブラウザツールサーバーから簡単に終了できる機能を追加しました
IDE / MCP クライアントのバージョンを次のように更新してください: npx @agentdeskai/browser-tools-mcp@1.2.0
また、Chrome拡張機能の最新バージョンをここからダウンロードしてください： v1.2.0 BrowserToolsMCP Chrome拡張機能
そこから、次のようにローカルノードサーバーを実行できます: npx @agentdeskai/browser-tools-server@1.2.0
NPXキャッシュにより最新バージョンが取得できない可能性があるため、必ずバージョン1.2.0を指定してください。アップデートごとにこの操作を1回だけ実行すれば、最新バージョンが利用できるようになります。
Chrome 開発ツールを開くと、ログがサーバーに送信されるはずです 🦾
ご質問や問題がありましたら、お気軽にチケットを開いてください。また、改善のためのアイデアがありましたら、お気軽にお問い合わせください。改善タグを付けてチケットを開くか、 @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）は、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 など) と互換性があります。
インストール
インストール手順については、次のドキュメントをご覧ください。
使用法
インストールと構成が完了すると、互換性のある MCP クライアントは次のことを実行できるようになります。
- ブラウザコンソールの出力を監視する
- ネットワークトラフィックをキャプチャする
- スクリーンショットを撮る
- 選択した要素を分析する
- MCPサーバーに保存されているログを消去します
- アクセシビリティ、パフォーマンス、SEO、ベストプラクティスの監査を実行する
互換性
- MCP互換クライアントならどれでも動作します
- 主にカーソルIDE統合用に設計されています
- 他のAIエディターとMCPクライアントをサポート
This server cannot be installed
AI アプリケーションが Anthropic のモデル コンテキスト プロトコルを介して Chrome 拡張機能を通じてブラウザー データをキャプチャおよび分析できるようにするブラウザー監視およびインタラクション ツール。