WebMCP membolehkan aplikasi React mendedahkan API alat berstruktur secara terus kepada ejen AI, menggantikan teknik UI-scraping yang rapuh dengan panggilan yang boleh dipercayai dan bebas UI. Ciri ini tersedia dalam origin-trial untuk Chrome 149 dan ke atas, dan anda boleh mengaktifkannya melalui chrome://flags/#enable-webmcp-testing.

Masalah mengajar ejen untuk klik

Kebanyakan percubaan semasa untuk membolehkan ejen AI berinteraksi dengan halaman web bergantung pada petunjuk visual. Ejen menganalisis DOM, meneka elemen mana yang merupakan butang, mensimulasikan klik, menatal, dan mengisi medan borang. Sebaik sahaja butang beralih, label berubah, atau susun atur diubah suai, skrip tersebut akan gagal. Pendekatan ini perlahan kerana ia menunggu pelayar untuk memaparkan (render) setiap langkah, dan reka bentuk semula rutin boleh merosakkan keseluruhan saluran paip automasi.

WebMCP mengubah model tersebut

WebMCP ialah piawaian web baharu yang diperkenalkan oleh Google Chrome. Daripada mendedahkan permukaan visual untuk diterokai oleh ejen, sesebuah halaman mengiklankan set alat—operasi bernama dan bertipe yang boleh dilakukan oleh halaman tersebut. Ejen AI terlebih dahulu bertanya "apakah alat yang tersedia?"; halaman tersebut membalas dengan senarai seperti "searchProducts" atau "checkout". Ejen kemudian memanggil alat dengan menghantar payload JSON yang sepadan dengan skema input yang diisytiharkan bagi alat tersebut, contohnya searchProducts(query: "jacket"). Pelayar menghalakan permintaan tersebut terus ke JavaScript halaman, yang menjalankan logik asas tanpa sebarang penglibatan UI.

Hasilnya ialah interaksi yang pantas, berfungsi tanpa mengira perubahan CSS, dan kekal berfungsi selagi definisi alat kekal stabil.

Manfaat yang penting bagi pembangun

  • Kelajuan – Komunikasi kekal di dalam sistem pemesejan pelayar, menghapuskan proses berulang (round-trip) untuk memaparkan klik dan menunggu kemas kini halaman.
  • Kebolehpercayaan – Alat memanggil fungsi yang sama yang telah digunakan oleh laman tersebut untuk UI sendiri, jadi reka bentuk semula tidak akan merosakkan API.
  • Kawalan – Pembangun menentukan operasi mana yang didedahkan, parameter apa yang diterima, dan apa yang boleh dilihat oleh ejen dalam respons.
  • Kebebasan UI – Penggayaan (styling), susun atur, atau penstrukturan semula komponen (refactoring) tidak lagi menjejaskan keupayaan ejen untuk memanggil sesuatu ciri.

WebMCP tidak menggantikan MCP (Message-Channel-Protocol) sedia ada yang digunakan di bahagian pelayan. MCP terus mengendalikan pengambilan data yang berat dan orkestrasi backend, manakala WebMCP mengendalikan interaksi langsung dalam tab.

Cara pembangun React boleh bermula

Kod React boleh mendaftarkan alat menggunakan sama ada API JavaScript imperatif atau API berasaskan borang HTML deklaratif. Corak biasa adalah dengan membungkus pendaftaran tersebut dalam custom hook:

  1. Panggil fungsi pendaftaran dengan nama alat dan penerangan ringkas.
  2. Sediakan skema input (sebagai contoh, skema JSON yang menerangkan medan yang diperlukan).
  3. Sediakan callback execute yang menjalankan logik perniagaan sedia ada—selalunya fungsi yang sama yang akan dicetuskan oleh klik butang.

Apabila hook dijalankan, pelayar menambah alat tersebut ke dalam manifes WebMCP halaman. Ejen AI yang menemui manifes tersebut kemudiannya boleh memanggil alat itu tanpa menyentuh DOM sama sekali.

Oleh kerana pendaftaran berlaku semasa masa pemasangan (mount time) komponen, alat boleh dihadkan kepada laluan (route) atau bendera ciri (feature flag) tertentu, memberikan pasukan kawalan terperinci tentang apa yang boleh dilakukan oleh AI dalam persekitaran pengeluaran berbanding persekitaran ujian.

Amaran dan perkara yang perlu diperhatikan

WebMCP masih dalam percubaan asal (origin trial). Ia hanya berfungsi dalam Chrome 149+ dan mesti diaktifkan secara manual melalui bendera (flag).

Apa yang seterusnya

Google telah membuka percubaan ini kepada pembangun yang ingin bereksperimen dengan pengalaman web asli AI (AI-native). Langkah seterusnya bagi sesiapa yang berminat adalah:

  • Aktifkan bendera dalam Chrome dan muat semula laman sasaran.
  • Tambah pendaftaran alat yang ringkas dalam komponen React dan lihat manifes muncul dalam devtools pelayar.
  • Uji klien AI (sebagai contoh, skrip tempatan yang mengikut protokol WebMCP) untuk memanggil alat dan mengesahkan respons.
  • Ikuti halaman status percubaan untuk kemas kini mengenai pelancaran stabil.

Rumusan: WebMCP memberi pembangun React cara untuk menjadikan aplikasi mereka boleh dipanggil secara terus oleh ejen AI, menukarkan elemen UI kepada perkhidmatan bertipe yang stabil. Peralihan ini menghapuskan mimpi ngeri penyelenggaraan screen-scraping dan membuka jalan ke arah aplikasi web asli AI yang sebenar—dengan syarat pasukan selesa bekerja dalam persekitaran Chrome eksperimental.