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

Hubungkan agen AI Anda langsung ke instance browser aktif Anda 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 menulis 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 mengambil alih penyelidikan teknis tanpa menjalankan kembali langkah-langkah tersebut secara manual.

Pertimbangkan hal berikut sebelum mengaktifkan sambungan otomatis:

  • Keamanan dan privasi: Saat terhubung 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 ditampilkan melalui JavaScript API.
  • Jaminan privasi data: Server Chrome DevTools untuk agen adalah proses lokal dan tidak mengirim 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.

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.

Kasus penggunaan untuk sambung otomatis

Terhubung otomatis memungkinkan Anda menggunakan alat atau status yang tidak dapat digunakan pada sesi Chrome yang di-sandbox. Misalnya, daripada 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 terautentikasi

Alat internal dan dasbor pribadi sering kali berada di balik lapisan single sign-on (SSO) atau virtual private network (VPN) 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 aktif, dan memeriksa hierarki aksesibilitas untuk menemukan elemen. API ini juga dapat menggunakan JavaScript API untuk mengevaluasi konflik tertentu.

Memperbaiki masalah langsung di tab saat ini

Hindari mereproduksi error secara manual. Daripada menerjemahkan langkah-langkah reproduksi menjadi 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 menganalisis tata letak Anda dan menerapkan perbaikan secara instan. Anda melihat tombol bergerak di layar, yang mengonfirmasi bahwa perbaikan berfungsi sebelum Anda memperbarui kode sumber.