Wat is WebMCP en waarom heeft je website het nodig

De manier waarop AI-agents met websites omgaan staat op het punt te veranderen. Op dit moment zijn agents als ChatGPT, Claude en Gemini aangewezen op screen scraping, screenshot-analyse en brute-force formulierinzendingen. Ze bootsen in feite malware-gedrag na om met webcontent te interageren. Niet bepaald ideaal. WebMCP, een nieuw W3C-voorstel gesteund door Google en Microsoft, pakt dat aan. Het geeft websites een standaardmanier om hun functionaliteit als gestructureerde tools beschikbaar te stellen die elke AI-agent kan begrijpen en aanroepen.

Wat is WebMCP?

WebMCP (Web Model Context Protocol) is een JavaScript API, voorgesteld via de W3C Web Machine Learning Community Group. Het stelt webapplicaties in staat hun functionaliteit als gestructureerde tools aan te bieden aan AI-agents. In de praktijk maakt het van elke website een MCP-server die volledig client-side in de browser draait.

De spec is mede geschreven door mensen van Google en Microsoft, en Chrome 146 bevat al een vroege implementatie achter een feature flag. Het idee is simpel maar krachtig: in plaats van dat agents moeten gokken hoe ze met je website moeten omgaan door screenshots en DOM-elementen te parsen, vertel je ze precies welke acties beschikbaar zijn, welke parameters ze nodig hebben en wat ze terug kunnen verwachten.

Waarom WebMCP ertoe doet

Op dit moment doen AI-agents het op de moeilijke manier. Een typische "browser use"-sessie: de agent maakt een screenshot, stuurt die naar een vision-model, identificeert UI-elementen, klikt op knoppen, wacht op page loads, en herhaalt. Vaak tientallen keren voor één enkele taak. Het is traag, duur, onbetrouwbaar en vrijwel niet te onderscheiden van bot-misbruik.

WebMCP vervangt dat hele circus door één gestructureerde tool-aanroep. Een e-commercesite die een searchProducts-tool registreert, laat de agent één functieaanroep doen en gestructureerde JSON terug ontvangen. Geen geklik door filterdropdowns, geen scraping van gepagineerde resultaten.

Zoals Christian Heilmann het verwoordde: met WebMCP zijn "agents eersteklas burgers van het world wide web geworden." In plaats van te vechten tegen webinfrastructuur, kunnen agents ermee samenwerken. En jij als website-eigenaar behoudt volledige controle over wat er beschikbaar is.

Twee API's: declaratief vs imperatief

WebMCP biedt twee manieren om tools beschikbaar te stellen aan AI-agents. Je kunt er één of beide gebruiken, afhankelijk van wat je nodig hebt.

De declaratieve API: HTML-attributen op formulieren

De declaratieve benadering is de makkelijkste manier om te beginnen. Je plakt een paar attributen op je bestaande HTML-formulieren, en de browser vertaalt ze automatisch naar gestructureerde tools die agents kunnen ontdekken en aanroepen. Geen JavaScript nodig.

<form
  id="search-flights"
  toolname="searchFlights"
  tooldescription="Search for available flights by origin, destination, and date"
  toolautosubmit="true"
>
  <label for="origin">From</label>
  <input
    type="text"
    id="origin"
    name="origin"
    required
    toolparamdescription="Departure airport code (e.g. AMS, JFK, LHR)"
  />

  <label for="destination">To</label>
  <input
    type="text"
    id="destination"
    name="destination"
    required
    toolparamdescription="Arrival airport code (e.g. CDG, SFO, NRT)"
  />

  <label for="date">Date</label>
  <input
    type="date"
    id="date"
    name="date"
    required
    toolparamdescription="Departure date in YYYY-MM-DD format"
  />

  <button type="submit">Search Flights</button>
</form>

De belangrijkste attributen zijn:

• toolname - Een unieke identifier voor de tool (bijv. searchFlights)
• tooldescription - Een uitleg in natuurlijke taal van wat de tool doet, zodat agents kunnen bepalen wanneer ze deze moeten gebruiken
• toolparamdescription - Beschrijvingen per invoerveld zodat agents precies weten welke waarde ze moeten invullen
• toolautosubmit - Optioneel attribuut dat de agent toestaat het formulier automatisch te verzenden na invulling

De browser converteert dit naar een tooldefinitie die elke AI-agent kan aanroepen. De agent vult de velden in met de juiste waarden en submit het formulier. Geen screenshot-analyse, geen DOM-giswerk.

De imperatieve API: JavaScript-toolregistratie

Voor complexere interacties die verder gaan dan formulierinzendingen kun je met de imperatieve API tools programmatisch registreren via JavaScript. Je definieert een naam, beschrijving, JSON-inputschema en een execute-callback.

if ("modelContext" in navigator) {
  navigator.modelContext.registerTool({
    name: "searchProducts",
    description: "Search the product catalog by keyword, category, and price range",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "Search keywords"
        },
        category: {
          type: "string",
          description: "Product category filter",
          enum: ["electronics", "clothing", "home", "sports"]
        },
        maxPrice: {
          type: "number",
          description: "Maximum price in USD"
        }
      },
      required: ["query"]
    },
    execute: async ({ query, category, maxPrice }) => {
      const results = await fetchProducts({ query, category, maxPrice });
      return {
        content: [{
          type: "text",
          text: JSON.stringify(results)
        }]
      };
    }
  });
}

De imperatieve API biedt drie methoden op navigator.modelContext:

• provideContext(options) - Registreer meerdere tools tegelijk (vervangt eventuele bestaande tools)
• registerTool(tool) - Voeg een enkele tool toe (geeft een fout als de naam al bestaat)
• unregisterTool(name) - Verwijder een tool op naam

Welke API moet je kiezen?

In de praktijk gebruik je meestal beide: declaratief voor bestaande formulieren, imperatief voor rijkere functionaliteit. Houd de toolnamen onderscheidend tussen de twee, anders krijg je naamconflicten.

Gebruikersinteractie en toestemming

De requestUserInteraction-API voegt een belangrijke beveiligingslaag toe. Wanneer een tool een gevoelige actie moet uitvoeren, zoals een aankoop of data verwijderen, kan de execute-callback pauzeren en de gebruiker om bevestiging vragen via de native browser-UI.

navigator.modelContext.registerTool({
  name: "purchaseItem",
  description: "Complete a purchase for the specified product",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "Product ID to purchase" },
      quantity: { type: "number", description: "Number of items" }
    },
    required: ["productId"]
  },
  annotations: {
    readOnlyHint: false  // Indicates this tool modifies state
  },
  execute: async ({ productId, quantity = 1 }, client) => {
    // Ask the user before proceeding
    const confirmed = await client.requestUserInteraction(async () => {
      return confirm(`Purchase ${quantity}x product ${productId}?`);
    });

    if (!confirmed) {
      return { content: [{ type: "text", text: "Purchase cancelled by user." }] };
    }

    const order = await completePurchase(productId, quantity);
    return {
      content: [{ type: "text", text: `Order ${order.id} confirmed.` }]
    };
  }
});

Gebruikers behouden altijd de controle. De browser bemiddelt alle tool-aanroepen, vereist toestemming per origin en handhaaft origin-gebaseerd permissiebeleid. Geen agent die met je tools kan interageren zonder dat de gebruiker expliciet toestemming geeft.

Discovery: pagina- en siteniveau

Voordat agents je tools kunnen gebruiken, moeten ze ze eerst vinden. WebMCP ondersteunt twee niveaus van discovery.

Discovery op paginaniveau

Tools die via de declaratieve of imperatieve API zijn geregistreerd, zijn automatisch vindbaar zodra een agent de pagina open heeft in een browsertab. Dit is het primaire discovery-mechanisme. Agents die je pagina bezoeken zien direct alle geregistreerde tools en hun schema's.

Optioneel kun je ook een manifest op paginaniveau toevoegen voor extra context over de mogelijkheden van de pagina:

<script type="application/json" id="webmcp">
{
  "spec": "webmcp/0.1",
  "page": {
    "url": "/flights/search",
    "title": "Flight Search"
  },
  "context": {
    "purpose": "Search and book flights between airports worldwide",
    "entities": ["flight", "booking", "airport"],
    "auth": { "required": false }
  },
  "intents": [
    {
      "id": "searchFlights",
      "description": "Search for available flights",
      "inputs": [
        { "name": "origin", "type": "string", "required": true },
        { "name": "destination", "type": "string", "required": true },
        { "name": "date", "type": "date", "required": true }
      ],
      "policy": {
        "rateLimit": "10/min",
        "safety": ["read-only"]
      }
    }
  ]
}
</script>

Discovery op siteniveau via .well-known/webmcp.json

Het manifest op siteniveau op /.well-known/webmcp.json maakt pre-navigatie discovery mogelijk. Agents kunnen ontdekken welke tools je site biedt voordat ze een pagina openen. Denk aan een sitemap, maar dan voor AI-agenttools.

{
  "spec": "webmcp/0.1",
  "site": {
    "name": "Acme Travel",
    "version": "2026.03",
    "description": "Book flights, hotels, and rental cars worldwide"
  },
  "pages": [
    {
      "url": "/flights/search",
      "intents": ["searchFlights", "bookFlight"]
    },
    {
      "url": "/hotels/search",
      "intents": ["searchHotels", "bookHotel"]
    },
    {
      "url": "/account",
      "intents": ["viewBookings", "cancelBooking"]
    }
  ],
  "flows": [
    {
      "id": "book_trip",
      "description": "Search and book a complete trip with flights and hotel",
      "steps": [
        { "intent": "searchFlights", "page": "/flights/search" },
        { "intent": "bookFlight", "page": "/flights/search" },
        { "intent": "searchHotels", "page": "/hotels/search" },
        { "intent": "bookHotel", "page": "/hotels/search" }
      ]
    }
  ]
}

Het interessante aan het sitemanifest is dat het flows definieert: meerstapsprocessen die meerdere pagina's omspannen. Een agent die een reis plant, kan de volledige boekingsworkflow vooraf zien en er efficiënt doorheen navigeren.

Huidige status en browserondersteuning

WebMCP wordt op dit moment geïncubeerd door de W3C Web Machine Learning Community Group. Het is een Draft Community Group Report, nog geen formele W3C-standaard. De stand van zaken per maart 2026:

Wil je WebMCP vandaag testen? Je hebt Chrome 146 nodig (Canary-kanaal). Navigeer naar chrome://flags, zoek naar "Experimental Web Platform Features", schakel het in en herstart. WebMCP vereist HTTPS in productie, maar localhost werkt prima voor lokale ontwikkeling.

Verwachte tijdlijn

Op basis van de huidige spec-status en betrokkenheid van browserfabrikanten, een realistische tijdlijn:

• Q1 2026 (nu): Chrome DevTrial achter een flag. Vroege adopters experimenteren met de API.
• Medio 2026: Formele browseraankondigingen verwacht op Google I/O en Google Cloud Next. Edge-ondersteuning volgt waarschijnlijk kort na Chrome.
• Eind 2026: Safari-ondersteuning verwacht. Chrome schakelt WebMCP mogelijk standaard in bij stabiele releases.
• Begin 2027: Firefox-ondersteuning. De spec kan van Community Group Report naar een formeler W3C-traject gaan.
• 2027–2028: Brede cross-browser beschikbaarheid. WebMCP wordt een standaardonderdeel van het webplatform.

Hoe WebMCP vandaag te implementeren

Je hoeft niet te wachten op brede browserondersteuning. De declaratieve benadering voegt minimale overhead toe aan je bestaande HTML, en het sitemanifest is een simpel JSON-bestand. Stap voor stap:

Stap 1: Annoteer je bestaande formulieren

Pak je belangrijkste formulieren (zoeken, contact, boekingen, login) en voeg WebMCP-attributen toe. Kost je minuten per formulier:

<!-- Before: plain HTML form -->
<form id="site-search" action="/search">
  <input type="text" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

<!-- After: WebMCP-annotated form -->
<form
  id="site-search"
  action="/search"
  toolname="siteSearch"
  tooldescription="Search the website for products, articles, and help pages"
  toolautosubmit="true"
>
  <input
    type="text"
    name="q"
    placeholder="Search..."
    toolparamdescription="Search query - accepts keywords, product names, or questions"
  />
  <button type="submit">Search</button>
</form>

Stap 2: Registreer JavaScript-tools voor complexe acties

Voor functionaliteit die verder gaat dan formulierinzending, zoals voorraad controleren, producten vergelijken of verzendkosten berekenen, registreer je imperatieve tools:

// Always check for browser support first
if ("modelContext" in navigator) {
  navigator.modelContext.provideContext({
    tools: [
      {
        name: "checkAvailability",
        description: "Check if a product is in stock at a specific location",
        inputSchema: {
          type: "object",
          properties: {
            productId: { type: "string", description: "Product SKU or ID" },
            zipCode: { type: "string", description: "ZIP/postal code for store lookup" }
          },
          required: ["productId"]
        },
        annotations: { readOnlyHint: true },
        execute: async ({ productId, zipCode }) => {
          const stock = await fetch(`/api/stock/${productId}?zip=${zipCode}`);
          const data = await stock.json();
          return {
            content: [{ type: "text", text: JSON.stringify(data) }]
          };
        }
      },
      {
        name: "calculateShipping",
        description: "Calculate shipping cost and delivery estimate",
        inputSchema: {
          type: "object",
          properties: {
            productId: { type: "string", description: "Product SKU or ID" },
            zipCode: { type: "string", description: "Delivery ZIP/postal code" },
            method: {
              type: "string",
              description: "Shipping method",
              enum: ["standard", "express", "overnight"]
            }
          },
          required: ["productId", "zipCode"]
        },
        annotations: { readOnlyHint: true },
        execute: async ({ productId, zipCode, method = "standard" }) => {
          const result = await fetch(
            `/api/shipping?product=${productId}&zip=${zipCode}&method=${method}`
          );
          const data = await result.json();
          return {
            content: [{ type: "text", text: JSON.stringify(data) }]
          };
        }
      }
    ]
  });
}

Stap 3: Voeg een manifest op siteniveau toe

Maak een /.well-known/webmcp.json-bestand aan in de root van je domein dat alle pagina's met WebMCP-tools en hun meerstapsflows opsomt. Hiermee kunnen agents hun navigatie plannen voordat ze individuele pagina's bezoeken.

Stap 4: Behandel agentinzendingen anders

Wanneer agents formulieren indienen, wil je waarschijnlijk de CAPTCHA overslaan, gestructureerde data retourneren in plaats van redirecten, of de interactie apart loggen. Gebruik SubmitEvent.agentInvoked om agent-submissions te detecteren:

document.getElementById("search-form").addEventListener("submit", (event) => {
  event.preventDefault();

  if (event.agentInvoked) {
    // Agent submission: return structured data
    const formData = new FormData(event.target);
    const results = performSearch(formData.get("q"));

    event.respondWith(
      JSON.stringify({ results, total: results.length })
    );
    return;
  }

  // Human submission: normal form behavior
  event.target.submit();
});

Stap 5: Test en valideer

De spec raadt minder dan 50 tools per pagina aan om agent-discovery niet te overbelasten. Houd toolnamen beschrijvend, gebruik werkwoord-gebaseerde naamgeving (searchProducts in plaats van products), en retourneer foutmeldingen die agents helpen zichzelf te corrigeren.

• Test met Chrome 146 Canary en de Experimental Web Platform Features-vlag ingeschakeld
• Verifieer dat tools verschijnen in Chrome DevTools (zoek naar model context-tooling)
• Test zowel declaratieve als imperatieve tools met verschillende parametercombinaties
• Controleer of requestUserInteraction werkt voor gevoelige acties
• Valideer dat je /.well-known/webmcp.json toegankelijk en correct opgemaakt is

Verwachte impact: wat WebMCP implementeren betekent

WebMCP implementeren positioneert je website voor de verschuiving die eraan komt: gebruikers die webdiensten vinden en gebruiken via agents. Wat dat concreet oplevert:

De bedrijven die hun websites nu agent-vriendelijk maken, bouwen een serieuze voorsprong op. Mobiel-responsieve sites wonnen het mobiele tijdperk. Ik verwacht dat WebMCP-klare sites hetzelfde gaan doen in het agent-tijdperk.

Wie zou WebMCP moeten implementeren?

Elke website kan profiteren van WebMCP, maar sommige sectoren hebben er opvallend veel baat bij:

• E-commerce: Productzoeken, beschikbaarheidscontroles, prijsvergelijkingen en afrekenflows. Agents kunnen aankopen doen via gestructureerde tools in plaats van productpagina's te scrapen.
• Reis en horeca: Vluchten zoeken, hotelboekingen, autoverhuur. De meerstaps-flowdefinities in WebMCP's sitemanifest zijn op maat gemaakt voor reisboekingsworkflows.
• SaaS-platforms: Accountbeheer, functieconfiguratie, supporttickets aanmaken. Laat agents administratieve taken uitvoeren via goed gedefinieerde tools.
• Financiële dienstverlening: Accountopzoekingen, transactiehistorie, leningscalculators. De requestUserInteraction-API is perfect voor bevestigingsstappen bij gevoelige financiële operaties.
• Gezondheidszorg: Afspraken inplannen, zoeken naar zorgverleners, receptverlengingen aanvragen. Gestructureerde tools met duidelijke inputschema's verminderen fouten in kritieke workflows.
• Vastgoed: Woningen zoeken, hypotheekcalculators, afspraken inplannen. Agents kunnen meerdere tools koppelen om gebruikers te helpen bij het vinden en evalueren van woningen.
• Content-uitgevers: Zelfs read-only sites profiteren van de declaratieve API op zoekformulieren en het sitemanifest voor contentdiscovery.

Beveiligingsmodel

Het beveiligingsmodel is ontworpen zodat jij als website-eigenaar en je gebruikers de controle houden:

• HTTPS verplicht: WebMCP werkt alleen in veilige contexten. Geen uitzonderingen in productie.
• Browser-bemiddelde toegang: Alle tool-aanroepen verlopen via de browser, die permissies en origin-beleid afdwingt.
• Toestemming per origin: Gebruikers moeten toestemming geven voor elke website-agentcombinatie. Geen brede toegang.
• Mens in de loop: De requestUserInteraction-API zorgt ervoor dat gebruikers gevoelige acties kunnen goedkeuren.
• Toolannotaties: De readOnlyHint-annotatie laat je signaleren of een tool de state wijzigt, zodat agents en gebruikers het risiconiveau begrijpen.
• Sequentiële uitvoering: Tool-aanroepen worden sequentieel uitgevoerd in JavaScript, waardoor race conditions worden voorkomen en UI-consistentie gewaarborgd blijft.

Een grote verbetering ten opzichte van nu, waar agents met websites communiceren via dezelfde mechanismen als kwaadwillende bots. Websites kunnen nu geen onderscheid maken en de interactie niet controleren. WebMCP lost dat op.

WebMCP vs andere agentprotocollen

WebMCP is niet het enige agentprotocol op tafel. Zo verhoudt het zich tot de andere benaderingen:

Deze protocollen vullen elkaar aan, ze concurreren niet. WebMCP doet client-side browserinteracties, MCP doet backend-toolverbindingen, A2A doet agent-naar-agentcoördinatie, en OpenAPI documenteert je REST API's. Een goed voorbereide website implementeert er meerdere naast elkaar.

Best practices voor WebMCP-implementatie

• Gebruik duidelijke werkwoord-gebaseerde toolnamen: searchFlights, bookHotel, submitTicket - niet flights of data
• Schrijf beschrijvende toolbeschrijvingen: Agents gebruiken deze om te beslissen wanneer ze een tool moeten aanroepen. Wees specifiek over wat de tool doet en wanneer deze nuttig is.
• Accepteer ruwe gebruikersinvoer: Vereis niet dat agents data transformeren voordat ze je tool aanroepen. Accepteer datums in natuurlijke taal, flexibele formaten en gangbare variaties.
• Retourneer beschrijvende foutmeldingen: Wanneer een tool-aanroep mislukt, retourneer een bericht dat de agent helpt zichzelf te corrigeren (bijv. "Ongeldige luchthavencode. Verwacht 3-letterige IATA-code zoals AMS of JFK").
• Houd tools onder de 50 per pagina: De spec beveelt deze limiet aan om overbelasting van agent-discovery te voorkomen.
• Gebruik aparte toolnamen voor declaratief en imperatief: Als je beide API's op dezelfde pagina gebruikt, gebruik dan onderscheidende namen om DOMException-conflicten te voorkomen.
• Gebruik readOnlyHint-annotaties: Markeer tools die alleen data lezen zodat agents ze kunnen aanroepen zonder verhoogde toestemming te vereisen.
• Retourneer resultaten na UI-updates: Zorg ervoor dat de pagina de actie weerspiegelt voordat de tool retourneert, zodat agents het resultaat visueel kunnen verifiëren indien nodig.

Aan de slag

Je hoeft niet alles tegelijk te doen. Geprioriteerd:

1. Voeg WebMCP-attributen toe aan je zoekformulier - de meeste impact met de minste inspanning
2. Annoteer je contact- en loginformulieren - dek de meestvoorkomende agentinteracties af
3. Maak een /.well-known/webmcp.json-manifest - schakel pre-navigatie discovery in
4. Registreer imperatieve tools voor complexe functionaliteit - productvergelijking, beschikbaarheidscontroles, berekeningen
5. Voeg requestUserInteraction toe aan gevoelige tools - aankopen, accountwijzigingen, dataverwijdering

De declaratieve API (stap 1-2) vereist geen JavaScript en kun je in een middag uitrollen. De imperatieve API (stap 4-5) vergt meer werk maar geeft je het volledige scala aan WebMCP-mogelijkheden.

Bronnen

• WebMCP Specificatie - W3C Web Machine Learning Community Group Draft, februari 2026
• WebMCP GitHub Repository - Officiële specificatiebron en voorsteldocumenten
• WebMCP API Proposal - Gedetailleerde ontwerprationale door auteurs van Microsoft en Google
• WebMCP Early Preview - Chrome for Developers - Chrome's officiële WebMCP-aankondiging en early preview-programma
• Google Chrome Ships WebMCP - VentureBeat - Sectorverslaggeving over WebMCP-lancering en adoptie
• WebMCP - Christian Heilmann - Analyse van de betekenis van WebMCP voor het open web
• What Is WebMCP and How to Use It - Codely - Implementatiegids met codevoorbeelden
• WebMCP - DEJAN - Technische deep dive over declaratieve en imperatieve API's
• WebMCP in Chrome 146 Guide - Bug0 - Chrome 146-implementatiedetails en benchmarks
• Implementing WebMCP: Step-by-Step Guide - Halmob - Uitgebreide implementatiegids met React-voorbeelden
• WebMCP: How the W3C Standard Revolutionizes AI Agents - innFactory - Enterprise-perspectief op WebMCP-adoptie