WebMCP ontrafeld: je website klaar voor agents in e-commerce en CMS

AI-agents worden een echt onderdeel van de manier waarop mensen met het web omgaan. Ze zoeken naar producten, vullen formulieren in, boeken afspraken en ronden aankopen af, allemaal door namens jou websites te bezoeken. Maar er is een fundamenteel probleem: websites zijn gebouwd voor mensen, niet voor machines.

Een AI-agent die naar je e-commercewebsite kijkt, ziet een wirwar van divs, knoppen en formulieren. Hij moet raden wat elk element doet, wat leidt tot trage en foutgevoelige interacties. WebMCP lost dit op door je in staat te stellen agents precies te vertellen wat je website kan, in een taal die ze begrijpen.

WebMCP is een nieuwe browsernorm (momenteel in origin trial, Chrome 149+) waarmee je de functionaliteit van je website kunt blootstellen als gestructureerde "tools" voor AI-agents. Geen backendwijzigingen, geen aparte API's. Alleen je bestaande website, agentvriendelijk gemaakt.

In dit artikel leggen we uit wat WebMCP is, wat het mogelijk maakt voor e-commerce- en CMS-sites, en hoe je eraan kunt beginnen, of je nu ontwikkelaar of website-eigenaar bent.

Wat is WebMCP?

WebMCP (Web Model Context Protocol) is een voorgestelde W3C-standaard die twee complementaire API's biedt om tools op een webpagina te registreren:

• De imperatieve API: registratie van tools in JavaScript via document.modelContext.registerTool()
• De declaratieve API: annotaties met HTML-attributen op bestaande <form>-elementen (toolname, tooldescription, toolparamdescription)

Beide API's dienen hetzelfde doel: ze maken de mogelijkheden van je website vindbaar en uitvoerbaar voor AI-agents die in de browser draaien (de ingebouwde agent van Chrome, browserextensies of andere agentplatforms).

Hoe het werkt

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

Het belangrijkste verschil met traditionele backendintegraties (zoals MCP-servers) is dat WebMCP-tools in het browsertabblad draaien, op de pagina die de gebruiker al bekijkt. De agent werkt op de live DOM, in de sessie van de gebruiker, met volledige toegang tot cookies, authenticatiestatus en realtime data.

Wat WebMCP mogelijk maakt voor e-commerce

Zoeken en productontdekking

In plaats van dat een agent door honderden productpagina's scrolt om te vinden wat bij de vraag van een gebruiker past, laat een goed gedefinieerde search_products-tool de agent rechtstreeks je catalogus doorzoeken:

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

Een gebruiker kan dan zeggen: "Zoek biologische babyvoeding onder €5 voor mijn kind van 1 jaar", en de agent roept je tool direct aan en retourneert gestructureerde resultaten die je interface al kan weergeven.

Afrekenen en aankoopprocessen

WebMCP-tools kunnen agents door complexe afrekenprocessen leiden:

Dit is vooral waardevol voor terugkerende aankopen. Een gebruiker die vraagt "Bestel de koffiebonen die ik vorige maand heb gekocht opnieuw" kan worden geholpen door een get_order_history()-tool die eerdere bestellingen retourneert, gevolgd door add_to_cart() en submit_order().

Klantenondersteuning

Complexe ondersteuningsprocessen (garantieclaims, retouren, omruilingen) vereisen vaak het doorlopen van meerdere pagina's en formulieren. WebMCP-tools kunnen:

• Naar de juiste ondersteuningspagina navigeren (start_claim_process())
• Bekende velden vooraf invullen (populate_product_details())
• Het ingevulde formulier verzenden (submit_claim())

De gebruiker ziet het formulier in realtime op het scherm worden ingevuld, wat vertrouwen en transparantie behoudt.

Wat WebMCP mogelijk maakt voor CMS

Content zoeken en ophalen

Een site op basis van een CMS kan zoeken en filteren als tools blootstellen:

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Formuliergebaseerde interacties

CMS-sites hebben vaak contactformulieren, nieuwsbriefinschrijvingen, evenementregistraties en boekingssystemen. Met de declaratieve API kun je deze omzetten in WebMCP-tools met slechts een paar HTML-attributen, zonder JavaScript.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

  <button type="submit">Register</button>
</form>

Wanneer een agent deze tool aanroept, focust de browser het formulier, vult de velden in en verzendt het met toolautosubmit automatisch. De gebruiker ziet alles op het scherm gebeuren.

Content filteren en navigeren

Voor sites met grote contentcollecties (nieuwsportalen, catalogi, documentatie) laten filteringstools agents resultaten nauwkeurig verfijnen:

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Declaratief vs. imperatief: welke gebruik je?

WebMCP biedt twee API's. Ze zijn niet concurrerend; ze zijn complementair. Zo kies je.

De declaratieve API

Wat het is: je voegt HTML-attributen toe aan bestaande <form>-elementen. Dat is alles. Geen JavaScript.

Het beste voor:

• Formulieren die al bestaan en werken voor menselijke gebruikers
• Contactformulieren, registratie, boeking, zoekformulieren
• Sites gebouwd met CMS-platforms die formulier-HTML genereren
• Snelle winst: je kunt WebMCP-ondersteuning in enkele minuten aan een bestaande site toevoegen

Voordelen:

• Geen JavaScript vereist
• Werkt met elk HTML-formulier
• Eenvoudig te onderhouden naast je bestaande markup
• Uitstekend voor eenvoudige, gestructureerde gegevensverzameling

Nadelen:

• Beperkt tot formuliergebaseerde interacties
• Minder controle over de uitvoeringslogica
• Kan tools niet dynamisch registreren/deregistreren op basis van de paginastatus
• Schemageneratie is impliciet (op basis van de formulierstructuur)

Gebruik wanneer: je primaire behoefte is om formulieren toegankelijk te maken voor agents. Als de belangrijkste interacties van je site formulierinzendingen zijn (contact, boeking, zoeken, registratie), begin dan hier.

De imperatieve API

Wat het is: je roept document.modelContext.registerTool() aan vanuit JavaScript en definieert tools met namen, beschrijvingen, JSON-schema's en uitvoeringsfuncties.

Het beste voor:

• Complexe interacties buiten formulieren (productzoekopdracht, winkelwagenbeheer, filtering)
• Dynamische toolregistratie (tools die verschijnen/verdwijnen op basis van context)
• Tools die API's moeten aanroepen, gegevens moeten transformeren of gestructureerde resultaten moeten retourneren
• Sites die fijnmazige controle over het gedrag van de agent nodig hebben

Voordelen:

• Volledige controle over het gedrag van tools en retourwaarden
• Dynamische registratie en deregistratie
• Kan backend-API's aanroepen, gegevens transformeren, JSON retourneren
• Rijke JSON Schema-ondersteuning (enums, types, validatie)
• Ondersteuning voor cross-origin iframes met exposedTo

Nadelen:

• Vereist een JavaScript-implementatie
• Meer ontwikkelinspanning
• Je moet het levenscyclusbeheer van tools regelen

Gebruik wanneer: je interacties verder gaan dan eenvoudige formulierinzendingen: e-commerce productcatalogi, dynamische filtering, workflows in meerdere stappen, of elk scenario waarin je gestructureerde gegevens moet retourneren na de uitvoering van een tool.

Beslissingsmatrix

Kun je beide gebruiken?

Absoluut. Een goed ontworpen site kan de declaratieve API gebruiken voor statische formulieren (contact, nieuwsbrief) en de imperatieve API voor dynamische interacties (productzoekopdracht, winkelwagenbeheer). Ze bestaan naast elkaar op dezelfde pagina zonder conflict.

WebMCP vs. MCP: geen concurrenten, maar partners

Het is belangrijk om te begrijpen dat WebMCP geen vervanging is van het Model Context Protocol (MCP). Ze lossen verschillende problemen op:

Zie het zo: MCP is je backend-servicelaag: het regelt de kernbedrijfslogica, het ophalen van gegevens en achtergrondtaken. WebMCP is je frontendlaag: het verbindt agents rechtstreeks met de website die de gebruiker bekijkt, wat contextuele interacties in de browser mogelijk maakt.

De meest effectieve agentische applicaties gebruiken beide: MCP voor het zware werk (data, authenticatie, bedrijfslogica) en WebMCP voor de interactieve ervaring (UI-aansturing, realtime feedback, workflows met de mens in de lus).

Aan de slag

Beschikbaarheid

WebMCP is momenteel beschikbaar in Chrome 149+ via een origin trial. Om deel te nemen:

1. Registreer je voor de origin trial op het origin trial-portaal van Chrome
2. Voeg de origin trial-metatag toe aan je HTML
3. Implementeer je tools met een van beide API's

Voor lokale ontwikkeling kun je WebMCP inschakelen via chrome://flags/#enable-webmcp-testing.

Beveiliging

WebMCP-tools zijn afgeschermd door:

• Origin-isolatie: tools werken alleen in origin-geïsoleerde documenten
• Permissions Policy: het tools-beleid staat standaard op self, waardoor tools in cross-origin iframes worden uitgeschakeld tenzij expliciet toegestaan met allow="tools"

Tools zijn kortstondig: ze bestaan alleen zolang de pagina open is. Zodra de gebruiker wegnavigeert of het tabblad sluit, verliest de agent de toegang.

Best practices

1. Eén tool, één taak: elke tool moet een enkele, goed gedefinieerde taak uitvoeren. Vermijd overlappende tools.
2. Duidelijke naamgeving: gebruik werkwoorden die precies beschrijven wat er gebeurt (create-event in plaats van start-event-creation-process).
3. Positieve beschrijvingen: beschrijf wat een tool kan doen, niet wat hij niet kan doen.
4. Accepteer ruwe invoer: vraag de agent niet om berekeningen uit te voeren of strings op te maken. Laat de tool dat regelen.
5. Valideer strikt in code, losjes in het schema: schemabeperkingen helpen, maar zijn niet gegarandeerd.
6. Beheer de levenscyclus van tools: registreer tools wanneer ze relevant zijn, deregistreer ze wanneer dat niet meer het geval is.
7. Vertrouw de agent: beschrijf mogelijkheden, schrijf geen exacte processen voor.

Praktijkvoorbeelden

Google heeft verschillende demo's gepubliceerd die WebMCP in actie laten zien:

• Pizza Maker (imperatief): een pizza bestellen met gelaagde aanpassing
• Flight Search (imperatief, React): vluchten zoeken met complexe filters
• Le Petit Bistro (declaratief): reserveringsformulier voor een restaurant met HTML-annotaties

Deze demo's tonen de twee API's naast elkaar en zijn een uitstekend startpunt voor experimenten.

Wat nu?

WebMCP is nog volop in ontwikkeling. De specificatie wordt verfijnd op GitHub en de implementatie van Chrome kan veranderen. Angular heeft ook experimentele ondersteuning voor WebMCP-toolregistratie.

Voor ontwikkelaars die e-commerceplatforms, CMS-oplossingen of elke webapplicatie bouwen waar AI-agents moeten interageren met pagina's voor gebruikers, vertegenwoordigt WebMCP een fundamentele verschuiving: in plaats van dat agents raden hoe je site werkt, vertelt je site hun precies wat hij kan.

Het resultaat is snellere, betrouwbaardere en transparantere interacties, met de gebruiker altijd aan het roer.

Dit artikel is gebaseerd op de officiële Chrome-ontwikkelaarsdocumentatie, de W3C WebMCP-specificatie en de WebMCP-demo's van Google. WebMCP is een voorgestelde standaard en kan veranderen.