Cara Menambah WebMCP ke dalam Aplikasi Next.js Anda

Ejen AI sering bergelut untuk memahami aplikasi web. Mereka melakukan scraping pada DOM dan meneka fungsi butang. Ini membawa kepada ralat dan halusinasi.

WebMCP menyelesaikan masalah ini. Ia merupakan piawaian W3C yang menambah API modelContext kepada pelayar. Daripada meneka, aplikasi Next.js anda memberitahu ejen dengan tepat fungsi yang boleh dijalankannya.

WebMCP lwn Anthropic MCP

Anthropic MCP berjalan pada pelayan. Ia menggunakan JSON-RPC untuk menyambung ke pangkalan data atau API. Ia berada di luar pelayar.

WebMCP berjalan dalam tab pelayar. Ia mendaftarkan alatan secara tempatan. Ia menggunakan sesi sedia ada pengguna. Tiada pengesahan (auth) atau backend tambahan diperlukan.

Kedua-duanya berfungsi bersama. Anda boleh menggunakan MCP untuk tugasan backend dan WebMCP untuk interaksi frontend.

Dua cara untuk mendedahkan alatan:

  • HTML Forms: Tambah atribut toolname dan tooldescription pada borang anda. Ejen dapat melihat alatan dan parameter tanpa sebarang JavaScript. Gunakan ini untuk carian dan penapis.

  • JavaScript: Gunakan API navigator.modelContext untuk logik dinamik. Ini adalah yang terbaik untuk aliran berbilang langkah.

Implementasi dalam Next.js

  1. Pasang polyfill untuk sokongan pelayar: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Cipta WebMCPProvider untuk memulakan (initialize) polyfill dalam susun atur (layout) anda.

  3. Gunakan hook useWebMCP dalam komponen klien anda. Hook ini mengendalikan pendaftaran alatan dan pembersihan (cleanup) secara automatik.

Contoh tetapan alatan:

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();
  },
});

Amalan Terbaik

  • Gunakan HTTPS. WebMCP memerlukan sambungan selamat dalam persekitaran produksi.
  • Pastikan jumlah alatan adalah rendah. Terlalu banyak alatan akan membebankan konteks AI dan melambatkan penaakulan. Kekal di bawah 50 alatan bagi setiap halaman.
  • Berikan huraian yang terperinci. Ejen bergantung pada rentetan (strings) ini untuk memahami bila perlu menggunakan sesuatu alatan.
  • Gunakan lapisan perkhidmatan (service layer). Jangan bergantung pada keadaan (state) React di dalam pengendali alatan. Gunakan fungsi biasa untuk mengelakkan data lapuk.

Pengujian

Buka Chrome 146 atau yang lebih baharu. Aktifkan bendera (flag) WebMCP di chrome://flags. Gunakan sambungan (extension) Model Context Tool Inspector untuk menguji alatan anda tanpa ejen AI.

WebMCP adalah masa depan pelayaran web ejen (agentic web browsing). Mula laksanakan sekarang supaya anda bersedia apabila pelayar mengaktifkannya secara lalai.

Sumber: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp