Tutorial WebMCP: Membangun Situs Web Siap-Agen dengan Standar Baru Chrome

Saat ini, agen AI menjelajah web seperti turis membaca menu asing: menyipitkan mata ke piksel, menebak fungsi tombol, dan berharap tata letak halaman tidak berubah saat di-klik. Google dan Microsoft memutuskan masalah ini layak diselesaikan dengan benar.

Pada Februari 2026, Chrome 146 merilis pratinjau awal WebMCP, sebuah standar web yang diusulkan yang memungkinkan situs web memberi tahu agen tepatnya apa yang dapat mereka lakukan dan bagaimana melakukannya. 

Tidak ada lagi screen-scraping. 

Tidak ada lagi rekayasa balik DOM.

Dalam tutorial ini, saya akan mengajak Anda memahami apa sebenarnya WebMCP, cara menyiapkan lingkungan kerja, lalu membangun integrasi fungsional menggunakan pendekatan berbasis HTML dan berbasis JavaScript. 

Saya juga akan membahas kiat keamanan untuk menangani pemanggilan agen, serta cara menguji semuanya dengan alat debugging Chrome.

Apa itu WebMCP?

WebMCP (Web Model Context Protocol) adalah standar browser baru yang memungkinkan situs web mendeklarasikan kapabilitasnya sebagai serangkaian tool terstruktur yang dapat dipanggil langsung oleh agen AI. Alih-alih memaksa AI untuk "membaca" dan meng-klik antarmuka visual, WebMCP mengubah halaman web itu sendiri menjadi API sisi-klien yang rapi.

Mari pikirkan apa yang terjadi saat agen mencoba memesan penerbangan di situs travel saat ini. Ia harus mencari tahu kolom mana yang meminta kota keberangkatan, menebak apakah format tanggalnya MM/DD atau YYYY-MM-DD, menemukan tombol cari, dan berharap halaman tidak dimuat ulang ke tata letak yang belum pernah dilihatnya. Jika situs tersebut dapat menerbitkan sebuah tool bernama searchFlights dengan parameter bertipe untuk asal, tujuan, tanggal, dan jumlah penumpang, semua tebakan itu lenyap.

WebMCP memungkinkan hal itu. Sebuah situs mendaftarkan tool melalui API browser bernama navigator.modelContext, di mana setiap tool memiliki nama, deskripsi bahasa natural, dan skema JSON untuk input dan output-nya. Agen menemukan tool tersebut, mengirim parameter yang sesuai dengan skema, dan menerima data terstruktur sebagai balasan.

Para insinyur di Google dan Microsoft membangun spesifikasinya bersama di bawah W3C Web Machine Learning community group. Arsitekturnya sepenuhnya sisi-klien, yang membedakannya dari penerapan MCP khas di mana server backend terpisah menangani eksekusi tool. Jika MCP standar menghubungkan agen ke server backend melalui JSON-RPC, WebMCP menjaga semuanya tetap di tab browser. 

Tool dieksekusi dalam JavaScript halaman; tool berbagi sesi apa pun yang sudah dimiliki pengguna, dan browser memediasi apa yang boleh dilakukan agen. Jika Anda pernah bekerja dengan server MCP sebelumnya (misalnya, dalam tutorial MCP Model Context Protocol kami), konsep pendaftaran tool akan terasa familier, namun model deployment-nya cukup berbeda.

Fitur dan kapabilitas utama WebMCP

Tersedia dua API, masing-masing untuk tujuan yang berbeda:

• API Deklaratif bekerja melalui anotasi HTML. Anda menambahkan atribut toolname dan tooldescription ke elemen <form>, ditambah opsional toolparamdescription pada field tertentu, dan browser menghasilkan skema JSON dari struktur form yang ada. Situs yang sudah memiliki form yang tertata dengan baik memerlukan sangat sedikit perubahan untuk menjadi dapat diakses agen.
• API Imperatif memberi Anda kendali penuh secara programatis. Anda memanggil navigator.modelContext.registerTool() dan mendefinisikan nama tool, deskripsi, skema input, dan callback execute. Ini adalah jalur untuk apa pun yang terlalu dinamis untuk form biasa: alur kerja multi-langkah, panggilan API, hasil terhitung, dan logika validasi kustom.

Kedua API memungkinkan pendaftaran dinamis, artinya tool dapat muncul dan menghilang seiring perubahan status halaman. Sebelum pengguna login, Anda mungkin hanya mengekspos tool login. Setelah autentikasi, tool khusus akun didaftarkan.

• Skema JSON pada setiap tool menentukan tipe, enum, field wajib, dan deskripsi parameter. Struktur inilah yang mencegah agen mengarang nilai parameter atau menempatkan data ke field yang salah.
• Pseudo-class CSS memberikan umpan balik visual selama interaksi agen. Chrome menerapkan :tool-form-active pada form mana pun yang sedang diisi agen, dan :tool-submit-active pada tombol submit form tersebut. Pengguna yang melihat layar dapat mengetahui persis form mana yang sedang dikerjakan agen.

Belum ada mekanisme penemuan bawaan. Agen harus mengunjungi halaman Anda sebelum dapat mengetahui tool apa yang Anda tawarkan. Tim Chrome telah membahas ide file manifes .well-known/webmcp yang memungkinkan penemuan sebelum kunjungan, tetapi belum ada yang ditentukan.

Karena WebMCP masih dalam pratinjau awal, Anda harus mengharapkan beberapa kekasaran dan perubahan yang sedang berlangsung, terutama karena spesifikasi telah berevolusi lintas versi, termasuk penghapusan metode provideContext dan clearContext pada Maret 2026. 

Keterjangkauan tool terbatas pada halaman yang sudah Anda kunjungi, dan kekhawatiran keamanan seperti prompt injection dan eksfiltrasi data melalui perangkaian tool diakui dalam spesifikasi namun belum sepenuhnya terselesaikan. Anda dapat memeriksa catatan perubahan di dokumentasi Chrome sebelum memulai, karena permukaan API mungkin telah bergeser sejak tutorial ini ditulis.

Prasyarat dan Penyiapan Lingkungan WebMCP

Menyiapkan lingkungan yang benar membutuhkan beberapa menit, meskipun versi Chrome yang salah akan membuang jauh lebih banyak waktu dari itu.

Chrome Canary versi 146.0.7672.0 atau lebih tinggi diperlukan. Rilis stabil, saluran Beta, dan Dev Chrome tidak menyertakan flag WebMCP. Beberapa pengembang di forum Chrome menuliskan tentang menginstal versi yang salah dan bertanya-tanya mengapa flag tersebut tidak ada. Unduh secara khusus dari halaman Canary.

Halaman unduhan Chrome Canary

Selain browser, Anda memerlukan pemahaman kerja tentang form HTML dan penanganan event JavaScript. Jika perlu penyegaran, kursus Introduction to JavaScript dari DataCamp membahas dasar-dasarnya. 

Ekstensi Model Context Tool Inspector tidak wajib, tetapi layak dipasang. Ekstensi ini mencantumkan semua tool yang terdaftar pada halaman saat ini, memungkinkan Anda mengeksekusinya secara manual dengan parameter yang Anda ketik, dan memiliki dukungan API Gemini bawaan untuk menguji pemanggilan tool dengan bahasa natural.

Mengaktifkan flag eksperimental WebMCP

Dengan Chrome Canary terpasang:

1. Arahkan ke chrome://flags/#enable-webmcp-testing di bilah alamat.
2. Setel flag "WebMCP for testing" ke Enabled.
3. Klik Relaunch di bagian bawah halaman.

Halaman chrome://flags dengan flag WebMCP disorot dan disetel ke Enabled

Setelah peluncuran ulang, buka DevTools (F12), pergi ke tab Console, dan jalankan:

console.log(navigator.modelContext);Didukung oleh

Konsol DevTools menampilkan objek navigator.modelContext.

Objek pada output (alih-alih undefined) mengonfirmasi API tersedia. Dari sini, Anda dapat memasang Ekstensi Model Context Tool Inspector dan membuka demo travel Google untuk melihat pendaftaran tool yang berfungsi pada halaman nyata. 

Di sana, Anda cukup meluncurkan ekstensi, dan Anda akan melihat tampilan seperti berikut:

Memeriksa tool searchFlights menggunakan ekstensi Model Context Tool Inspector dari Chrome dengan situs demo Flight Search dari Google. 

Seperti yang Anda lihat, Model Context Tool Inspector mendeteksi tool searchFlights dan mengekspos skema inputnya, sehingga model memiliki pemahaman yang jauh lebih jelas tentang cara berinteraksi dengan halaman.

Membangun Integrasi WebMCP Pertama Anda

Ada dua cara untuk membangun integrasi WebMCP pertama Anda, dan keduanya kami uraikan dalam bagian di bawah ini:

Pendekatan deklaratif (HTML)

Cara termudah untuk mendaftarkan tool WebMCP adalah dengan memberi anotasi pada form yang sudah ada di halaman Anda. Berikut adalah form pencarian produk standar tanpa anotasi WebMCP:

<form action="/search" method="GET">
  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required>

  <label for="category">Category</label>
  <select name="category" id="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Didukung oleh

Empat atribut mengubahnya menjadi tool yang dapat dipanggil agen. toolname dan tooldescription ditempatkan pada tag <form>. Pada field individual, toolparamtitle dan toolparamdescription menimpa label default saat label tersebut tidak cukup deskriptif untuk dipahami agen:

<form toolname="search_products"
      tooldescription="Search the product catalog by keyword and optional category filter"
      action="/search" method="GET">

  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required
         toolparamdescription="The keyword or phrase to search for in product titles and descriptions">

  <label for="category">Category</label>
  <select name="category" id="category"
          toolparamtitle="Product Category"
          toolparamdescription="Filter results to a specific product category. Use 'all' for no filter.">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Didukung oleh

Yang dilakukan browser dengan atribut-atribut tersebut adalah menghasilkan skema JSON secara internal. Nama tool, tipe parameter, nilai enum dari opsi <select>, dan penanda required dari HTML semuanya terbawa tanpa konfigurasi tambahan.

Untuk mengujinya, buat file .html sederhana di komputer lokal Anda dengan editor teks apa pun, tempelkan kode di atas, dan buka di Chrome menggunakan file:///{your_document_path.html}; agar ekstensi dapat bekerja dengan file lokal, Anda juga perlu membuka pengaturan ekstensi, pergi ke Details, dan aktifkan akses ke URL file, seperti pada tangkapan layar di bawah.

Mengizinkan ekstensi mengakses file lokal.

Jika tidak, browser Anda tidak akan dapat berinteraksi dengan file HTML lokal Anda. Setelah selesai, jika Anda membuka file dengan Chrome dan memeriksa ekstensi WebMCP, Anda akan melihat tampilan seperti tangkapan layar berikut. 

Ekstensi menampilkan skema yang dihasilkan untuk tool search_products setelah menambahkan anotasi.

Jadi, apa yang sebenarnya terjadi saat agen memanggil tool ini? 

Chrome memfokuskan form, mengisi field dengan nilai yang diberikan agen, dan berhenti di situ. Pengguna tetap harus mengklik Submit. Default ini ada karena desain, sebab manusia harus mengonfirmasi tindakan sebelum dijalankan.

Menambahkan atribut toolautosubmit pada tag form menghilangkan langkah konfirmasi itu. Ini masuk akal untuk operasi baca-saja seperti kueri pencarian. Untuk apa pun yang memodifikasi data, memicu pembelian, atau mengubah pengaturan akun, biarkan atribut ini tidak digunakan.

Ada juga cara untuk mencegat pengiriman dan mengirim hasil terstruktur kembali ke agen. Metode respondWith() pada event submit menerima sebuah promise, dan apa pun yang Anda resolve akan menjadi output tool:

<form toolname="search_products"
      tooldescription="Search the product catalog"
      toolautosubmit
      action="/search">
  <input type="text" name="query" required>
  <button type="submit">Search</button>
</form>

<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();

    const query = new FormData(e.target).get("query");

    if (!query || query.trim().length === 0) {
      if (e.agentInvoked) {
        e.respondWith(Promise.resolve({
          error: "Search query cannot be empty. Please provide a keyword."
        }));
      }
      return;
    }

    const results = performSearch(query);

    if (e.agentInvoked) {
      e.respondWith(Promise.resolve({
        content: [{ type: "text", text: JSON.stringify(results) }]
      }));
    }
  });
</script>Didukung oleh

Boolean agentInvoked pada event submit bernilai true saat agen memicu pengiriman dan false untuk klik manusia biasa. Anda dapat menggunakannya untuk bercabang antara pemformatan respons khusus agen dan penanganan form normal Anda.

Saat tidak ada toolparamdescription pada sebuah field, browser mengambil deskripsi dari elemen <label> terkait, atau jika tidak ada, dari atribut aria-description. Jadi markup aksesibel sudah menyediakan deskripsi parameter yang masuk akal tanpa usaha tambahan.

Satu kekhasan saat ini: untuk grup elemen <input type="radio">, toolparamdescription harus ditempatkan pada tombol radio pertama dalam grup, dan berlaku untuk seluruh parameter.

Pendekatan imperatif (JavaScript)

Form mencakup banyak kebutuhan, tetapi beberapa tool perlu bekerja dengan state aplikasi, melakukan panggilan API, atau mengembalikan hasil terhitung yang tidak dipetakan ke pengiriman form tradisional. Berikut adalah tool dasar yang menambahkan item ke daftar to-do:

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the user's to-do list. Use when the user asks to create, add, or remember a task.",
  inputSchema: {
    type: "object",
    properties: {
      text: {
        type: "string",
        description: "The task description"
      },
      priority: {
        type: "string",
        enum: ["low", "medium", "high"],
        description: "Task priority level. Default to 'medium' if not specified by the user."
      }
    },
    required: ["text"]
  },
  execute: ({ text, priority = "medium" }) => {
    const newItem = { id: Date.now(), text, priority, done: false };
    todoApp.addItem(newItem);
    todoApp.renderList();

    return {
      content: [{
        type: "text",
        text: Added task: "${text}" with ${priority} priority. The to-do list now has ${todoApp.getCount()} items.
      }]
    };
  }
});Didukung oleh

Callback execute menerima parameter yang dikirim agen (yang harus sesuai dengan inputSchema), menjalankan logika aplikasi Anda, dan mengembalikan array content. 

Satu detail penting: perbarui UI sebelum mengembalikan nilai. 

Agen terkadang memeriksa tampilan halaman setelah pemanggilan tool untuk memverifikasi keberhasilan, sehingga jika UI belum berubah, agen mungkin menganggap panggilan gagal. Anda dapat mendaftarkan dan membatalkan pendaftaran tool seiring evolusi status halaman:

function onUserLogin(user) {
  navigator.modelContext.registerTool({
    name: "viewOrderHistory",
    description: "Show the user's past orders with dates and totals",
    inputSchema: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Maximum number of orders to return. Defaults to 10."
        }
      }
    },
    execute: async ({ limit = 10 }) => {
      const orders = await fetchOrders(user.id, limit);
      return {
        content: [{ type: "text", text: JSON.stringify(orders) }]
      };
    }
  });
}

function onUserLogout() {
  navigator.modelContext.unregisterTool("viewOrderHistory");
}Didukung oleh

Skenario yang lebih realistis: halaman reservasi restoran yang memeriksa ketersediaan meja. Contoh ini juga menunjukkan validasi di dalam kode, yang direkomendasikan dokumentasi Chrome karena batasan skema membantu agen tetapi tidak ditegakkan oleh semuanya.

navigator.modelContext.registerTool({
  name: "checkAvailability",
  description: "Check table availability for a given date and party size at this restaurant. Returns available time slots.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "The desired reservation date in YYYY-MM-DD format"
      },
      partySize: {
        type: "number",
        description: "Number of guests, between 1 and 12"
      }
    },
    required: ["date", "partySize"]
  },
  execute: async ({ date, partySize }) => {
    if (partySize < 1 || partySize > 12) {
      return {
        content: [{
          type: "text",
          text: "Party size must be between 1 and 12. For larger groups, please call the restaurant directly at (555) 123-4567."
        }]
      };
    }

    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime()) || parsedDate < new Date()) {
      return {
        content: [{
          type: "text",
          text: "Please provide a valid future date in YYYY-MM-DD format."
        }]
      };
    }

    const slots = await api.getAvailableSlots(date, partySize);
    renderAvailabilityCalendar(date, slots);

    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          date,
          partySize,
          availableSlots: slots.map(s => s.time),
          message: slots.length > 0
            ? Found ${slots.length} available time slots.
            : "No availability for this date. Try a different date or smaller party."
        })
      }]
    };
  }
});Didukung oleh

Beberapa poin dari dokumentasi Chrome patut digarisbawahi. Terimalah input mentah pengguna sebisa mungkin. Jika seseorang mengatakan "11:00 sampai 15:00," tool Anda sebaiknya menerima string tersebut secara langsung alih-alih mewajibkan agen mengonversinya menjadi menit-dari-tengah-malam atau format internal lain. 

Validasilah di dalam kode, bukan hanya di skema, karena penegakan skema bervariasi antar agen. Dan kembalikan hasil hanya setelah UI diperbarui, karena agen dapat melihat halaman untuk mengonfirmasi operasi telah berjalan.

Untuk tool MCP sisi server yang dapat melengkapi implementasi WebMCP sisi klien, panduan kami tentang membangun server MCP dengan FastMCP membahas penyiapannya secara detail.

Menangani Pemanggilan Agen dan Keamanan di WebMCP

Spesifikasi WebMCP mengasumsikan seorang manusia sedang mengawasi. Para penulis di Google dan Microsoft merancangnya untuk alur kerja kooperatif, bukan operasi otonom. Mekanisme di bawah ini mencerminkan filosofi tersebut.

Mendeteksi pengguna AI versus manusia

Sebuah properti boolean baru bernama agentInvoked muncul pada antarmuka SubmitEvent. Saat agen memicu pengiriman form, properti bernilai true. Ketika seseorang mengklik Submit secara normal, nilainya false.

document.querySelector("form").addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    console.log("AI agent submitted the form");
    if (!isWithinAgentRateLimit()) {
      e.preventDefault();
      e.respondWith(Promise.resolve({
        error: "Too many requests. Please wait before trying again."
      }));
      return;
    }
  }
});Didukung oleh

Di luar pengiriman form, ada dua event tingkat window yang melacak aktivitas agen. toolactivated dipicu setelah agen memanggil tool, dan Chrome mengisi awal field form terkait. toolcancel dipicu jika pengguna membatalkan operasi atau mereset form. 

Keduanya tidak dapat dibatalkan, tetapi keduanya membawa properti toolName sehingga Anda tahu tool mana yang terlibat.

window.addEventListener("toolactivated", ({ toolName }) => {
  showAgentActivityBanner(toolName);
});

window.addEventListener("toolcancel", ({ toolName }) => {
  hideAgentActivityBanner();
});Didukung oleh

Menegakkan izin human-in-the-loop

Dengan tool deklaratif, perilaku defaultnya adalah manusia harus mengklik Submit setelah agen mengisi field. Default itu sebaiknya tetap digunakan untuk hal-hal yang berdampak nyata.

Atribut toolautosubmit menghapus langkah tersebut. Atribut ini cocok untuk tool baca-saja atau berisiko rendah: kueri pencarian, pengecekan ketersediaan, pemeriksaan status. 

Apa pun yang membuat, memodifikasi, atau menghapus data harus memerlukan klik manual.

Anda dapat memberi gaya pada status interaksi agen dengan pseudo-class CSS:

form:tool-form-active {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1rem;
  border-radius: 8px;
}

form:tool-form-active::before {
  content: "AI agent is filling this form";
  display: block;
  font-size: 0.875rem;
  color: #2563eb;
  font-weight: 600;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">0.5rem;
}Didukung oleh

Sebuah form dengan gaya :tool-form-active diterapkan, menampilkan garis tepi biru dan label "AI agent is filling this form".

Tool imperatif menghadirkan tantangan berbeda. Tidak ada form dan tidak ada tombol submit, sehingga eksekusi berjalan segera saat agen memanggil tool. 

Untuk operasi apa pun yang tidak boleh terjadi tanpa persetujuan manusia, Anda perlu membangun konfirmasi ke dalam tool itu sendiri:

navigator.modelContext.registerTool({
  name: "deleteAccount",
  description: "Permanently delete the user's account and all associated data. Cannot be undone.",
  inputSchema: {
    type: "object",
    properties: {
      confirmPhrase: {
        type: "string",
        description: "The user must type 'DELETE MY ACCOUNT' to confirm."
      }
    },
    required: ["confirmPhrase"]
  },
  execute: ({ confirmPhrase }) => {
    if (confirmPhrase !== "DELETE MY ACCOUNT") {
      return {
        content: [{
          type: "text",
          text: "Confirmation phrase does not match. Ask the user to confirm explicitly."
        }]
      };
    }

    return new Promise((resolve) => {
      showConfirmationModal("Are you sure?", {
        onConfirm: async () => {
          await api.deleteAccount();
          resolve({ content: [{ type: "text", text: "Account deleted." }] });
        },
        onCancel: () => {
          resolve({ content: [{ type: "text", text: "Deletion cancelled by user." }] });
        }
      });
    });
  }
});Didukung oleh

Pola di seluruh ekosistem MCP konsisten: agen menyatakan niat, manusia mengonfirmasi eksekusi. Untuk gambaran lebih luas tentang cara kerja ini di berbagai implementasi MCP, lihat ikhtisar kami tentang server dan klien MCP teratas.

Menguji Implementasi WebMCP Anda

Setelah integrasi WebMCP pertama Anda berjalan, saatnya mengujinya. 

Menggunakan simulator agen Chrome DevTools

Setelah memasang Model Context Tool Inspector, lencana kecil pada ikonnya memberi tahu berapa banyak tool yang terdaftar di halaman saat ini. Membuka pop-up menampilkan setiap tool dengan nama, deskripsi, dan skema inputnya. Jika tool yang Anda daftarkan tidak muncul di sini, pendaftaran tidak berjalan dengan benar.

Panel ekstensi menampilkan daftar beberapa tool terdaftar dengan skema yang diperluas.

Untuk mencoba simulator agen, mari kembali ke situs demo Flight Search dari Google. Sekarang kita dapat menguji cara mengeksekusi aplikasi ini secara manual atau menggunakan bahasa natural. 

Pendekatan eksekusi manual

Eksekusi manual menghapus elemen non-deterministik dari pengujian agen. Pilih sebuah tool dari dropdown di panel ekstensi, ketik objek JSON ke kolom "Input Arguments", dan klik "Execute Tool." Ekstensi memanggil tool secara langsung menggunakan parameter yang Anda sediakan.

Ekstensi dengan tool searchFlights dipilih, parameter JSON terisi, dan tombol Execute Tool terlihat.

Ini berguna untuk mengisolasi masalah. Ketika tool bekerja dengan benar menggunakan parameter yang ditulis tangan namun gagal saat dipanggil agen, Anda tahu masalahnya ada pada deskripsi atau skema tool Anda, bukan pada fungsi execute. Sebagai contoh, menggunakan demo travel Google:

{
  "origin": "LON",
  "destination": "NYC",
  "tripType": "round-trip",
  "outboundDate": "2026-06-10",
  "inboundDate": "2026-06-17",
  "passengers": 2
}Didukung oleh

Halaman demo travel menampilkan hasil pencarian setelah eksekusi tool manual.

Pengujian bahasa natural

Pengujian bahasa natural menggunakan API Gemini. Tempelkan kunci dari AI Studio ke pengaturan ekstensi, lalu ketikkan prompt seperti 

Search for round-trip flights from London to New York leaving June 10th, returning June 17th, for 2 passengers.Didukung oleh

Ekstensi mengirim prompt tersebut ke Gemini 2.5 Flash bersama definisi tool Anda, dan model memutuskan tool mana yang akan dipanggil serta parameter apa yang akan diteruskan.

Kolom input bahasa natural pada ekstensi dengan prompt yang diketik dan respons pemanggilan tool agen di bawahnya.

Jika agen memilih tool yang salah atau memetakan parameter secara keliru, kemungkinan deskripsi tool Anda perlu lebih spesifik. Deskripsi yang baik menjelaskan apa yang dilakukan tool dengan istilah positif ("gunakan ini untuk memeriksa ketersediaan penerbangan"), bukan apa yang tidak boleh digunakan.

Urutan pengujian yang praktis:

1. Verifikasi tool muncul di ekstensi setelah halaman dimuat.
2. Eksekusi setiap tool secara manual dengan parameter yang benar. Konfirmasikan logika execute berfungsi dan UI memperbarui sebagaimana mestinya.
3. Eksekusi dengan parameter buruk. Periksa apakah validasi Anda menangkap kesalahan dan apakah pesannya cukup jelas untuk koreksi mandiri oleh agen.
4. Uji dengan bahasa natural. Lihat apakah agen memilih tool yang tepat dan memetakan kata-kata pengguna ke parameter skema dengan benar.
5. Uji kasus tepi: pengguna tidak diautentikasi, form dinonaktifkan, downtime API, dan pemanggilan berulang cepat.

Untuk konteks tentang tool MCP dalam ekosistem Google secara khusus, tutorial Google MCP Servers kami membahas beberapa pola yang relevan. Dan untuk pandangan lebih luas tentang lanskap protokol di luar Chrome, lihat Top Remote MCP Servers.

Kesimpulan

WebMCP memberi situs web saluran komunikasi langsung dengan agen AI. Alih-alih agen menebak-nebak di sebuah halaman, situs menerbitkan definisi tool terstruktur, dan agen memanggilnya dengan parameter bertipe. API deklaratif mengubah form yang ada menjadi tool yang dapat dipanggil agen hanya dengan beberapa atribut HTML. API imperatif mencakup semua yang lebih kompleks. Model keamanan menjaga manusia tetap mengendalikan tindakan yang penting.

Spesifikasi ini masih dini, hanya tersedia di Chrome Canary di balik sebuah flag, dan belum cocok untuk penggunaan produksi. Namun fakta bahwa Google dan Microsoft menulisnya bersama, dengan W3C sebagai pengarah, menunjukkan adanya jalur nyata menuju standar web yang stabil. Menghabiskan waktu dengan API sekarang berarti Anda akan memahami pola desain tool dan mekanisme keamanannya saat rilis stabil tiba.

Jika Anda ingin mulai mempersiapkan sekarang, audit form di situs Anda yang ada dan identifikasi mana yang paling diuntungkan dari akses agen. Form pencarian dan pemeriksa ketersediaan adalah titik awal berisiko rendah. Setelah Anda nyaman dengan API deklaratif pada kasus-kasus tersebut, lanjutkan ke tool imperatif untuk alur kerja yang memerlukan logika kustom. 

Untuk terus mengeksplorasi topik ini, saya merekomendasikan:

• Tutorial MCP Model Context Protocol untuk konsep dasar di balik WebMCP.
• Membangun Server MCP dengan FastMCP untuk tool MCP sisi server yang melengkapi WebMCP sisi klien.
• Tutorial Google MCP Servers untuk pola integrasi khusus Google.
• Top Remote MCP Servers dan Top MCP Servers and Clients untuk ekosistem yang lebih luas.