chrome-devtools-mcpでクラウド型アンチ検出ブラウザを制御する

完了したら、「Add API」をクリックしてBrowser APIを作成します。次に、その詳細ページを開きます：

このページでは、「Puppeteer / Playwright」の下にCDPベースの連携のための接続詳細が記載されています。Browser APIのWebSocket CDP URLは次の形式に従います：

wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222

Browser APIのパスワードを表示するには、パスワードの隣にある「Show」をクリックします。メールで受け取った多要素認証コードを入力してください。

これで、リモートブラウザ制御のためにchrome-devtools-mcpを設定するのに必要なCDP接続URLが手に入りました。素晴らしい！

ステップ2：chrome-devtools-mcp経由でGemini CLIにBrowser APIを設定する

chrome-devtools-mcpをAIエージェントに統合し、Bright DataのBrowser APIを通じてリモートのアンチ検出ブラウザセッションを制御するよう指示します。Gemini CLIでは、以下のコマンドでこれを実現できます：

gemini mcp add --scope project chrome-devtools npx chrome-devtools-mcp@latest -- --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'

注意：wsEndpoint引数には、プレースホルダーを実際のBrowser API CDP接続URLに必ず置き換えてください。

ターミナルには、chrome-devtools MCPサーバーが追加されたことを示すメッセージが表示されます：

以下に注目してください：

• --scope projectは、プロジェクト内でMCPサーバーをローカルに設定します。グローバルに設定したい場合は、このオプションを省略してください。
• --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'は、chrome-devtools-mcpにBright DataのBrowser APIエンドポイントへ接続するよう指示します。

注意：ここではwsEndpoint引数を使用することが重要です。chrome-devtools-mcpのドキュメントでは、wsEndpointはbrowserUrlの代替であると記載されています。しかし、Browser APIのCDP URLをbrowserUrlで指定すると、「Request cannot be constructed from a URL that includes credentials」というエラーで連携が失敗します。

このコマンドは、プロジェクトのフォルダ内に以下の設定を含む.gemini/settings.jsonファイルを生成します：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222"
      ]
    }
  }
}

あるいは、このファイルを手動で作成することもできます。

補足：お好みのAIエージェントでもchrome-devtools-mcpを設定できます。例えば、Claude Codeでは次を実行します：

claude mcp add chrome-devtools --scope project -- npx -- -y chrome-devtools-mcp@latest --wsEndpoint='wss://<BROWSER_API_USERNAME>:<BROWSER_API_PASSWORD>@brd.superproxy.io:9222'

素晴らしい！これで、お使いのAIエージェントはMCPを通じてChrome DevToolsのツールにアクセスできるようになり、Browser APIが提供するリモートブラウザセッションに接続するよう設定されました。

ステップ3：連携が機能することを確認する

プロジェクトフォルダ内でGemini CLI（またはお好みのAIエージェント）を起動します：

gemini

次に、/mcpコマンドを実行して利用可能なMCPサーバーを表示します：

chrome-devtools MCPサーバーと、その29個の利用可能なツールが表示されるはずです。これには以下が含まれます：

素晴らしい！これにより、chrome-devtools-mcpが正しく設定されており、そのブラウザ自動化ツールがAIエージェントで利用可能であることが確認できました。

最後のステップは、Bright DataのBrowser APIを通じてリモートブラウザセッションとやり取りするために、これらのツールを使用できることを確認することです。

ステップ4：Chrome DevTools for Agents + Browser APIをテストする

Chrome DevTools for agentsが設定済みのBrowser APIセッションを制御できることを確認するために、Booking.comのようなアンチボット対策で保護された複雑なウェブサイトに対してテストします。

次のような実際のタスクで連携を試してみてください：

Open the Booking.com page in a browser and search for hotels in Barcelona for two people from September 23 to 24. Apply the "4-star" filter and sort the results by lowest price. Extract the first 10 results with the hotel name, nightly price, rating, and review count.

プロンプトを実行すると、以下のような結果が表示されるはずです：

具体的には、Gemini CLIエージェントは以下のようにタスクを処理しました：

1. Booking.comに到達するためにnavigate_pageを呼び出しました。
2. list_pagesツールを使用して、利用可能なブラウザページを特定しました。
3. clickとtake_snapshotツールの組み合わせを使用して、関連要素を見つけ、要求された日付を選択しました。
4. evaluate_scriptを利用して、必要な追加のインタラクションを実行し、目的の結果ページに到達しました。
5. 再びtake_snapshotを使用して、結果ページの構造を検査しました。
6. evaluate_scriptを使用し、カスタムJavaScriptスクリプトで必要なデータを抽出しました。
7. 抽出されたデータをテーブル形式で返しました。

以下はエージェントが生成した出力です：

取得されたデータが、Booking.comに直接表示される結果と非常に近いことに注目してください：

このシンプルな例は、MCPを通じてGemini CLIに接続されたChrome DevTools for agentsが、リモートのBrowser APIセッションを通じてBooking.comとやり取りできることを示しています。

Booking.comは、アンチボット保護によりブラウザ自動化が困難であるため、有用なテストケースです。この構成では、Browser APIがブラウザセッションとサイトへのアクセスに必要なインフラを処理し、chrome-devtools-mcpはAIエージェントがブラウザとやり取りするために必要なツールを提供します。

その結果、ブラウザをローカルで実行・管理する必要なく、複雑なブラウザインタラクションを実行できるAIエージェントが実現します。ミッション完了です！

その他の活用例

chrome-devtools-mcpとBright DataのBrowser APIの組み合わせは、他にも多くのブラウザ自動化、デバッグ、データ抽出のユースケースをサポートできます。

さまざまなシナリオで試せるプロンプトを以下に示します：

• インタラクション後にネットワークリクエストからデータを抽出：Open a website, search for "web scraping," inspect the network requests generated when the results load, identify the request returning the search results, and extract the first 20 results from its response.
• APIレスポンスを検査：Open a product page, identify the network request returning its product data, inspect the request and response, and extract the product name, price, availability, and rating.
• ページのパフォーマンスを分析：Open a website and analyze its performance. Report the page load time, largest contentful paint, cumulative layout shift, and other relevant performance metrics, then identify potential bottlenecks.
• JavaScriptエラーをデバッグ：Open a website, inspect the console for JavaScript errors and warnings, identify the affected scripts or pages, and explain the most likely causes based on the available debugging information.

chrome-devtools-mcpを通じて、エージェントはリンクのクリックやページ内容の読み取りだけに限定されません。コンソールの検査、パフォーマンス分析、ネットワークの監視なども行えます。Playwright MCPのようなソリューションと比較すると、より深いブラウザの検査とデバッグを必要とするユースケースに適しています。

まとめ

この記事では、Chrome DevTools for agentsとは何か、そしてそれがCDPを通じてどのようにブラウザ自動化をサポートするかを学びました。具体的には、Bright DataのBrowser APIと組み合わせることで、AIエージェントが組み込みのアンチボット機能を備えたスケーラブルなクラウドベースのブラウザセッションを実行できるようにする方法を見てきました。

その結果、エンタープライズレベルのワークロードにスケールできるAI制御のブラウザ自動化構成が実現します。同じ連携により、クラウドブラウザインフラに支えられたエージェント型ブラウザワークフローを構築することもできます。

Bright Dataアカウントにサインアップし、AI対応のウェブデータスクレイピングおよびブラウザ自動化ソリューションをぜひお試しください！