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

Matthias Rohmer
José Luis Zapata

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

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

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

  • セキュリティとプライバシー: 自動接続が有効になっている場合、エージェントは、開いているタブ、セッション ストレージ、ローカル ストレージ、Cookie、JavaScript API を介して公開されるその他のデータなど、ブラウザ プロファイル内のすべてのデータにアクセスできます。
  • データ プライバシーの保証: エージェント サーバー用の Chrome DevTools はローカル プロセスであり、ブラウザデータ、セッション トークン、テレメトリーを Google に送信しません。
  • 信頼とプロンプト: このモードは、信頼できるエージェントでのみ使用し、プロンプトに含める情報に注意してください。

前提条件

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

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

自動接続を設定する

MCP サーバーで自動接続機能を構成するには、次の操作を行います。

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

  2. MCP 構成を更新して、--autoConnect フラグを含めます。

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

  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.

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