Apa Itu WebMCP? Panduan Lengkap untuk Developer Web

Perkembangan artificial intelligence atau AI mulai mengubah cara manusia menggunakan internet. Jika sebelumnya pengguna harus membuka website, mencari informasi, mengisi formulir, memilih menu, lalu menekan tombol secara manual, kini AI agent mulai dapat membantu menjalankan berbagai tugas tersebut.

Perubahan ini melahirkan konsep agentic web, yaitu lingkungan web yang memungkinkan agen AI berinteraksi dengan aplikasi untuk membantu menyelesaikan tugas tertentu.

Namun, ada tantangan penting. AI agent harus memahami bagaimana sebuah website bekerja. Jika hanya mengandalkan tampilan halaman, agent mungkin harus membaca DOM, mencari tombol, memahami input, kemudian melakukan klik dan pengisian formulir seperti pengguna manusia.

Proses tersebut bisa menjadi panjang dan rentan terhadap kesalahan.

Di sinilah WebMCP hadir.

WebMCP adalah standar web yang diusulkan untuk membantu website membuat dan mengekspos tools terstruktur yang dapat digunakan oleh AI agent. Teknologi ini menyediakan mekanisme berbasis JavaScript serta anotasi pada formulir HTML sehingga agent dapat memahami fungsi tertentu pada halaman secara lebih terstruktur.

Dokumentasi resmi Chrome menjelaskan bahwa WebMCP dirancang untuk membuat interaksi antara AI agent dan aplikasi web menjadi lebih terstruktur.

Apa Itu WebMCP?

WebMCP adalah teknologi yang dirancang untuk menjembatani aplikasi web dengan AI agent melalui tools yang memiliki fungsi, nama, deskripsi, dan parameter yang jelas.

Sederhananya, WebMCP memungkinkan developer menjelaskan kepada AI agent bahwa website memiliki fungsi tertentu.

Misalnya sebuah website rental mobil memiliki fungsi:

• Mencari kendaraan.
• Mengecek ketersediaan.
• Menghitung harga sewa.
• Membuat reservasi.

Fungsi tersebut dapat direpresentasikan sebagai tools yang lebih mudah dipahami oleh agent.

Daripada agent harus menebak fungsi sebuah tombol berdasarkan tampilan website, developer dapat menyediakan fungsi yang memiliki nama dan deskripsi yang jelas.

MCP dalam WebMCP Itu Apa?

WebMCP berkaitan dengan konsep Model Context Protocol atau MCP, yaitu pendekatan yang memungkinkan model AI berinteraksi dengan tools dan konteks tertentu.

WebMCP membawa konsep tersebut ke lingkungan web.

Tujuannya adalah membuat kemampuan aplikasi web dapat ditemukan dan digunakan oleh AI agent melalui mekanisme yang lebih terstruktur.

Contohnya, website rental mobil dapat menyediakan tool:

search_available_cars

Tool tersebut dapat menerima parameter seperti:

location
pickup_date
return_date
car_type

Agent kemudian dapat memahami bahwa website mempunyai kemampuan untuk mencari kendaraan berdasarkan parameter tersebut.

Mengapa WebMCP Dibutuhkan?

AI agent sebenarnya sudah dapat berinteraksi dengan website tanpa WebMCP.

Agent dapat melakukan berbagai tindakan seperti:

• Membaca halaman.
• Mencari tombol.
• Mengisi formulir.
• Mengklik link.
• Membaca hasil.
• Berpindah halaman.

Pendekatan tersebut dapat disebut sebagai DOM actuation, yaitu ketika agent melakukan interaksi dengan elemen halaman seperti pengguna manusia.

Masalahnya, setiap langkah membutuhkan interpretasi.

Misalnya sebuah halaman memiliki tombol:

Proses Sekarang

Agent harus memahami apakah tombol tersebut digunakan untuk menyimpan data, membuat pesanan, mengirim formulir, melakukan pembayaran, atau berpindah halaman.

Dengan WebMCP, developer dapat menyediakan fungsi dengan tujuan yang lebih eksplisit.

Contohnya:

create_booking

Agent dapat memahami bahwa fungsi tersebut digunakan untuk membuat reservasi.

Bagaimana Cara Kerja WebMCP?

Secara sederhana, WebMCP bekerja melalui beberapa tahapan:

1. Developer membuat fungsi yang dapat digunakan oleh agent.
2. Fungsi tersebut didaftarkan sebagai tool.
3. Tool diberikan nama dan deskripsi.
4. Input tool didefinisikan menggunakan schema.
5. Agent menemukan tool yang tersedia.
6. Agent memilih tool yang sesuai dengan permintaan pengguna.
7. Agent mengirim parameter kepada tool.
8. Website menjalankan fungsi tersebut.
9. Hasil dikembalikan kepada agent.

Dengan pendekatan tersebut, agent memiliki cara yang lebih terstruktur untuk berinteraksi dengan kemampuan aplikasi.

Contoh Sederhana WebMCP

Bayangkan sebuah website toko online memiliki fungsi untuk mencari produk.

Developer dapat menyediakan tool:

search_product

dengan parameter:

{
  "keyword": "laptop",
  "category": "computer"
}

Ketika pengguna mengatakan:

"Carikan saya laptop untuk kebutuhan kerja."

AI agent dapat memilih tool pencarian produk yang tersedia.

Website kemudian dapat menjalankan fungsi tersebut dan mengembalikan hasil kepada agent.

WebMCP Memiliki Dua API Utama

WebMCP memiliki dua pendekatan utama untuk membuat tools:

• Imperative API
• Declarative API

Keduanya memiliki tujuan yang sama, tetapi cara implementasinya berbeda.

Apa Itu WebMCP Imperative API?

Imperative API digunakan untuk menentukan tools menggunakan JavaScript.

Pendekatan ini cocok ketika developer membutuhkan kontrol terhadap logika aplikasi, navigasi, form, state, atau fungsi dinamis lainnya.

Developer dapat mendaftarkan tool menggunakan document.modelContext.registerTool().

Contoh konsep implementasinya:

await document.modelContext.registerTool({
  name: 'get_order_status',
  description: 'Mencari status pesanan pelanggan',
  inputSchema: {
    type: 'object',
    properties: {
      orderId: {
        type: 'string'
      }
    },
    required: ['orderId']
  },
  execute: async ({ orderId }) => {
    // Logika mengambil status pesanan
  }
});

Tool tersebut memiliki nama, deskripsi, schema input, dan fungsi untuk menjalankan proses.

Apa Itu document.modelContext?

document.modelContext merupakan antarmuka yang digunakan untuk mengelola tools WebMCP pada dokumen.

Beberapa fungsi yang berkaitan dengan mekanisme tersebut antara lain:

registerTool()
getTools()
executeTool()

registerTool() digunakan untuk mendaftarkan tool.

getTools() digunakan untuk mendapatkan daftar tools yang tersedia.

executeTool() digunakan untuk menjalankan tool yang telah tersedia.

Apa Itu WebMCP Declarative API?

Declarative API menggunakan HTML untuk membuat tool WebMCP.

Pendekatan ini cocok untuk fungsi yang dapat direpresentasikan menggunakan form HTML.

Contoh sederhananya:

<form
  toolname="search_product"
  tooldescription="Mencari produk berdasarkan kata kunci">

  <label for="keyword">Produk</label>

  <input
    id="keyword"
    name="keyword"
    type="text">

  <button type="submit">
    Cari Produk
  </button>

</form>

Dengan pendekatan deklaratif, struktur HTML dapat digunakan untuk membantu mendefinisikan fungsi yang dapat digunakan agent.

Perbedaan Imperative API dan Declarative API

Jika aplikasi membutuhkan logika yang kompleks, Imperative API memberikan fleksibilitas lebih besar. Jika fungsi dapat direpresentasikan melalui form HTML, Declarative API dapat menjadi pendekatan yang lebih sederhana.

WebMCP dan JSON Schema

Salah satu komponen penting WebMCP adalah JSON Schema.

Schema membantu mendefinisikan data yang dapat diterima oleh sebuah tool.

Misalnya tool:

search_available_cars

dapat memiliki struktur input:

{
  "type": "object",
  "properties": {
    "location": {
      "type": "string"
    },
    "pickup_date": {
      "type": "string"
    },
    "return_date": {
      "type": "string"
    }
  },
  "required": [
    "location",
    "pickup_date",
    "return_date"
  ]
}

Dengan schema yang jelas, agent memiliki informasi mengenai data yang harus diberikan kepada tool.

WebMCP untuk E-Commerce

E-commerce merupakan salah satu contoh penggunaan WebMCP yang mudah dipahami.

Sebuah toko online dapat menyediakan tools seperti:

search_product
filter_products
get_product_detail
check_stock
add_to_cart
checkout

Ketika pengguna meminta produk tertentu, agent dapat menggunakan tool pencarian.

Jika pengguna ingin mengetahui ketersediaan produk, agent dapat menggunakan tool pengecekan stok.

Untuk tindakan seperti pembelian atau pembayaran, developer tetap perlu menerapkan mekanisme konfirmasi dan keamanan yang sesuai.

WebMCP untuk Website Travel

Website travel memiliki banyak proses yang dapat dibuat lebih terstruktur.

• Mencari penerbangan.
• Mencari hotel.
• Memilih tanggal.
• Memilih destinasi.
• Mencari perjalanan.
• Membuat reservasi.

Agent dapat menggunakan tools yang disediakan website untuk membantu pengguna menjalankan proses tersebut.

WebMCP untuk Website Rental Mobil

Website rental mobil juga dapat menggunakan konsep WebMCP.

Misalnya tersedia tools:

search_available_cars
get_car_detail
calculate_rental_price
create_booking

Ketika pengguna mengatakan:

"Saya ingin mencari mobil untuk disewa selama tiga hari."

Agent dapat menggunakan tool pencarian kendaraan yang tersedia.

Jika pengguna ingin melakukan reservasi, proses tersebut dapat diteruskan melalui tool yang memiliki kontrol keamanan tambahan.

WebMCP untuk Customer Service

WebMCP juga dapat digunakan untuk membantu proses customer service.

Contohnya website menyediakan:

search_help_article
create_support_ticket
check_ticket_status

Agent dapat membantu pengguna mencari informasi atau menyiapkan tiket layanan pelanggan berdasarkan informasi yang diberikan.

WebMCP untuk Debugging Website

WebMCP tidak hanya berguna untuk website konsumen.

Teknologi ini juga dapat digunakan pada tools developer.

Misalnya dashboard developer memiliki fungsi:

run_diagnostics
check_configuration
generate_report
clear_cache

Agent dapat menggunakan fungsi tersebut untuk membantu proses troubleshooting.

WebMCP vs DOM Actuation

WebMCP dan DOM actuation memiliki pendekatan berbeda.

WebMCP tidak berarti DOM actuation menjadi tidak berguna. Keduanya dapat digunakan untuk kebutuhan interaksi agent yang berbeda.

Apakah WebMCP Sama dengan API?

Tidak.

WebMCP bukan pengganti REST API atau GraphQL.

WebMCP dapat berada di atas aplikasi web yang sudah memiliki API.

Contoh arsitektur:

Pengguna
    ↓
AI Agent
    ↓
WebMCP Tool
    ↓
Web Application
    ↓
REST API / Backend
    ↓
Database

Backend tetap menangani proses bisnis dan database. WebMCP membantu mengekspos kemampuan aplikasi kepada agent secara lebih terstruktur.

WebMCP dan SEO

WebMCP bukan pengganti SEO.

SEO berfokus pada visibilitas dan pemahaman konten website dalam mesin pencari.

WebMCP memiliki fokus berbeda, yaitu menyediakan kemampuan interaktif website kepada AI agent.

Keempat pendekatan tersebut memiliki fungsi yang berbeda dan dapat digunakan sesuai kebutuhan website.

WebMCP dan AEO

AEO atau Answer Engine Optimization berhubungan dengan penyusunan informasi agar dapat digunakan untuk memberikan jawaban.

WebMCP lebih berkaitan dengan tindakan.

Gambaran sederhananya:

AEO
Pertanyaan
    ↓
Jawaban


WebMCP
Permintaan
    ↓
Tool
    ↓
Action

AEO membantu menjawab pertanyaan seperti:

"Apa saja paket website yang tersedia?"

WebMCP lebih relevan untuk permintaan seperti:

"Mulai proses pemesanan paket website."

WebMCP dan GEO

GEO atau Generative Engine Optimization berfokus pada bagaimana informasi website dapat dipahami dan digunakan oleh sistem generatif.

WebMCP memiliki fokus berbeda karena menyediakan kemampuan aplikasi dalam bentuk tools.

Oleh karena itu, WebMCP tidak sebaiknya dianggap sebagai pengganti GEO.

Keamanan WebMCP

Keamanan menjadi aspek penting karena tool dapat melakukan tindakan nyata pada aplikasi.

Developer harus membedakan tool yang hanya membaca data dengan tool yang mengubah data.

Contoh tool read-only:

get_order_status

Contoh tool yang dapat melakukan tindakan:

create_booking
delete_order
process_payment

Tool yang memiliki konsekuensi nyata membutuhkan kontrol yang lebih ketat.

Developer perlu mempertimbangkan:

• Authentication.
• Authorization.
• Validasi input.
• Permission.
• Konfirmasi pengguna.
• Rate limiting.
• Logging.
• Audit trail.

WebMCP dan Iframe Lintas Origin

WebMCP juga memperhatikan keamanan pada iframe lintas origin.

Jika aplikasi membutuhkan akses WebMCP pada iframe lintas origin, developer perlu memberikan izin secara eksplisit melalui mekanisme Permissions Policy.

Hal tersebut membantu membatasi origin mana yang dapat menggunakan kemampuan tools tertentu.

WebMCP dan Origin Isolation

WebMCP menggunakan mekanisme keamanan berbasis origin untuk memastikan konteks dokumen tetap konsisten selama penggunaan tool.

Developer perlu memahami konsep origin ketika membangun aplikasi yang menggunakan iframe atau komponen lintas domain.

Apakah WebMCP Sudah Bisa Digunakan?

WebMCP sudah dapat digunakan untuk eksperimen dan pengembangan prototype.

Namun, WebMCP masih merupakan teknologi yang sedang dikembangkan dan belum dapat dianggap sebagai standar web final yang sepenuhnya stabil.

Chrome menyediakan origin trial untuk WebMCP serta mekanisme pengujian lokal melalui Chrome Flags.

Untuk pengujian lokal, developer dapat membuka:

chrome://flags/#enable-webmcp-testing

Setelah fitur diaktifkan, browser perlu dimulai kembali.

Keterbatasan WebMCP

Sebelum menggunakan WebMCP, developer perlu memahami beberapa keterbatasannya.

• Masih dalam tahap pengembangan.
• API dapat berubah.
• Memerlukan dukungan client yang sesuai.
• Tidak menggantikan API backend.
• Tidak otomatis membuat website aman.
• Website tetap membutuhkan frontend dan backend yang baik.
• Tool tetap membutuhkan validasi dan authorization.

Praktik Terbaik Membuat Tool WebMCP

Developer sebaiknya tidak hanya membuat tool yang dapat dipanggil. Tool juga harus mudah dipahami dan aman.

Gunakan Nama Tool yang Jelas

Gunakan nama seperti:

search_product
check_order_status
create_booking

Hindari nama yang terlalu umum seperti:

processData
runFunction
doAction

Buat Deskripsi yang Spesifik

Deskripsi harus menjelaskan fungsi tool dan kapan tool tersebut digunakan.

Gunakan Schema Input yang Jelas

Parameter sebaiknya memiliki tipe data, deskripsi, batasan, dan nilai yang diperbolehkan jika diperlukan.

Bedakan Tool Read-Only dan Tool Transaksional

Tool untuk membaca katalog produk berbeda dengan tool untuk melakukan pembayaran atau menghapus data.

Validasi Input di Backend

Schema WebMCP tidak boleh menjadi satu-satunya lapisan validasi. Backend tetap harus melakukan validasi dan authorization.

Gunakan Satu Tool untuk Satu Tugas

Tool sebaiknya memiliki tujuan yang jelas.

Contoh:

search_product
get_product_detail
check_stock
add_to_cart

Pendekatan tersebut lebih jelas dibandingkan membuat satu fungsi besar seperti:

manage_store()

Tool yang memiliki fungsi spesifik membantu agent memilih kemampuan yang sesuai dengan permintaan pengguna.

WebMCP untuk Website WordPress

Website WordPress juga dapat menjadi kandidat untuk eksperimen WebMCP jika memiliki fungsi interaktif.

Contohnya:

• Form pemesanan.
• Form konsultasi.
• Reservasi.
• Katalog produk.
• Customer support.
• Form pendaftaran.

Developer dapat mempertimbangkan bagaimana fungsi tersebut dapat diekspos sebagai tools.

Namun, WebMCP bukan fitur yang otomatis aktif hanya karena website menggunakan WordPress. Implementasi tetap membutuhkan pengembangan frontend dan JavaScript.

WebMCP untuk Website Bisnis

Website bisnis dapat menggunakan konsep WebMCP ketika memiliki workflow yang dapat dilakukan secara digital.

Misalnya website jasa menyediakan:

get_service_list
get_service_price
request_consultation
submit_contact_form

AI agent dapat membantu pengguna memahami layanan dan meneruskan proses ke fungsi website yang tersedia.

Untuk tindakan yang menghasilkan transaksi atau perubahan data, website tetap membutuhkan authentication, authorization, dan konfirmasi yang sesuai.

WebMCP dan Masa Depan Website

WebMCP menunjukkan perubahan penting dalam cara website dapat dirancang.

Selama bertahun-tahun, developer terutama memikirkan dua kelompok pengguna:

• Manusia.
• Mesin pencari.

Dengan perkembangan AI agent, muncul kebutuhan baru untuk menyediakan kemampuan aplikasi yang dapat digunakan secara terstruktur oleh agent.

Website masa depan berpotensi tidak hanya menjadi halaman yang dibaca manusia, tetapi juga menjadi aplikasi yang dapat digunakan AI agent untuk menyelesaikan tugas tertentu.

Apakah WebMCP Akan Menggantikan Website Tradisional?

Tidak.

WebMCP lebih tepat dipahami sebagai lapisan tambahan untuk website.

Website tetap memiliki antarmuka untuk manusia.

WebMCP memberikan jalur interaksi tambahan untuk AI agent.

Konsepnya dapat digambarkan sebagai berikut:

Manusia
   ↓
UI Website
   ↓
Web Application


AI Agent
   ↓
WebMCP Tools
   ↓
Web Application

Keduanya dapat menggunakan aplikasi yang sama dengan jalur interaksi berbeda.

Hubungan WebMCP dengan SEO, AEO, dan GEO

Perkembangan WebMCP tidak berarti SEO menjadi tidak penting.

Sebuah website tetap membutuhkan struktur konten, performa, aksesibilitas, dan informasi yang jelas.

Website modern dapat memiliki beberapa lapisan optimasi dan interaksi:

SEO
↓
Membantu website ditemukan

AEO
↓
Membantu informasi digunakan untuk menjawab pertanyaan

GEO
↓
Mempersiapkan informasi untuk sistem generatif

WebMCP
↓
Menyediakan fungsi yang dapat digunakan AI agent

Dengan demikian, WebMCP dapat menjadi salah satu bagian dari evolusi web menuju interaksi yang lebih agentic.

Bagaimana Developer Harus Mulai Mempersiapkan Website?

Developer tidak perlu langsung mengubah seluruh website menjadi aplikasi WebMCP.

Langkah yang lebih realistis adalah memperbaiki fondasi aplikasi terlebih dahulu.

1. Gunakan HTML semantik.
2. Buat form dengan struktur yang jelas.
3. Gunakan label input yang tepat.
4. Bangun fungsi aplikasi secara modular.
5. Gunakan API backend yang terstruktur.
6. Pastikan authentication dan authorization berjalan baik.
7. Bedakan fungsi read-only dan fungsi transaksional.
8. Dokumentasikan fungsi aplikasi.
9. Pelajari WebMCP melalui prototype.
10. Uji tools menggunakan AI agent.

Kesimpulan

WebMCP adalah standar web yang diusulkan untuk membantu website menyediakan tools terstruktur bagi AI agent.

Teknologi ini memungkinkan developer menjelaskan kemampuan aplikasi secara lebih jelas sehingga agent tidak selalu harus menebak fungsi website berdasarkan tombol, input, dan struktur DOM.

WebMCP memiliki dua pendekatan utama, yaitu Imperative API berbasis JavaScript dan Declarative API berbasis HTML.

Teknologi ini dapat digunakan untuk berbagai skenario seperti e-commerce, website travel, rental mobil, customer service, reservasi, aplikasi SaaS, dashboard, dan debugging aplikasi.

WebMCP bukan pengganti REST API, SEO, AEO, GEO, atau website tradisional. WebMCP lebih tepat dipahami sebagai lapisan yang membantu AI agent menggunakan kemampuan aplikasi web secara terstruktur.

Namun, WebMCP masih berada dalam tahap pengembangan sehingga developer perlu memperhatikan perubahan spesifikasi dan API.

Bagi developer web, mempelajari WebMCP dapat menjadi langkah untuk memahami bagaimana website dapat berinteraksi dengan AI agent dalam perkembangan agentic web.