Browser Tools MCP

🚀 BrowserTools MCP

AIツールを10倍以上の認識力とブラウザとの対話能力を持たせましょう

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

完全なインストール、クイックスタート、およびコントリビューションガイドについては、ドキュメント をご覧ください。

🗺️ ロードマップ

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

🔄 更新情報

v1.2.0がリリースされました！この更新内容の概要を紹介します:

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

IDE / MCPクライアントでバージョンを次のように更新してください: npx @agentdeskai/browser - tools - mcp@1.2.0

また、Chrome拡張機能の最新バージョンをこちらからダウンロードしてください: [v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser - tools - mcp/releases/download/v1.2.0/BrowserTools - 1.2.0 - extension.zip)

その後、次のようにローカルのノードサーバーを実行できます: npx @agentdeskai/browser - tools - server@1.2.0

NPXのキャッシュにより最新バージョンが取得できない可能性があるため、バージョン1.2.0を指定するようにしてください！更新ごとに一度だけこの操作を行えば、最新バージョンを使用できます。

Chromeの開発者ツールを開くと、ログがサーバーに送信され始めます 🦾

質問や問題があれば、自由にイシューを開いてください！このツールを改善するアイデアがあれば、連絡を取るか、強化タグ付きのイシューを開いてください。または、@tedx_ai on x まで連絡してください。

完全な更新ノート

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

• WCAG準拠性についてページを評価する
• パフォーマンスのボトルネックを特定する
• オンページのSEO問題を検出する
• ウェブ開発のベストプラクティスへの準拠を確認する
• NextJSのSEOに関する特定の問題をレビューする

...これらすべてをIDEを離れることなく行えます 🎉

🔑 主要な追加機能

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

✅ 開始前に

以下が必要です:

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

▶️ 監査の実行

ヘッドレスブラウザ自動化:
PuppeteerはヘッドレスChromeインスタンスを自動化してページをロードし、監査データを収集します。これにより、SPAやJavaScriptを介してロードされるコンテンツでも正確な結果が得られます。

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

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

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

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

ページがWCAGの標準を満たしていることを確認します。

サンプルクエリ:

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

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

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

サンプルクエリ:

• "このページが遅いのはなぜですか？"
• "このページのパフォーマンスを確認してください。"
• "パフォーマンス監査を実行してください。"

SEO監査 (runSEOAudit)

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

サンプルクエリ:

• "このページのSEOを改善するにはどうすればいいですか？"
• "SEO監査を実行してください。"
• "このページのSEOを確認してください。"

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

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

サンプルクエリ:

• "ベストプラクティス監査を実行してください。"
• "このページのベストプラクティスを確認してください。"
• "このページにベストプラクティスの問題はありますか？"

Audit Mode (runAuditMode)

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

サンプルクエリ:

• "Audit Modeを実行してください。"
• "Audit Modeに入ります。"

NextJS監査 (runNextJSAudit)

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

サンプルクエリ:

• "NextJS監査を実行してください。"
• "app routerを使用しているので、NextJS監査を実行してください。"
• "page routerを使用しているので、NextJS監査を実行してください。"

Debugger Mode (runDebuggerMode)

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

サンプルクエリ:

• "Debugger Modeに入ります。"

アーキテクチャ

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

1. Chrome拡張機能: スクリーンショット、コンソールログ、ネットワークアクティビティ、およびDOM要素をキャプチャするブラウザ拡張機能。
2. ノードサーバー: Chrome拡張機能とMCPサーバーの任意のインスタンス間の通信を容易にする仲介サーバー。
3. MCPサーバー: 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は、BrowserTools Chrome拡張機能と通信するNodeJS APIサーバーのローカルインスタンスを実行します。

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

Chrome拡張機能

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

ノードサーバー

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

MCPサーバー

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

📦 インストール

インストール手順は、ドキュメントを参照してください:

• BrowserTools MCP Docs

💻 使用方法

インストールと設定が完了すると、このシステムは互換性のあるMCPクライアントに以下のことを行わせます:

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

互換性

• すべてのMCP互換クライアントで動作します。
• 主にCursor IDEとの統合を目的として設計されています。
• 他のAIエディターやMCPクライアントもサポートしています。