Skip to main content
Glama
enesjakozh

browser-tools-mcp

by AgentDeskAI
GitHub
JavaScript
MIT License
6,091
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

ブラウザツール 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 つのコンポーネントがあります。

  1. ここからChrome拡張機能をインストールしてください: v1.2.0 BrowserToolsMCP Chrome拡張機能
  2. IDE 内で次のコマンドから MCP サーバーをインストールします: npx @agentdeskai/browser-tools-mcp@latest
  3. 新しいターミナルを開き、このコマンドを実行します: 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 つあります。

  1. Chrome 拡張機能: スクリーンショット、コンソール ログ、ネットワーク アクティビティ、DOM 要素をキャプチャするブラウザ拡張機能。
  2. ノード サーバー: Chrome 拡張機能と MCP サーバーのインスタンス間の通信を容易にする中間サーバー。
  3. 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 など) と互換性があります。

インストール

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

使用法

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

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

互換性

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

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

local-only server

The server can only run on the client's local machine because it depends on local resources.

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

  1. ロードマップ
    1. アップデート
      1. クイックスタートガイド
        1. 完全なアップデートノート:
          1. 🔑 主な追加点
            1. 🛠️ 監査ツールの使用
              1. ✅始める前に
              2. ▶️監査の実行
            2. 建築
              1. Chrome拡張機能
              2. ノードサーバー
              3. MCPサーバー
            3. インストール
              1. 使用法
                1. 互換性

                  Related MCP Servers

                  • BrowserTools MCP

                    oenius
                    A
                    security
                    A
                    license
                    A
                    quality
                    A browser monitoring and interaction tool that enables AI applications to capture and analyze browser data through a Chrome extension, supporting functions like console monitoring, screenshots, DOM analysis, and website auditing.
                    Last updated -
                    14
                    93
                    1
                    JavaScript
                    MIT License

                  • BrowserTools MCP

                    Sugatraj
                    A
                    security
                    A
                    license
                    A
                    quality
                    A browser monitoring and interaction tool that enables AI applications to capture and analyze browser data through a Chrome extension via Anthropic's Model Context Protocol.
                    Last updated -
                    14
                    0
                    JavaScript
                    MIT License

                  • browser-mcp

                    djyde
                    -
                    security
                    F
                    license
                    -
                    quality
                    A MCP server that allows AI assistants to interact with the browser, including getting page content as markdown, modifying page styles, and searching browser history.
                    Last updated -
                    79
                    TypeScript

                  • MCP-Undetected-Chromedriver

                    dragons96
                    A
                    security
                    A
                    license
                    A
                    quality
                    An MCP service that automates Chrome browser control while bypassing anti-bot detection mechanisms, enabling web scraping, testing and automation on sites with sophisticated bot protection.
                    Last updated -
                    16
                    4
                    Python
                    MIT License
                    • Linux
                    • Apple

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/AgentDeskAI/browser-tools-mcp'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server