Cara Menambahkan WebMCP ke Aplikasi Next.js Anda
Agen AI sering kali kesulitan memahami aplikasi web. Mereka melakukan scraping pada DOM dan menebak fungsi tombol. Hal ini menyebabkan kesalahan dan halusinasi.
WebMCP mengatasi masalah ini. Ini adalah standar W3C yang menambahkan API modelContext ke browser. Alih-alih menebak, aplikasi Next.js Anda memberi tahu agen secara tepat fungsi apa saja yang dapat dijalankan.
WebMCP vs Anthropic MCP
Anthropic MCP berjalan di server. Ia menggunakan JSON-RPC untuk terhubung ke database atau API. Ia berada di luar browser.
WebMCP berjalan di tab browser. Ia mendaftarkan tool secara lokal. Ia menggunakan sesi pengguna yang sudah ada. Tidak diperlukan autentikasi atau backend tambahan.
Keduanya bekerja bersama. Anda dapat menggunakan MCP untuk tugas backend dan WebMCP untuk interaksi frontend.
Dua cara untuk mengekspos tool:
HTML Forms: Tambahkan atribut toolname dan tooldescription ke dalam form Anda. Agen dapat melihat tool dan parameternya tanpa JavaScript apa pun. Gunakan ini untuk pencarian dan filter.
JavaScript: Gunakan API navigator.modelContext untuk logika dinamis. Ini sangat cocok untuk alur multi-langkah.
Implementasi di Next.js
Instal polyfill untuk dukungan browser: npm install @mcp-b/global @mcp-b/react-webmcp
Buat WebMCPProvider untuk menginisialisasi polyfill di layout Anda.
Gunakan hook useWebMCP di komponen client Anda. Hook ini menangani pendaftaran tool dan pembersihan secara otomatis.
Contoh pengaturan tool:
useWebMCP({
name: 'searchProducts',
description: 'Search the product catalog.',
inputSchema: z.object({
query: z.string(),
category: z.string().optional(),
}),
execute: async ({ query, category }) => {
const res = await fetch(/api/products?q=${query});
return res.json();
},
});
Praktik Terbaik
- Gunakan HTTPS. WebMCP memerlukan koneksi aman di lingkungan produksi.
- Jaga jumlah tool tetap rendah. Terlalu banyak tool akan membengkakkan konteks AI dan memperlambat penalaran. Tetaplah di bawah 50 tool per halaman.
- Berikan deskripsi yang kaya. Agen mengandalkan string ini untuk memahami kapan harus menggunakan sebuah tool.
- Gunakan service layer. Jangan mengandalkan state React di dalam handler tool. Gunakan fungsi biasa untuk menghindari data usang (stale data).
Pengujian
Buka Chrome 146 atau yang lebih baru. Aktifkan flag WebMCP di chrome://flags. Gunakan ekstensi Model Context Tool Inspector untuk menguji tool Anda tanpa agen AI.
WebMCP adalah masa depan penjelajahan web berbasis agen (agentic web browsing). Mulailah mengimplementasikannya sekarang agar Anda siap saat browser mengaktifkannya secara default.
Sumber: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp