Mengenal Tentang Apa Itu Google WebMCP

Ideax Digital | Mengenal Tentang Apa Itu Google WebMCP – Dalam beberapa tahun terakhir, dunia digital mengalami lompatan besar dengan hadirnya AI generatif dan AI agents yang mampu mengeksekusi berbagai tugas secara otomatis di browser dan aplikasi web.

Namun, selama ini ada satu masalah klasik yang selalu menghambat: AI sangat sulit berinteraksi dengan website secara akurat hanya dengan mengandalkan scraping HTML, simulasi klik, atau analisis screenshot.

Pendekatan itu boros resource, rawan error, dan sulit dipelihara ketika tampilan atau struktur halaman berubah.

Di sinilah Google WebMCP muncul sebagai “bahasa baru” antara website dan AI agents. WebMCP, yang merupakan singkatan dari Web Model Context Protocol, dirancang sebagai standar web yang memungkinkan browser mengekspos serangkaian “tools terstruktur” yang bisa dipahami dan dipanggil langsung oleh AI agent di dalam browser.

Alih-alih menebak fungsi tombol atau form, AI bisa membaca kontrak terstruktur yang menjelaskan: tools apa yang tersedia, parameter apa yang dibutuhkan, dan output apa yang akan dihasilkan.

Bagi pemilik bisnis, praktisi SEO, dan digital marketer, WebMCP bukan sekadar fitur teknis baru di Chrome, melainkan berpotensi mengubah cara calon pelanggan menggunakan AI untuk mencari produk, membandingkan layanan, sampai menyelesaikan transaksi langsung di website Anda.

Ketika AI shopping agent, travel agent, atau “AI asisten belanja” mulai menjadi mainstream, website yang “WebMCP-ready” akan jauh lebih mudah diakses, dipahami, dan diprioritaskan oleh sistem AI tersebut.

Ideax Digital sebagai SEO Agency Indonesia terbaik dan ternama sejak 2005 yang menyediakan layanan Jasa SEO Indonesia dan telah membantu berbagai bidang industri bisnis dalam Optimasi SEO, maka dalam artikel ini akan membahas tentang Mengenal Google WebMCP, mulai dari bagaimana cara kerjanya, apa bedanya dengan MCP lain, serta apa implikasinya untuk SEO, UX, dan strategi digital bisnis Anda.

Apa Itu Google WebMCP?

Secara konsep, Google WebMCP (Web Model Context Protocol) adalah standar dan browser API yang memungkinkan website mengekspos fungsionalitasnya sebagai “tools terstruktur” untuk AI agents yang berjalan di dalam browser.

Standar ini dikembangkan bersama oleh tim dari Google dan Microsoft dan diinkubasi melalui W3C Web Machine Learning Community Group, sehingga sejak awal sudah diarahkan menjadi standar industri lintas browser, bukan fitur eksklusif satu vendor.

Di sisi implementasi, WebMCP dikenal melalui API navigator.modelContext yang hidup di lingkungan browser. Melalui API ini, sebuah halaman web dapat: mendeklarasikan tools yang dimilikinya, menjelaskan parameter yang diperlukan dalam format skema terstruktur, menyediakan konteks model, dan menghapus atau mengubah konteks sesuai kebutuhan.

Alhasil, AI agent tidak lagi buta terhadap intent suatu halaman; ia punya kontrak eksplisit tentang apa yang bisa dilakukan pada halaman tersebut.

Fokus utama WebMCP adalah menggeser interaksi AI–web dari pendekatan “tebak-tebakan di level UI” ke pendekatan “kontrak semantik” yang jelas. Ini berarti action seperti “cari produk”, “checkout”, “filter hasil”, atau “booking jadwal” bisa didefinisikan sebagai tools dengan nama, deskripsi, parameter, dan output yang seragam.

Dengan demikian, agent dapat mencapai tujuan dengan lebih sedikit langkah, lebih sedikit token, dan tingkat keberhasilan yang jauh lebih tinggi dibandingkan pendekatan scraping tradisional.

Latar Belakang dan Evolusi WebMCP

Sebelum WebMCP, ekosistem AI–tooling sudah mengenal beberapa pendekatan, termasuk Model Context Protocol (MCP) yang dirilis untuk menghubungkan model AI dengan beragam tools di sisi server.

Dalam praktiknya, MCP digunakan untuk menghubungkan AI dengan database, API backend, atau sistem internal lain melalui protokol JSON-RPC, sehingga AI bisa mengakses data dan fungsi server-side secara terstruktur.

Masalahnya, MCP awal ini tidak secara langsung memanfaatkan konteks dan kemampuan browser. AI agent yang ingin mengeksekusi aksi di website tetap harus kembali ke pola lama: mengontrol browser secara “butuh usaha”, misalnya dengan tools automation seperti Playwright, headless browser, atau teknik screenshot-based yang sangat berat.

Di sinilah WebMCP mengambil posisi, mengisi celah antara protokol server-side dan dunia UI web nyata yang diakses pengguna dan agent di browser.​

Secara historis, WebMCP lahir dari penggabungan beberapa inisiatif paralel yang sebenarnya punya tujuan serupa. Tim dari Chrome bereksperimen dengan konsep “script tools” di sisi JavaScript, sementara tim dari Edge mengembangkan cara terstruktur bagi agent untuk berinteraksi dengan UI.

Saat berbagai implementasi MCP di server semakin banyak dan komunitas menyadari potensi fragmentasi standar, para engineer dari beberapa perusahaan sepakat untuk menyatukan upaya ini dalam satu spesifikasi bersama: Web Model Context Protocol untuk browser.

Hasilnya adalah sebuah standar yang didesain sejak awal dengan prinsip: permission-first, human-in-the-loop, dan interoperable lintas browser. Chrome mulai mengirimkan implementasi awal WebMCP dalam versi beta sekitar awal 2026, dengan posisi sebagai “early preview” yang memungkinkan developer mulai bereksperimen sambil menunggu adopsi di browser lain seperti Edge.

Cara Kerja Google WebMCP di Browser

Secara teknis, WebMCP bekerja dengan memperkenalkan sebuah API baru di browser yang dikenal sebagai navigator.modelContext. API ini menyediakan beberapa method utama yang digunakan developer untuk mengatur konteks tools yang tersedia di sebuah halaman, seperti registerTool, unregisterTool, provideContext, dan clearContext.

Berikut gambaran mekanisme dasarnya:

1. Halaman web mendeklarasikan tools
   Developer mendefinisikan satu atau lebih tools menggunakan JavaScript (imperative API) atau melalui atribut HTML (declarative API), yang menjelaskan: nama tool, deskripsi, parameter (dengan skema JSON), dan behavior yang akan dijalankan saat tool dipanggil.
2. Browser membangun kontrak terstruktur
   Browser kemudian menerjemahkan definisi tersebut menjadi kontrak tool terstruktur yang bisa di-discover oleh AI agent. Kontrak ini menjelaskan input dan output secara eksplisit, sehingga agent tidak perlu menebak posisi form atau label tombol secara visual.
3. AI agent melakukan discovery dan pemanggilan
   Ketika sebuah AI agent berjalan di dalam browser (misalnya sebagai extension atau fitur bawaan), agent dapat menanyakan “tools apa yang tersedia di halaman ini?” dan kemudian memanggil tool tertentu dengan menyediakan parameter yang sesuai. Pemanggilan ini terjadi melalui jalur yang diatur browser, bukan lewat script injection yang rawan.
4. Eksekusi tool dan hasil terstruktur
   Saat tool dieksekusi, kode di halaman (JavaScript atau handler form) menjalankan logika bisnis yang sudah Anda definisikan: mencari produk, menghitung ongkir, membuat booking, memeriksa ketersediaan kursi, dan sebagainya. Hasilnya dikembalikan sebagai output terstruktur yang kemudian dapat dipahami dan diolah lagi oleh AI agent.
5. Kontrol izin dan keamanan
   WebMCP menerapkan model permission-first, di mana tindakan yang sensitif (misalnya transaksi finansial, perubahan data penting) diarbitrasi oleh browser dan memerlukan persetujuan eksplisit dari pengguna sebelum diproses. Dengan demikian, AI agent tidak bisa sembarangan melakukan aksi kritikal tanpa keterlibatan pengguna sebagai pengendali utama.

Pendekatan ini membuat interaksi AI–web menjadi:

• Lebih efisien dalam konsumsi token dan resource komputasi.
• Lebih andal karena tidak bergantung pada struktur DOM yang rapuh.
• Lebih aman karena setiap aksi penting difilter lewat lapisan browser.

Komponen Utama Dalam WebMCP

Untuk memahami WebMCP secara praktis, ada beberapa komponen inti yang perlu dikenal dan dikuasai oleh developer maupun arsitek sistem.

1. navigator.modelContext
   Ini adalah entry point utama WebMCP di lingkungan JavaScript. Melalui objek ini, developer dapat mendaftarkan tools, menghapus tools, menyediakan konteks lengkap, dan mengosongkan konteks sesuai kebutuhan lifecycle halaman.
2. Tool contract
   Setiap tool yang Anda daftarkan memiliki “kontrak” yang berisi nama, deskripsi, struktur parameter (berbasis JSON Schema), dan mekanisme eksekusi. Kontrak ini sangat penting karena menjadi sumber kebenaran bagi AI agent untuk memahami apa yang bisa dilakukan tool tersebut tanpa harus membaca source code internal.
3. Declarative API berbasis HTML
   Untuk use case sederhana seperti form pencarian, checkout, atau proses booking standar, WebMCP mendukung pendekatan deklaratif menggunakan atribut HTML khusus. Misalnya, form dapat diberi atribut toolname, tooldescription, dan opsi seperti toolautosubmit untuk mengizinkan agent men-trigger form secara otomatis.
4. Imperative API berbasis JavaScript
   Untuk aplikasi kompleks seperti SPA atau dashboard dengan state dinamis, developer bisa menggunakan registerTool di JavaScript untuk mendefinisikan tools dengan logika yang lebih kaya. Pendekatan ini memberikan fleksibilitas tinggi, cocok untuk workflow yang tidak sekadar form sederhana.
5. Context management
   Selain tools, WebMCP memungkinkan halaman menyediakan “model context” yang berisi informasi penting tentang state, user journey, atau kondisi sistem yang relevan untuk AI. Dengan menyediakan konteks ini secara eksplisit, Anda membantu agent mengambil keputusan yang lebih tepat dan mengurangi kebutuhan eksplorasi yang mahal.

Memahami dan mengoptimalkan komponen-komponen ini menjadi kunci untuk membangun website yang benar-benar “agent-ready” dan AI-friendly di era WebMCP.

Perbedaan WebMCP dengan MCP Lainnya

Istilah “MCP” kini digunakan di beberapa konteks, sehingga penting untuk membedakan WebMCP dengan pendekatan MCP lain di ekosistem AI.

Berikut beberapa perbedaan kunci yang sering dibahas:

• Lokasi eksekusi
  MCP tradisional biasanya beroperasi di sisi server, menghubungkan model AI dengan API backend, database, atau sistem internal. WebMCP beroperasi di sisi client, yaitu di dalam browser, dan fokus pada interaksi dengan UI web yang diakses pengguna.
• Tujuan utama
  MCP server-side memfasilitasi integrasi data dan fungsi backoffice, sedangkan WebMCP memfasilitasi interaksi agent dengan alur bisnis di website (checkout, booking, filtering, dsb) melalui tools yang UI-aware.
• Transport dan protokol
  MCP konvensional banyak memakai JSON-RPC atau protokol serupa di atas HTTP atau WebSocket. WebMCP menggunakan API browser native (navigator.modelContext) yang langsung hidup di environment JavaScript, tanpa memerlukan server tambahan hanya untuk komunikasi agent–UI.
• Ketergantungan infrastruktur
  MCP server-side menuntut Anda menyiapkan infrastruktur backend khusus untuk menjalankan server MCP. WebMCP, sebaliknya, bisa diadopsi hanya dengan menambahkan atribut HTML atau kode JavaScript ke website yang sudah ada.
• Relasi dengan user dan browser
  WebMCP secara eksplisit memanfaatkan session browser pengguna, termasuk cookies, autentikasi, dan state yang sudah ada. Ini memungkinkan AI agent bertindak “atas nama pengguna” dengan memanfaatkan login yang sudah aktif dan akses ke halaman yang telah dibuka.

Perbedaan ini membuat WebMCP sangat relevan untuk skenario di mana AI perlu benar-benar “menggunakan website” seperti halnya pengguna manusia, bukan hanya memanggil API di belakang layar.

Manfaat Google WebMCP untuk Website dan Bisnis

Bagi pemilik website dan bisnis, WebMCP menawarkan beberapa manfaat strategis, terutama di era di mana AI agents mulai digunakan sebagai asisten pribadi, asisten belanja, dan pengambil keputusan otomatis.

Beberapa manfaat utamanya antara lain:

• Aksesibilitas tinggi untuk AI agents
  Website yang WebMCP-ready jauh lebih mudah digunakan oleh AI agents dibanding situs yang hanya mengandalkan struktur HTML biasa. Ketika agent bisa memanggil tool seperti searchProducts, checkAvailability, atau bookService secara langsung, ia akan cenderung memilih situs tersebut untuk mengeksekusi tugas pengguna.
• Peningkatan konversi melalui automasi AI
  AI shopping agent, travel agent, atau consultant agent bisa mengarahkan trafik berkualitas ke alur konversi yang paling efisien di situs Anda karena mereka memahami struktur tools yang tersedia. Misalnya, agent bisa langsung menambahkan produk ke cart dan menyiapkan checkout berdasar preferensi pengguna, lalu meminta konfirmasi final secara human-in-the-loop.​
• Pengalaman pengguna yang lebih mulus
  Daripada menghabiskan waktu klik sana-sini, pengguna bisa cukup memberi instruksi ke AI seperti “carikan laptop 15 inci untuk kerja remote dengan budget sekian” dan agent akan mengeksekusi langkah-langkah di website Anda melalui tools WebMCP. Proses discovery, filtering, dan comparison menjadi lebih cepat dan minim friksi.
• Efisiensi operasional dan pemeliharaan
  Karena WebMCP berbasis kontrak terstruktur, perubahan tampilan UI tidak selalu memaksa Anda mengubah integrasi AI, selama kontrak tool tetap konsisten. Ini mengurangi biaya maintenance dan membuat evolusi desain front-end lebih fleksibel.
• Keunggulan kompetitif di ekosistem AI-native
  Seiring naiknya penggunaan AI reviews dan AI-overviews di halaman hasil pencarian, situs yang menyediakan struktur semantik yang jelas dan tools WebMCP yang kaya berpotensi diprioritaskan sebagai sumber eksekusi tindakan. Ini mirip dengan bagaimana schema markup dulu memberi keunggulan dalam rich results; WebMCP bisa menjadi “lapisan baru” untuk AI agent-driven traffic.

Dampak WebMCP terhadap SEO dan Visibility

WebMCP tidak langsung mengubah algoritma ranking organik tradisional, namun ia memperluas definisi “visibility” di era di mana AI menjadi perantara utama bagi banyak user journeys.

Beberapa dampak potensial untuk SEO dan organic visibility:

• Dari sekadar “crawled & indexed” menjadi “agent-usable”
  Situs yang mudah di-crawl dan di-index tetap penting, tetapi dalam konteks WebMCP, situs juga perlu usable oleh AI agents. Artinya, selain konten dan struktur HTML, Anda perlu memikirkan struktur tools yang tersedia bagi agent untuk mengeksekusi intent pengguna.
• Relevansi dalam AI shopping dan AI travel experiences
  Banyak skenario penelusuran komersial akan dimediasi oleh agent yang membandingkan beberapa situs sekaligus. Situs yang tidak punya tools WebMCP berisiko “terlihat lebih sulit digunakan” oleh agent, sehingga kalah dibanding situs yang sudah memaparkan fungsi bisnisnya dalam bentuk tools terstruktur.​
• Semantik di level tools, bukan hanya di level konten
  Jika selama ini semantik SEO didominasi oleh struktur heading, schema markup, dan internal linking, WebMCP menambahkan dimensi baru: semantik di tingkat actions. Penamaan tool, deskripsi, dan skema parameter menjadi sinyal semantik yang sangat kaya bagi AI yang ingin memahami apa yang bisa dilakukan di situs Anda.
• Potensi integrasi dengan AI Reviews dan Overviews
  Saat sistem seperti AI review atau AI overview menilai “kesiapan AI” sebuah situs, keberadaan WebMCP tools yang jelas dan aman dapat menjadi sinyal kualitas integrasi AI-native. Hal ini pada gilirannya dapat berdampak pada seberapa sering situs Anda direkomendasikan sebagai tempat eksekusi tindakan, bukan sekadar sumber informasi.

Dengan kata lain, SEO di era WebMCP tidak hanya soal membuat konten yang mudah ditemukan dan relevan, tetapi juga soal membuat website yang mudah digunakan oleh AI sebagai agen eksekusi tujuan pengguna.

Contoh Use Case WebMCP dalam Berbagai Industri

Agar lebih konkret, berikut beberapa skenario use case yang menunjukkan bagaimana WebMCP dapat diaplikasikan di berbagai model bisnis.

• E-commerce
  • Tool searchProducts(category, priceRange, size) untuk pencarian produk berbasis filter struktural.
  • Tool addToCart(productId, quantity) untuk menambahkan produk ke keranjang.
  • Tool initiateCheckout(shippingAddress, paymentMethod) untuk memulai proses checkout dengan data yang sudah diketahui agent.
• Travel dan hospitality
  • Tool searchFlights(origin, destination, dateRange) untuk menemukan penerbangan.
  • Tool searchHotels(city, dates, budget) untuk mencari penginapan.
  • Tool bookStay(hotelId, roomType, dates) untuk mengkonfirmasi pemesanan.
• SaaS dan B2B services
  • Tool scheduleDemo(dateOptions, timezone) untuk menjadwalkan demo produk.
  • Tool generateQuote(planType, seatCount) untuk menghasilkan penawaran harga dinamis.
  • Tool startTrial(email, companySize) untuk memulai free trial secara otomatis.
• Edukasi dan kursus online
  • Tool enrollCourse(courseId, learnerProfile) untuk mendaftarkan peserta ke kursus tertentu.
  • Tool recommendPath(skillLevel, goals) untuk merekomendasikan learning path yang sesuai.
  • Tool bookConsultation(slot, timezone) untuk mengatur sesi konsultasi.
• Booking jasa lokal
  • Tool checkAvailability(serviceType, dateRange) untuk melihat ketersediaan jadwal.
  • Tool bookService(serviceId, timeSlot, location) untuk melakukan booking.
  • Tool calculateEstimate(serviceType, distance) untuk menghitung estimasi biaya.

Dengan struktur tools seperti ini, AI agent dapat menjalankan alur kompleks (multi-step workflow) dengan lebih sedikit interaksi manual, tetapi tetap dalam batas kontrol dan izin pengguna.

Implementasi WebMCP: Declarative vs Imperative

Strategi implementasi WebMCP pada website dapat dibagi menjadi dua pendekatan utama: declarative API berbasis HTML dan imperative API berbasis JavaScript.

Pendekatan deklaratif cocok untuk:

• Form standar seperti pencarian, pendaftaran, dan checkout.
• Situs dengan pola UI yang relatif statis, di mana struktur form jarang berubah.
• Tim yang ingin memulai cepat tanpa terlalu banyak penulisan JavaScript khusus.

Dalam pendekatan ini, Anda menambahkan atribut seperti toolname, tooldescription, dan opsi lain pada form atau elemen HTML tertentu.

Browser kemudian mengubah form tersebut menjadi tool WebMCP yang bisa di-discover oleh agent, lengkap dengan informasi input field yang relevan.

Pendekatan imperatif lebih cocok bila:

• Aplikasi Anda berupa SPA atau PWA dengan state dinamis yang kompleks.
• Banyak aksi yang tidak merepresentasikan form tradisional.
• Anda membutuhkan kontrol penuh atas kapan dan bagaimana tools diekspos atau dihapus.

Dalam pendekatan ini, Anda menggunakan navigator.modelContext.registerTool untuk mendaftarkan tools secara programatik dengan skema parameter lengkap dan fungsi eksekusi custom.

Hal ini memungkinkan integrasi yang sangat fleksibel, misalnya untuk dashboard analytics, aplikasi trading, atau platform kolaborasi real-time.

Keduanya dapat digabungkan sesuai kebutuhan, sehingga area tertentu dari situs bisa menggunakan form deklaratif sementara area lain menggunakan tools imperatif.

Keamanan, Privasi, dan Kontrol Pengguna

Karena WebMCP memungkinkan AI agents mengakses dan mengeksekusi fungsi di website, aspek keamanan dan privasi menjadi perhatian utama dalam desain standarnya.

Beberapa prinsip penting yang diterapkan:

• Permission-first
  Browser bertindak sebagai gatekeeper, memastikan bahwa tindakan yang berdampak signifikan terhadap pengguna memerlukan izin eksplisit. Ini mirip dengan bagaimana browser menangani izin lokasi, mikrofon, atau notifikasi.
• Scoped ke halaman dan session
  Tools WebMCP hanya tersedia bagi agent ketika halaman tersebut dibuka dan berada dalam session pengguna. Agent tidak bisa sembarangan memanggil tools milik situs yang tidak sedang aktif di tab atau jendela yang relevan.
• Batasan pada tindakan sensitif
  Aksi seperti melakukan pembayaran, menghapus data, atau mengubah setting penting dapat dikategorikan sebagai tindakan sensitif yang memerlukan interaksi fisik atau konfirmasi eksplisit dari pengguna. Ini menjaga keseimbangan antara automasi AI dan kontrol pengguna.
• Transparansi dan auditability
  Karena tools didefinisikan secara eksplisit di kode front-end atau markup, baik developer maupun auditor keamanan dapat meninjau dengan jelas apa saja aksi yang tersedia untuk AI agent. Hal ini berlawanan dengan pendekatan yang hanya mengandalkan automation “di luar” browser, yang sering kali lebih sulit diaudit.​

Dengan fondasi ini, WebMCP berusaha menjadi standar yang bukan hanya powerful, tetapi juga aman dan dapat dipercaya oleh pengguna akhir.

WebMCP, AI-Friendly Content, dan Semantik SEO

Selain aspek teknis, WebMCP membawa implikasi penting bagi cara Anda menyusun konten dan struktur semantik di website.

Beberapa poin yang selaras dengan semantik SEO dan AI-friendly content:

• Struktur heading yang jelas
  AI agents dan sistem AI review akan lebih mudah memahami topik dan subtopik ketika struktur heading konsisten dan logis (H1, H2, H3, DST). Ini sejalan dengan praktek SEO on-page yang baik.
• Deskripsi tools yang informatif
  Nama dan deskripsi tools WebMCP sebaiknya ditulis dengan bahasa yang jelas dan mencerminkan intent bisnis nyata (misalnya: “Mencari produk berdasarkan kategori dan rentang harga”). Ini membantu AI menghubungkan kebutuhan pengguna dengan fungsi yang tepat di situs Anda.
• Skema parameter yang eksplisit
  Penggunaan skema JSON dengan nama parameter yang semantik (misalnya priceRange, skillLevel, dateRange) memperkaya sinyal semantik di level actions, bukan hanya di level konten teks. Bagi AI, hal ini mirip dengan memiliki “schema markup untuk interaksi”.
• Konsistensi antara konten, schema markup, dan tools
  Idealnya, intent yang tercermin di konten (misalnya “booking konsultasi”), schema markup (misalnya Service, Event), dan tools WebMCP (misalnya bookConsultation) semuanya konsisten. Konsistensi ini memperkuat pemahaman AI tentang apa yang bisa dilakukan pengunjung di website Anda.

Dengan demikian, WebMCP dapat dipandang sebagai lapisan tambahan di atas semantik SEO tradisional yang sering berfokus pada struktur konten dan metadata.

Tabel Ringkas: Posisi WebMCP di Ekosistem AI dan Web

Berikut ringkasan untuk memudahkan membayangkan posisi WebMCP dibanding pendekatan lain: