WebMCP memungkinkan aplikasi React mengekspos API alat terstruktur secara langsung ke agen AI, menggantikan teknik UI-scraping yang rapuh dengan panggilan yang andal dan tidak bergantung pada UI. Fitur ini tersedia dalam origin-trial untuk Chrome 149 ke atas, dan Anda dapat mengaktifkannya melalui chrome://flags/#enable-webmcp-testing.

Masalah dalam mengajarkan agen untuk melakukan klik

Sebagian besar upaya saat ini untuk membiarkan agen AI berinteraksi dengan halaman web bergantung pada petunjuk visual. Sebuah agen membedah DOM, menebak elemen mana yang merupakan tombol, mensimulasikan klik, menggulir (scroll), dan mengisi kolom formulir. Begitu sebuah tombol berpindah, label berubah, atau tata letak disesuaikan, skrip tersebut akan gagal. Pendekatan ini lambat karena harus menunggu browser merender setiap langkah, dan desain ulang rutin dapat merusak seluruh alur otomatisasi (automation pipeline).

WebMCP membalikkan model tersebut

WebMCP adalah standar web baru yang diperkenalkan oleh Google Chrome. Alih-alih mengekspos permukaan visual untuk dijelajahi agen, sebuah halaman mengiklankan sekumpulan tools—operasi bernama dan bertipe yang dapat dilakukan oleh halaman tersebut. Agen AI pertama-tama bertanya "alat apa saja yang tersedia?"; halaman akan menjawab dengan daftar seperti "searchProducts" atau "checkout". Agen kemudian memanggil sebuah alat dengan mengirimkan payload JSON yang sesuai dengan skema input yang dinyatakan, misalnya searchProducts(query: "jacket"). Browser mengarahkan permintaan tersebut langsung ke JavaScript halaman, yang menjalankan logika dasar tanpa keterlibatan UI sama sekali.

Hasilnya adalah interaksi yang instan, berfungsi tanpa mempedulikan perubahan CSS, dan tetap fungsional selama definisi alat tetap stabil.

Manfaat penting bagi pengembang

  • Kecepatan – Komunikasi tetap berada di dalam sistem pengiriman pesan browser, menghilangkan proses bolak-balik (round-trip) dari merender klik dan menunggu pembaruan halaman.
  • Keandalan – Alat memanggil fungsi yang sama yang sudah digunakan situs untuk UI-nya sendiri, sehingga desain ulang tidak akan merusak API.
  • Kontrol – Pengembang memutuskan operasi mana yang diekspos, parameter apa yang diterima, dan apa yang dapat dilihat agen dalam responsnya.
  • Independensi UI – Penataan gaya (styling), tata letak, atau refaktorisasi komponen tidak lagi memengaruhi kemampuan agen untuk memanggil sebuah fitur.

WebMCP tidak menggantikan MCP (Message-Channel-Protocol) yang sudah ada yang digunakan di sisi server. MCP terus menangani pengambilan data yang berat dan orkestrasi backend, sementara WebMCP menangani interaksi langsung di dalam tab.

Cara pengembang React memulai

Kode React dapat mendaftarkan alat menggunakan API JavaScript imperatif atau API berbasis formulir HTML deklaratif. Pola yang umum adalah membungkus pendaftaran tersebut dalam sebuah custom hook:

  1. Panggil fungsi pendaftaran dengan nama alat dan deskripsi singkat.
  2. Berikan skema input (misalnya, skema JSON yang mendeskripsikan kolom yang diperlukan).
  3. Sediakan callback execute yang menjalankan logika bisnis yang ada—sering kali merupakan fungsi yang sama yang akan dipicu oleh klik tombol.

Saat hook dijalankan, browser menambahkan alat tersebut ke manifes WebMCP halaman. Agen AI yang menemukan manifes tersebut kemudian dapat memanggil alat tersebut tanpa pernah menyentuh DOM.

Karena pendaftaran terjadi pada saat komponen dimuat (mount time), alat dapat dibatasi pada rute atau feature flag tertentu, memberikan kontrol granular kepada tim atas apa yang dapat dilakukan AI di lingkungan produksi dibandingkan dengan lingkungan pengujian.

Peringatan dan hal yang perlu diperhatikan

WebMCP masih dalam tahap origin trial. Ini hanya berfungsi di Chrome 149+ dan harus diaktifkan secara manual melalui flag.

Apa langkah selanjutnya

Google telah membuka uji coba ini bagi para pengembang yang ingin bereksperimen dengan pengalaman web AI-native. Langkah selanjutnya bagi siapa pun yang tertarik adalah:

  • Aktifkan flag di Chrome dan muat ulang situs target.
  • Tambahkan pendaftaran alat sederhana dalam komponen React dan lihat manifes muncul di devtools browser.
  • Uji klien AI (misalnya, skrip lokal yang mengikuti protokol WebMCP) untuk memanggil alat dan memverifikasi responsnya.
  • Pantau halaman status uji coba untuk pembaruan mengenai perilisan versi stabil.

Kesimpulan: WebMCP memberi pengembang React cara untuk membuat aplikasi mereka dapat dipanggil secara langsung oleh agen AI, mengubah elemen UI menjadi layanan bertipe yang stabil. Perubahan ini menghilangkan mimpi buruk pemeliharaan akibat screen-scraping dan membuka jalan menuju aplikasi web yang benar-benar AI-native—asalkan tim merasa nyaman bekerja di lingkungan Chrome eksperimental.