Cursor 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固有のプロンプトを実装しました。
• 特定の順序ですべてのデバッグツールを実行するデバッガーモードを追加し、推論を改善するためのプロンプトも追加しました。
• 特定の順序ですべての監査ツールを実行する監査モードを追加しました。
• 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)

ウェブ開発の一般的なベストプラクティスを確認します。

例のクエリ:

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

監査モード (runAuditMode)

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

例のクエリ:

• "監査モードを実行してください。"
• "監査モードに入ります。"

NextJS監査 (runNextJSAudit)

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

例のクエリ:

• "NextJS監査を実行してください。"
• "アプリルーターを使用しているので、NextJS監査を実行してください。"
• "ページルーターを使用しているので、NextJS監査を実行してください。"

デバッガーモード (runDebuggerMode)

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

例のクエリ:

• "デバッガーモードに入ります。"

アーキテクチャ

ブラウザデータをキャプチャし分析するために使用される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クライアントもサポートしています