Menghubungkan agen AI Anda ke browser pribadi Anda dengan fitur sambungan otomatis

Hubungkan agen AI Anda langsung ke instance browser aktif dengan fitur sambungan otomatis. Hal ini memungkinkan agen Anda melewati batasan sandbox dengan mewarisi tab, ekstensi browser, dan status aplikasi aktif Anda saat ini.

Dengan mewarisi konteks alur kerja, agen Anda dapat beralih dari penulisan kode ke men-debug status browser aktif tanpa kehilangan data sesi. Hal ini berguna jika Anda telah mencapai status aplikasi tertentu (seperti alur checkout yang kompleks atau error yang direproduksi secara manual) dan ingin agen Anda mengambil alih penyelidikan teknis tanpa menjalankan kembali langkah-langkah tersebut secara manual.

Pertimbangkan hal berikut sebelum mengaktifkan sambungan otomatis:

  • Keamanan dan privasi: Saat sambungan otomatis aktif, agen Anda memiliki akses ke semua data di profil browser Anda, termasuk tab yang terbuka, penyimpanan sesi, penyimpanan lokal, cookie, dan data lain yang muncul melalui JavaScript API.
  • Jaminan privasi data: Server Chrome DevTools untuk agen adalah proses lokal dan tidak mengirimkan data browser, token sesi, atau telemetri Anda ke Google.
  • Kepercayaan dan perintah: Gunakan mode ini hanya dengan agen yang Anda percayai dan berhati-hatilah dengan informasi yang Anda sertakan dalam perintah.

Prasyarat

Sebelum menggunakan fitur sambungan otomatis, pastikan Anda memiliki hal berikut:

  • Chrome 144+: Koneksi otomatis memerlukan protokol proses debug modern yang ada di Chrome versi saat ini.
  • Saluran Chrome yang benar: Agen Anda terhubung ke Chrome Stabil secara default. Untuk menggunakan Canary atau Beta, tentukan saluran dalam konfigurasi Anda.
  • Proses debug jarak jauh diaktifkan: Aktifkan jembatan antara browser dan agen secara manual.
  • Konfigurasi yang benar: Anda harus memperbarui konfigurasi MCP untuk menyertakan flag --autoConnect. Lihat Konfigurasi untuk mengetahui detailnya.

Menyiapkan hubungkan otomatis

Untuk mengonfigurasi fitur sambungan otomatis di server MCP Anda, lakukan hal berikut:

  1. Di browser Chrome yang sedang berjalan, buka chrome://inspect/#remote-debugging dan aktifkan proses debug jarak jauh.
  2. Perbarui konfigurasi MCP Anda untuk menyertakan tanda --autoConnect:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. Minta agen Anda untuk berinteraksi dengan aplikasi Chrome yang terbuka. Saat Chrome meminta izin untuk mengizinkan sesi, klik Izinkan.

Agen Anda kini menggunakan server MCP untuk berinteraksi dengan aplikasi Chrome yang sedang berjalan. Untuk mengetahui informasi selengkapnya tentang opsi konfigurasi, lihat Panduan konfigurasi.

Kasus penggunaan untuk hubungkan otomatis

Dengan terhubung otomatis, Anda dapat menggunakan alat atau status yang tidak dapat digunakan pada sesi Chrome yang di-sandbox. Misalnya, alih-alih meminta agen Anda untuk login, yang sering gagal, Anda dapat membuka halaman tersebut sendiri dan login. Kemudian, minta agen Anda untuk mengambil alih.

Bagian berikut menyertakan beberapa contoh kasus penggunaan untuk fitur sambungan otomatis.

Men-debug dasbor yang diautentikasi

Alat internal dan dasbor pribadi sering kali berada di balik lapisan virtual private network (VPN) atau single sign-on (SSO) yang kompleks. Browser sandbox biasanya memerlukan login yang tidak dapat dilewati oleh agen Anda. Dengan koneksi otomatis, agen Anda mewarisi sesi aktif Anda.

Contoh perintah:

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?

Contoh eksekusi agen: Agen Anda mengidentifikasi proses Chrome yang ada, menemukan tab yang aktif, dan memeriksa hierarki aksesibilitas untuk menemukan elemen. API ini juga dapat menggunakan JavaScript API untuk mengevaluasi konflik tertentu.

Memperbaiki tab saat ini secara langsung

Hindari mereproduksi error secara manual. Daripada menerjemahkan langkah-langkah reproduksi ke dalam perintah baru untuk agen sandbox, Anda dapat meminta agen Anda untuk memperbaiki bug di halaman aktif tempat Anda sudah menemukannya.

Contoh perintah:

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.

Contoh eksekusi agen: Karena terhubung ke jendela aktif Anda, agen Anda menganalisis tata letak dan menerapkan perbaikan secara instan. Anda melihat tombol bergerak di layar, yang mengonfirmasi bahwa perbaikan berfungsi sebelum Anda memperbarui kode sumber.