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

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

Dengan mewarisi konteks alur kerja Anda, agen Anda dapat beralih dari menulis kode ke men-debug status browser live Anda 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 koneksi otomatis:

  • Keamanan dan privasi: Saat koneksi otomatis aktif, agen Anda memiliki akses ke semua data di profil browser Anda, termasuk tab terbuka, penyimpanan sesi, penyimpanan lokal, cookie, dan data lainnya yang ditampilkan 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 koneksi otomatis, pastikan Anda memiliki hal berikut:

  • Chrome 144+: Koneksi otomatis memerlukan protokol proses debug modern yang ditemukan 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 Anda secara manual.
  • Konfigurasi yang benar: Anda harus memperbarui konfigurasi MCP untuk menyertakan flag --autoConnect. Lihat Konfigurasi untuk mengetahui detailnya.

Menyiapkan koneksi otomatis

Untuk mengonfigurasi fitur koneksi 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 flag --autoConnect:

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. Minta agen Anda untuk berinteraksi dengan aplikasi Chrome terbuka Anda. 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 koneksi otomatis

Koneksi otomatis memungkinkan Anda menggunakan alat atau status yang tidak dapat digunakan pada sesi Chrome 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 koneksi 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 pohon aksesibilitas untuk menemukan elemen. Agen Anda juga dapat menggunakan JavaScript API untuk mengevaluasi konflik tertentu.

Memperbaiki tab Anda saat ini secara langsung

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 Anda menganalisis tata letak Anda dan menerapkan perbaikan secara instan. Anda akan melihat tombol bergerak di layar, yang mengonfirmasi bahwa perbaikan berfungsi sebelum Anda memperbarui kode sumber.