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

Matthias Rohmer
José Luis Zapata

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

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

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

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

前提条件

自動接続機能を使用する前に、以下をご確認ください。

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

自動接続を設定する

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

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

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

    {
  "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.

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