WebMCP-tutorial: agent-klare websites bouwen met Chrome's nieuwe standaard

Op dit moment browsen AI-agents het web zoals een toerist een vreemd menu leest: turend naar pixels, gissend wat knoppen doen, en hopend dat de pagina niet van lay-out verandert midden in een klik. Google en Microsoft vonden het probleem belangrijk genoeg om het goed op te lossen.

In februari 2026 bracht Chrome 146 een vroege preview uit van WebMCP, een voorgestelde webstandaard waarmee websites agents precies kunnen vertellen wat ze kunnen doen en hoe ze dat moeten doen. 

Geen screen-scraping meer. 

Geen DOM reverse-engineeren meer.

In deze tutorial laat ik je zien wat WebMCP precies is, hoe je je omgeving inricht, en bouwen we werkende integraties met zowel de HTML-gebaseerde als de JavaScript-gebaseerde aanpak. 

Ook behandel ik veiligheidstips voor het afhandelen van agent-aanroepen en hoe je alles test met de debuggingtools van Chrome.

Wat is WebMCP?

WebMCP (Web Model Context Protocol) is een nieuwe browserstandaard waarmee websites hun mogelijkheden kunnen declareren als gestructureerde tools die AI-agents direct kunnen aanroepen. In plaats van een AI te dwingen door een visuele interface te "lezen" en te klikken, verandert WebMCP de webpagina zelf in een schone, client-side API.

Denk eens aan wat er gebeurt als een agent vandaag een vlucht probeert te boeken op een reiswebsite. Hij moet uitzoeken welk veld de vertrekstad verwacht, raden of de datumnotatie MM/DD of JJJJ-MM-DD is, de zoekknop vinden, en hopen dat de pagina niet herlaadt in een lay-out die hij nog nooit eerder heeft gezien. Als de site in plaats daarvan een tool zou publiceren genaamd searchFlights met getypeerde parameters voor vertrek, bestemming, data en aantal passagiers, valt al dat giswerk weg.

WebMCP maakt dat mogelijk. Een site registreert tools via een browser-API genaamd navigator.modelContext, waarbij elke tool een naam, een beschrijving in natuurlijke taal en een JSON-schema voor invoer en uitvoer heeft. De agent ontdekt die tools, stuurt parameters die overeenkomen met het schema en ontvangt gestructureerde data terug.

Engineers van Google en Microsoft hebben de specificatie samen gebouwd binnen de W3C Web Machine Learning community group. De architectuur is volledig client-side, wat haar onderscheidt van typische MCP-deployments waarbij een aparte back-endserver de tooluitvoering afhandelt. Waar standaard MCP agents via JSON-RPC verbindt met back-endservers, blijft bij WebMCP alles in het browsertabblad. 

Tools draaien in de JavaScript van de pagina; ze delen de sessie die de gebruiker al heeft, en de browser bemiddelt wat de agent mag doen. Als je eerder met MCP-servers hebt gewerkt (bijvoorbeeld in onze MCP Model Context Protocol-tutorial), zullen de concepten rond toolregistratie bekend voorkomen, maar het deploymentmodel is behoorlijk anders.

Belangrijkste functies en mogelijkheden van WebMCP

Er zijn twee API’s beschikbaar, met elk een ander doel:

• De declaratieve API werkt via HTML-annotaties. Je voegt de attributen toolname en tooldescription toe aan een <form>-element, eventueel aangevuld met toolparamdescription op individuele velden, en de browser genereert een JSON-schema op basis van de bestaande formulierstructuur. Sites die al goede formulieren hebben, hoeven heel weinig te veranderen om toegankelijk te worden voor agents.
• De imperatieve API geeft je volledige programmatische controle. Je roept navigator.modelContext.registerTool() aan en definieert de toolnaam, beschrijving, inputschema en een execute-callback. Dit is de route voor alles wat te dynamisch is voor een simpel formulier: meerstaps-workflows, API-calls, berekende resultaten en aangepaste validatielogica.

Beide API’s ondersteunen dynamische registratie, wat betekent dat tools kunnen verschijnen en verdwijnen naargelang de paginastatus. Voor een gebruiker is ingelogd, toon je bijvoorbeeld alleen een login-tool. Na authenticatie registreer je de account-specifieke tools.

• JSON-schema’s op elke tool specificeren types, enums, verplichte velden en parameterbeschrijvingen. Deze structuur voorkomt dat agents parameters verzinnen of data in verkeerde velden zetten.
• CSS-pseudoklassen geven visuele feedback tijdens agentinteracties. Chrome past :tool-form-active toe op elk formulier dat een agent op dat moment invult, en :tool-submit-active op de verzendknop van dat formulier. De mens die meekijkt ziet precies aan welk formulier de agent werkt.

Er is nog geen ingebouwd ontdekkingsmechanisme. Een agent moet je pagina bezoeken voordat hij kan leren welke tools je aanbiedt. Het Chrome-team heeft het idee besproken van een .well-known/webmcp-manifestbestand voor ontdekking vooraf, maar daar is nog niets voor gespecificeerd.

Omdat WebMCP nog in vroege preview is, kun je wat ruwe randjes en doorlopende wijzigingen verwachten, zeker omdat de specificatie al tussen versies is geëvolueerd, waaronder het verwijderen van de methoden provideContext en clearContext in maart 2026. 

De vindbaarheid van tools is beperkt tot pagina’s die je al hebt bezocht, en beveiligingszorgen zoals promptinjectie en data-exfiltratie via tool-chaining worden in de spec erkend maar nog niet volledig opgelost. Je kunt het changelog in de Chrome-documentatie bekijken voordat je begint, want de API kan veranderd zijn sinds deze tutorial is geschreven.

WebMCP-vereisten en omgevingsinstelling

De omgeving goed instellen kost een paar minuten, maar de verkeerde Chrome-versie kost je veel meer tijd.

Chrome Canary versie 146.0.7672.0 of hoger is vereist. De stabiele release en de Beta- en Dev-kanalen van Chrome bevatten de WebMCP-flag niet. Verschillende ontwikkelaars op de Chrome-forums schreven over het installeren van de verkeerde versie en zich afvragen waarom de flag ontbrak. Download specifiek vanaf de Canary-pagina.

Downloadpagina van Chrome Canary

Naast de browser heb je werkkennis nodig van HTML-formulieren en JavaScript event handling. Als je een opfrisser nodig hebt, behandelt DataCamps Introduction to JavaScript-cursus de basis. 

De Model Context Tool Inspector-extensie is niet strikt vereist, maar wel de moeite waard om te installeren. Hij toont alle geregistreerde tools op de huidige pagina, laat je ze handmatig uitvoeren met parameters die je intypt, en heeft ingebouwde Gemini API-ondersteuning om toolaanroepen met natuurlijke taal te testen.

De experimentele WebMCP-flag inschakelen

Met Chrome Canary geïnstalleerd:

1. Navigeer naar chrome://flags/#enable-webmcp-testing in de adresbalk.
2. Zet de flag "WebMCP for testing" op Enabled.
3. Klik onderaan de pagina op Relaunch.

De pagina chrome://flags met de WebMCP-flag gemarkeerd en ingesteld op Enabled

Na het herstarten open je DevTools (F12), ga je naar het tabblad Console en voer je uit:

console.log(navigator.modelContext);Mogelijk gemaakt door

DevTools-console met het object navigator.modelContext.

Een object in de output (in plaats van undefined) bevestigt dat de API beschikbaar is. Vanaf hier kun je de Model Context Tool Inspector-extensie installeren en Google’s reisdemo openen om toolregistratie te zien werken op een echte pagina. 

Daar kun je simpelweg de extensie starten, en je zou iets als het volgende moeten zien:

De tools searchFlights controleren met de Model Context Tool Inspector-extensie van Chrome met de Flight Search-demowebsite van Google. 

Zoals je ziet, detecteert de Model Context Tool Inspector de tool searchFlights en toont hij het invoerschema, waardoor het model veel beter begrijpt hoe het met de pagina moet omgaan.

Je eerste WebMCP-integratie bouwen

Er zijn twee manieren om je eerste WebMCP-integratie te bouwen, en we behandelen ze allebei in de secties hieronder:

De declaratieve aanpak (HTML)

De eenvoudigste manier om een WebMCP-tool te registreren is een formulier te annoteren dat al op je pagina staat. Hier is een standaard productzoekformulier zonder WebMCP-annotaties:

<form action="/search" method="GET">
  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required>

  <label for="category">Category</label>
  <select name="category" id="category">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Mogelijk gemaakt door

Vier attributen maken hier een tool van die door een agent kan worden aangeroepen. toolname en tooldescription komen op de <form>-tag zelf. Op individuele velden overschrijven toolparamtitle en toolparamdescription de standaardlabels wanneer die niet beschrijvend genoeg zijn voor een agent om te begrijpen:

<form toolname="search_products"
      tooldescription="Search the product catalog by keyword and optional category filter"
      action="/search" method="GET">

  <label for="query">Search term</label>
  <input type="text" name="query" id="query" required
         toolparamdescription="The keyword or phrase to search for in product titles and descriptions">

  <label for="category">Category</label>
  <select name="category" id="category"
          toolparamtitle="Product Category"
          toolparamdescription="Filter results to a specific product category. Use 'all' for no filter.">
    <option value="all">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
    <option value="clothing">Clothing</option>
  </select>

  <button type="submit">Search</button>
</form>Mogelijk gemaakt door

Wat de browser met die attributen doet, is intern een JSON-schema genereren. De toolnaam, de parametertypes, de enumwaarden uit de <select>-opties en de verplichte markeringen uit HTML worden zonder extra configuratie overgenomen.

Om het te testen, maak je lokaal met een teksteditor een eenvoudig .html-bestand, plak je de bovenstaande code erin en open je het in Chrome via file:///{your_document_path.html}; om de extensie met het lokale bestand te laten werken, moet je ook de extensie-instellingen openen, naar Details gaan en toegang tot bestands-URL’s inschakelen, zoals in de onderstaande screenshot.

De extensie toegang geven tot lokale bestanden.

Anders kan je browser niet met je lokale HTML-bestand communiceren. Als dit gedaan is, zou je bij het openen van het bestand in Chrome en het controleren van de WebMCP-extensie iets als de volgende screenshot moeten zien. 

De extensie toont het gegenereerde schema voor de tool search_products na het toevoegen van de annotaties.

Wat gebeurt er nu eigenlijk wanneer een agent deze tool aanroept? 

Chrome focust het formulier, vult de velden in met de waarden die de agent heeft opgegeven en stopt daar. De gebruiker moet nog steeds op Verzenden klikken. Dat is bewust zo, omdat de mens de handeling moet bevestigen voordat deze doorgaat.

Het toevoegen van het attribuut toolautosubmit aan de form-tag verwijdert die bevestigingsstap. Dat is logisch voor alleen-lezen handelingen zoals zoekopdrachten. Laat het weg bij alles wat data wijzigt, een aankoop triggert of accountinstellingen verandert.

Er is ook een manier om de indiening te onderscheppen en een gestructureerd resultaat terug te sturen naar de agent. De methode respondWith() op het submit-event neemt een promise, en waarmee je die ook maar resolve’t, wordt de output van de tool:

<form toolname="search_products"
      tooldescription="Search the product catalog"
      toolautosubmit
      action="/search">
  <input type="text" name="query" required>
  <button type="submit">Search</button>
</form>

<script>
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault();

    const query = new FormData(e.target).get("query");

    if (!query || query.trim().length === 0) {
      if (e.agentInvoked) {
        e.respondWith(Promise.resolve({
          error: "Search query cannot be empty. Please provide a keyword."
        }));
      }
      return;
    }

    const results = performSearch(query);

    if (e.agentInvoked) {
      e.respondWith(Promise.resolve({
        content: [{ type: "text", text: JSON.stringify(results) }]
      }));
    }
  });
</script>Mogelijk gemaakt door

Die boolean agentInvoked op het submit-event is true wanneer een agent de indiening heeft getriggerd en false bij een normale menselijke klik. Je kunt hiermee vertakken tussen agent-specifieke responseformattering en je normale formulierafhandeling.

Wanneer er geen toolparamdescription op een veld staat, haalt de browser de beschrijving uit het bijbehorende <label>-element, of anders uit het aria-description-attribuut. Toegankelijke markup levert dus al redelijke parameterbeschrijvingen zonder extra werk.

Een huidige eigenaardigheid: voor een groep <input type="radio">-elementen moet toolparamdescription op de eerste radioknop in de groep staan, en is die van toepassing op de hele parameter.

De imperatieve aanpak (JavaScript)

Formulieren dekken veel af, maar sommige tools moeten met applicatiestatus werken, API-calls doen of berekende resultaten teruggeven die niet passen bij een traditionele formulierindiening. Hier is een basistool die items toevoegt aan een takenlijst:

window.navigator.modelContext.registerTool({
  name: "addTodo",
  description: "Add a new item to the user's to-do list. Use when the user asks to create, add, or remember a task.",
  inputSchema: {
    type: "object",
    properties: {
      text: {
        type: "string",
        description: "The task description"
      },
      priority: {
        type: "string",
        enum: ["low", "medium", "high"],
        description: "Task priority level. Default to 'medium' if not specified by the user."
      }
    },
    required: ["text"]
  },
  execute: ({ text, priority = "medium" }) => {
    const newItem = { id: Date.now(), text, priority, done: false };
    todoApp.addItem(newItem);
    todoApp.renderList();

    return {
      content: [{
        type: "text",
        text: Added task: "${text}" with ${priority} priority. The to-do list now has ${todoApp.getCount()} items.
      }]
    };
  }
});Mogelijk gemaakt door

De execute-callback ontvangt de parameters die de agent heeft gestuurd (die zouden moeten overeenkomen met het inputSchema), voert je applicatielogica uit en retourneert een content-array. 

Een belangrijk detail: werk de UI bij vóór je retourneert. 

Agents kijken soms wat de pagina laat zien nadat een tool is aangeroepen om te verifiëren dat het werkte, dus als de UI nog niet veranderd is, kan de agent aannemen dat de call faalde. Je kunt tools registreren en deregistreren naarmate de paginastatus evolueert:

function onUserLogin(user) {
  navigator.modelContext.registerTool({
    name: "viewOrderHistory",
    description: "Show the user's past orders with dates and totals",
    inputSchema: {
      type: "object",
      properties: {
        limit: {
          type: "number",
          description: "Maximum number of orders to return. Defaults to 10."
        }
      }
    },
    execute: async ({ limit = 10 }) => {
      const orders = await fetchOrders(user.id, limit);
      return {
        content: [{ type: "text", text: JSON.stringify(orders) }]
      };
    }
  });
}

function onUserLogout() {
  navigator.modelContext.unregisterTool("viewOrderHistory");
}Mogelijk gemaakt door

Een realistischer scenario: een reserveringspagina van een restaurant die de tafelbeschikbaarheid controleert. Dit voorbeeld laat ook validatie in code zien, wat de Chrome-documentatie aanbeveelt omdat schema-constraints nuttig zijn voor agents maar niet door allemaal worden afgedwongen.

navigator.modelContext.registerTool({
  name: "checkAvailability",
  description: "Check table availability for a given date and party size at this restaurant. Returns available time slots.",
  inputSchema: {
    type: "object",
    properties: {
      date: {
        type: "string",
        description: "The desired reservation date in YYYY-MM-DD format"
      },
      partySize: {
        type: "number",
        description: "Number of guests, between 1 and 12"
      }
    },
    required: ["date", "partySize"]
  },
  execute: async ({ date, partySize }) => {
    if (partySize < 1 || partySize > 12) {
      return {
        content: [{
          type: "text",
          text: "Party size must be between 1 and 12. For larger groups, please call the restaurant directly at (555) 123-4567."
        }]
      };
    }

    const parsedDate = new Date(date);
    if (isNaN(parsedDate.getTime()) || parsedDate < new Date()) {
      return {
        content: [{
          type: "text",
          text: "Please provide a valid future date in YYYY-MM-DD format."
        }]
      };
    }

    const slots = await api.getAvailableSlots(date, partySize);
    renderAvailabilityCalendar(date, slots);

    return {
      content: [{
        type: "text",
        text: JSON.stringify({
          date,
          partySize,
          availableSlots: slots.map(s => s.time),
          message: slots.length > 0
            ? Found ${slots.length} available time slots.
            : "No availability for this date. Try a different date or smaller party."
        })
      }]
    };
  }
});Mogelijk gemaakt door

Een paar punten uit de Chrome-documentatie zijn het benadrukken waard. Accepteer waar mogelijk ruwe gebruikersinvoer. Als iemand zegt "11:00 tot 15:00", moet je tool die strings direct aannemen in plaats van de agent te verplichten ze om te zetten naar minuten-sinds-middernacht of een ander intern formaat. 

Valideer in code, niet alleen in het schema, omdat schemahandhaving per agent verschilt. En retourneer pas nadat de UI is bijgewerkt, omdat agents mogelijk naar de pagina kijken om te bevestigen dat de handeling is uitgevoerd.

Voor server-side MCP-tools die een client-side WebMCP-implementatie aanvullen, behandelt onze gids over MCP-servers bouwen met FastMCP de setup in detail.

Agent-aanroepen en veiligheid in WebMCP afhandelen

De WebMCP-specificatie gaat ervan uit dat een mens meekijkt. De auteurs bij Google en Microsoft hebben het ontworpen rond coöperatieve workflows, niet autonome werking. De onderstaande mechanismen weerspiegelen die filosofie.

AI versus menselijke gebruikers detecteren

Een nieuwe boolean-eigenschap genaamd agentInvoked verschijnt op de SubmitEvent-interface. Wanneer een agent een formulierindiening triggert, is de eigenschap true. Wanneer iemand normaal op Verzenden klikt, is deze false.

document.querySelector("form").addEventListener("submit", (e) => {
  if (e.agentInvoked) {
    console.log("AI agent submitted the form");
    if (!isWithinAgentRateLimit()) {
      e.preventDefault();
      e.respondWith(Promise.resolve({
        error: "Too many requests. Please wait before trying again."
      }));
      return;
    }
  }
});Mogelijk gemaakt door

Naast formulierindieningen zijn er twee window-level events die agentactiviteit bijhouden. toolactivated vuurt af nadat een agent een tool aanroept en Chrome de bijbehorende formuliervelden vooraf invult. toolcancel vuurt af als de gebruiker de actie annuleert of het formulier reset. 

Geen van beide events is te cancellen, maar beide dragen een eigenschap toolName zodat je weet welke tool betrokken was.

window.addEventListener("toolactivated", ({ toolName }) => {
  showAgentActivityBanner(toolName);
});

window.addEventListener("toolcancel", ({ toolName }) => {
  hideAgentActivityBanner();
});Mogelijk gemaakt door

Toestemmingen met mens-in-de-loop afdwingen

Bij declaratieve tools is het standaardgedrag dat de mens op Verzenden moet klikken nadat de agent de velden heeft ingevuld. Die standaard moet blijven gelden voor alles met echte consequenties.

Het attribuut toolautosubmit verwijdert die stap. Het hoort thuis op alleen-lezen of laagrisico-tools: zoekopdrachten, beschikbaarheidscontroles, statuschecks. 

Alles wat data creëert, wijzigt of verwijdert, moet een handmatige klik vereisen.

Je kunt de agentinteractiestatus stylen met CSS-pseudoklassen:

form:tool-form-active {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1rem;
  border-radius: 8px;
}

form:tool-form-active::before {
  content: "AI agent is filling this form";
  display: block;
  font-size: 0.875rem;
  color: #2563eb;
  font-weight: 600;
  font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">0.5rem;
}Mogelijk gemaakt door

Een formulier met de stijl :tool-form-active toegepast, met de blauwe rand en het label "AI agent is filling this form".

Imperatieve tools vormen een andere uitdaging. Er is geen formulier en geen verzendknop, dus uitvoering start meteen wanneer de agent de tool aanroept. 

Voor elke handeling die niet zonder menselijke goedkeuring mag plaatsvinden, moet je de bevestiging in de tool zelf bouwen:

navigator.modelContext.registerTool({
  name: "deleteAccount",
  description: "Permanently delete the user's account and all associated data. Cannot be undone.",
  inputSchema: {
    type: "object",
    properties: {
      confirmPhrase: {
        type: "string",
        description: "The user must type 'DELETE MY ACCOUNT' to confirm."
      }
    },
    required: ["confirmPhrase"]
  },
  execute: ({ confirmPhrase }) => {
    if (confirmPhrase !== "DELETE MY ACCOUNT") {
      return {
        content: [{
          type: "text",
          text: "Confirmation phrase does not match. Ask the user to confirm explicitly."
        }]
      };
    }

    return new Promise((resolve) => {
      showConfirmationModal("Are you sure?", {
        onConfirm: async () => {
          await api.deleteAccount();
          resolve({ content: [{ type: "text", text: "Account deleted." }] });
        },
        onCancel: () => {
          resolve({ content: [{ type: "text", text: "Deletion cancelled by user." }] });
        }
      });
    });
  }
});Mogelijk gemaakt door

Het patroon in het MCP-ecosysteem is consistent: de agent uit intentie, de mens bevestigt de uitvoering. Voor een bredere kijk op hoe dit werkt in verschillende MCP-implementaties, zie ons overzicht van top MCP-servers en -clients.

Je WebMCP-implementatie testen

Zodra je eerste WebMCP-integratie draait, is het tijd om te testen. 

De agent-simulator van Chrome DevTools gebruiken

Na installatie van de Model Context Tool Inspector-extensie geeft een klein label op het pictogram aan hoeveel tools de huidige pagina heeft geregistreerd. Het pop-upvenster toont elke tool met naam, beschrijving en invoerschema. Als een tool die je hebt geregistreerd hier niet verschijnt, is de registratie niet goed gelukt.

Het extensiepaneel met een lijst van meerdere geregistreerde tools met uitgeklapte schema’s.

Om de agent-simulator te testen, gaan we terug naar de Flight Search-demowebsite van Google. Nu kunnen we testen hoe we deze app uitvoeren, handmatig of met natuurlijke taal. 

Handmatige uitvoeraanpak

Handmatige uitvoering haalt het niet-deterministische element uit agenttesten. Selecteer een tool in de dropdown van het extensiepaneel, typ een JSON-object in het veld "Input Arguments" en klik op "Execute Tool". De extensie roept de tool direct aan met de door jou opgegeven parameters.

De extensie met de tool searchFlights geselecteerd, JSON-parameters ingevuld en de knop Execute Tool zichtbaar.

Dit is waardevol om problemen te isoleren. Als een tool correct werkt met handgeschreven parameters maar faalt wanneer de agent hem aanroept, weet je dat het probleem in je toolbeschrijving of schema zit, niet in de execute-functie. Bijvoorbeeld, met Google’s reisdemo:

{
  "origin": "LON",
  "destination": "NYC",
  "tripType": "round-trip",
  "outboundDate": "2026-06-10",
  "inboundDate": "2026-06-17",
  "passengers": 2
}Mogelijk gemaakt door

De demopagina voor reizen die zoekresultaten toont na de handmatige tooluitvoering.

Testen met natuurlijke taal

Testen met natuurlijke taal gebruikt de Gemini API. Plak een sleutel uit AI Studio in de instellingen van de extensie, en typ dan een prompt zoals 

Search for round-trip flights from London to New York leaving June 10th, returning June 17th, for 2 passengers.Mogelijk gemaakt door

De extensie stuurt die prompt naar Gemini 2.5 Flash samen met je tooldefinities, en het model beslist welke tool wordt aangeroepen en welke parameters worden doorgegeven.

Het invoerveld voor natuurlijke taal van de extensie met een getypte prompt en daaronder de toolaanroeppresentatie van de agent.

Als de agent de verkeerde tool kiest of parameters verkeerd mapt, moeten je toolbeschrijvingen waarschijnlijk specifieker. Goede beschrijvingen leggen positief uit wat de tool doet ("gebruik dit om de vluchtbeschikbaarheid te controleren"), niet waarvoor hij níet gebruikt moet worden.

Een praktische testvolgorde:

1. Controleer of tools na het laden van de pagina in de extensie verschijnen.
2. Voer elke tool handmatig uit met de juiste parameters. Bevestig dat de execute-logica werkt en dat de UI bijwerkt zoals verwacht.
3. Voer uit met onjuiste parameters. Controleer of je validatie de fouten opvangt en of de meldingen duidelijk genoeg zijn voor de agent om zichzelf te corrigeren.
4. Test met natuurlijke taal. Kijk of de agent de juiste tool kiest en de woorden van de gebruiker correct aan schema-parameters koppelt.
5. Test randgevallen: niet-ingelogde gebruikers, uitgeschakelde formulieren, API-storingen en snel herhaalde calls.

Voor context over MCP-tools binnen Google’s ecosysteem specifiek behandelt onze Google MCP Servers-tutorial verschillende relevante patronen. En voor een bredere kijk op het protocolland­schap buiten Chrome, zie Top Remote MCP Servers.

Conclusie

WebMCP geeft websites een direct communicatiekanaal met AI-agents. In plaats van dat agents zich door een pagina heen moeten raden, publiceert de site gestructureerde tooldefinities, en de agent roept die aan met getypeerde parameters. De declaratieve API verandert bestaande formulieren met een paar HTML-attributen in tools die door agents kunnen worden aangeroepen. De imperatieve API dekt alles wat complexer is. Het veiligheidsmodel houdt de mens aan het roer bij acties die ertoe doen.

De spec is nog pril, alleen beschikbaar in Chrome Canary achter een flag, en niet geschikt voor productiegebruik. Maar het feit dat zowel Google als Microsoft haar samen schrijven, met W3C als governance, suggereert een reële weg naar een stabiele webstandaard. Wie nu tijd met de API doorbrengt, begrijpt straks de ontwerppatronen en veiligheidsmechanismen al wanneer de stabiele release verschijnt.

Als je nu al wilt beginnen met voorbereiden, audit dan de formulieren op je bestaande sites en identificeer welke het meest profiteren van agenttoegang. Zoekformulieren en beschikbaarheidscheckers zijn laagrisico startpunten. Zodra je comfortabel bent met de declaratieve API daarvoor, ga je door naar imperatieve tools voor workflows die aangepaste logica nodig hebben. 

Om verder te gaan met dit onderwerp, raad ik aan:

• MCP Model Context Protocol-tutorial voor de basisconcepten achter WebMCP.
• MCP-servers bouwen met FastMCP voor server-side MCP-tools die client-side WebMCP aanvullen.
• Google MCP Servers-tutorial voor Google-specifieke integratiepatronen.
• Top Remote MCP Servers en Top MCP-servers en -clients voor het bredere ecosysteem.