自動接続で AI エージェントを個人用ブラウザに接続する

Matthias Rohmer
José Luis Zapata

自動接続機能を使用すると、AI エージェントをアクティブなブラウザ インスタンスに直接接続できます。これにより、エージェントは現在のタブ、ブラウザ拡張機能、ライブ アプリケーションの状態を継承して、サンドボックスの制限を回避できます。

ワークフローのコンテキストを継承することで、エージェントはセッション データを失うことなく、コードの作成からライブブラウザの状態のデバッグに移行できます。これは、特定アプリケーションの状態（複雑な購入手続きのフローや手動で再現されたエラーなど）にすでに到達していて、手動で手順を再実行することなく、エージェントに技術的な調査を引き継いでもらいたい場合に便利です。

自動接続を有効にする前に、次の点を考慮してください。

  • セキュリティとプライバシー: 自動接続が有効になっている場合、エージェントはブラウザ プロファイルのすべてのデータ（開いているタブ、セッション ストレージ、ローカル ストレージ、Cookie、JavaScript API を介して公開されるその他のデータなど）にアクセスできます。

  • Google に送信されるデータ: エージェント サーバー用の Chrome DevTools はローカル プロセスとして実行されます。ただし、デフォルトでは、接続モードに関係なく、次のデータが Google に送信されます。

    • ツールの呼び出し成功率、レイテンシ、 環境情報などの使用統計情報。オプトアウトするには、--no-usage-statistics フラグを使用するか、CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 環境変数を設定します。
    • パフォーマンス トレースの URL。これは、実際のユーザー エクスペリエンス データを取得するために Chrome UX レポート （CrUX）API に送信されます。オプトアウトするには、--no-performance-crux フラグを使用します。

    詳細については、 セキュリティとプライバシーのオプションをご覧ください。

  • 信頼とプロンプト: このモードは、信頼できるエージェントでのみ使用し、プロンプトに含める情報に注意してください。

前提条件

自動接続機能を使用する前に、以下が用意されていることを確認してください。

  • Chrome 144 以降: 自動接続には、 現在のバージョンの Chrome に搭載されている最新のデバッグ プロトコルが必要です。
  • 正しい Chrome チャンネル: エージェントはデフォルトで Chrome Stable に接続します。 Canary または Beta を使用するには、構成でチャンネルを指定します。
  • リモート デバッグが有効になっている: ブラウザとエージェント間のブリッジを手動で有効にします。
  • 正しい構成: MCP 構成を更新して --autoConnect フラグを含める必要があります。詳細については、構成をご覧ください。

自動接続を設定する

MCP サーバーで自動接続機能を構成する手順は次のとおりです。

  1. 実行中の Chrome ブラウザで、chrome://inspect/#remote-debugging に移動し、リモート デバッグを有効にします。

  2. --autoConnect フラグを含めるように MCP 構成を更新します。

    {
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

    使用統計情報とパフォーマンス トレースの URL を Google に送信しないようにするには、args に --no-usage-statistics フラグと --no-performance-crux フラグも追加します。

  3. 開いている Chrome アプリとやり取りするようにエージェントに指示します。セッションを許可する権限を Chrome が要求したら、[許可] をクリックします。

エージェントは MCP サーバーを使用して、実行中の Chrome アプリケーションとやり取りします。構成オプションの詳細については、構成ガイドをご覧ください。

自動接続のユースケース

自動接続を使用すると、サンドボックス化された Chrome セッションでは使用できないツールや状態を使用できます。たとえば、エージェントにログインを求めるのではなく（多くの場合、失敗します）、自分でページに移動してログインできます。その後、エージェントに引き継いでもらいます。

次のセクションでは、自動接続機能のユースケースの例をいくつか紹介します。

認証されたダッシュボードをデバッグする

内部ツールとプライベート ダッシュボードは、複雑なシングル サインオン（SSO）またはバーチャル プライベート ネットワーク（VPN）レイヤの背後にあることがよくあります。サンドボックス化されたブラウザでは通常、エージェントがバイパスできないログインが必要です。自動接続を使用すると、エージェントはアクティブなセッションを継承します。

プロンプト例:

I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?

エージェントの実行例: エージェントは既存の Chrome プロセスを特定し、アクティブなタブを見つけて、アクセシビリティ ツリーを調べて要素を見つけます。また、JavaScript API を使用して特定の競合を評価することもあります。

現在のタブをライブ修正する

エラーを手動で再現することは避けてください。再現手順をサンドボックス化されたエージェントの新しいプロンプトに変換するのではなく、すでにエラーが発生しているアクティブなページでエージェントにバグを修正してもらいます。

プロンプト例:

Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.

エージェントの実行例: アクティブなウィンドウに接続されているため、エージェントはレイアウトを分析して修正を即座に適用します。画面上でボタンが移動し、ソースコードを更新する前に修正が機能することを確認できます。