How to Add WebMCP to Your Next.js App

AI-agenten hebben vaak moeite om webapplicaties te begrijpen. Ze scrapen de DOM en raden wat knoppen doen. Dit leidt tot fouten en hallucinaties.

WebMCP lost dit op. Het is een W3C-standaard die een modelContext API aan browsers toevoegt. In plaats van te gokken, vertelt je Next.js-app de agent precies welke functies hij kan uitvoeren.

WebMCP vs Anthropic MCP

Anthropic MCP draait op de server. Het gebruikt JSON-RPC om verbinding te maken met databases of API's. Het bevindt zich buiten de browser.

WebMCP draait in het browsertabblad. Het registreert tools lokaal. Het maakt gebruik van de bestaande sessie van de gebruiker. Er is geen extra authenticatie of backend nodig.

Ze werken samen. Je kunt MCP gebruiken voor backend-taken en WebMCP voor frontend-interacties.

Twee manieren om tools te exposeren:

  • HTML-formulieren: Voeg toolname- en tooldescription-attributen toe aan je formulieren. De agent ziet de tool en de parameters zonder enige JavaScript. Gebruik dit voor zoekopdrachten en filters.

  • JavaScript: Gebruik de navigator.modelContext API voor dynamische logica. Dit is het beste voor processen met meerdere stappen.

Implementation in Next.js

  1. Installeer de polyfill voor browserondersteuning: npm install @mcp-b/global @mcp-b/react-webmcp

  2. Maak een WebMCPProvider aan om de polyfill te initialiseren in je layout.

  3. Gebruik de useWebMCP-hook in je client-componenten. Deze hook regelt de registratie en het opruimen van tools automatisch.

Voorbeeld van een tool-setup:

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

Best Practices

  • Gebruik HTTPS. WebMCP vereist een beveiligde verbinding in productie.
  • Houd het aantal tools laag. Te veel tools maken de AI-context te groot en vertragen het redeneervermogen. Blijf onder de 50 tools per pagina.
  • Zorg voor uitgebreide beschrijvingen. Agenten vertrouwen op deze strings om te begrijpen wanneer ze een tool moeten gebruiken.
  • Gebruik een service-laag. Vertrouw niet op React-state binnen tool-handlers. Gebruik gewone functies om verouderde data te voorkomen.

Testing

Open Chrome 146 of nieuwer. Schakel de WebMCP-flag in chrome://flags in. Gebruik de Model Context Tool Inspector-extensie om je tools te testen zonder een AI-agent.

WebMCP is de toekomst van agentic web browsing. Begin nu met de implementatie, zodat je klaar bent wanneer browsers dit standaard inschakelen.

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