MCPAIWebMCPTypeScript

WebMCP: als websites praten met AI

Stel: een gebruiker opent Claude en vraagt "Wat is de status van mijn bestelling bij bedrijf X?" Het antwoord is bijna altijd hetzelfde: "Ik heb geen toegang tot die informatie." Dat is niet omdat het model tekortschiet. Websites zijn gewoon niet gebouwd voor AI. Die zijn gebouwd voor mensen, en voor AI zijn ze grotendeels onleesbaar.

Dat begint te veranderen.

✦ In het kort

Wat is WebMCP?

Een website heeft een adres, een design en tekst. Mensen klikken door via menu's en knoppen. Maar voor een AI is een website bijna nutteloos: die kan lezen wat er staat, maar niets doen.

WebMCP voegt een tweede laag toe: een lijst van wat de site kan uitvoeren. "Je kan hier een afspraak boeken. Je kan een bestelstatus opvragen. Je kan producten zoeken." Die lijst is onzichtbaar voor gewone bezoekers, maar leesbaar voor AI.

Vraagt iemand via een AI-assistent "Boek een afspraak voor mij", dan kan de AI dat nu ook echt doen, als de site WebMCP ondersteunt. Geen formulieren, geen doorverwijzingen.

Voor bedrijven is dit een nieuw kanaal. Bezoekers via AI zijn verder in hun beslissingsproces. WebMCP maakt dat kanaal beheerbaar, terwijl de site zelf bepaalt wat de AI wel en niet mag doen.

MCP: één protocol voor alles

In november 2024 publiceerde Anthropic het Model Context Protocol (MCP), een open standaard voor communicatie tussen AI-modellen en externe systemen. Tools, databases, API's, filesystemen: allemaal via hetzelfde protocol. De meest gebruikte vergelijking is dat MCP voor AI is wat USB was voor computers. Dat klopt wel.

De adoptie ging snel. Claude Desktop, VS Code Copilot, Cursor, Zed — ze ondersteunen inmiddels allemaal MCP-servers. Het idee is simpel: je definieert tools die een AI kan aanroepen. Elke tool heeft een naam, een beschrijving in gewone taal, en een inputschema. Het model beslist zelf wanneer een tool relevant is, roept hem aan, en verwerkt het resultaat in zijn antwoord.

Van desktop naar browser: WebMCP

MCP begon als iets voor lokale omgevingen, bestanden lezen, terminalopdrachten uitvoeren, databases bevragen. Maar websites? Die bleven buiten beeld. WebMCP verandert dat.

Het idee is dat een website zijn eigen tools publiceert, direct beschikbaar voor AI-assistenten, zonder SDK-installatie, zonder vendor lock-in, en voor de eenvoudigste vorm zelfs zonder browserextensie. Een AI-client die WebMCP ondersteunt, ziet welke tools een site aanbiedt en kan die uitvoeren namens de gebruiker.

Declaratief: één meta-tag als startpunt

De eenvoudigste vorm is volledig declaratief. Je voegt één regel toe aan de <head> van je HTML:

<meta name="mcp-server" content="https://uwsite.be/.well-known/mcp.json" />

Op dat vaste URL publiceert je site zijn tools als JSON. Een voorbeeld voor een e-commerce platform:

{
  "tools": [
    {
      "name": "searchProducts",
      "description": "Zoek producten op naam, categorie of toepassing",
      "inputSchema": {
        "type": "object",
        "properties": {
          "query": { "type": "string" },
          "category": { "type": "string" }
        },
        "required": ["query"]
      }
    },
    {
      "name": "checkOrderStatus",
      "description": "Raadpleeg de status van een lopende bestelling",
      "inputSchema": {
        "type": "object",
        "properties": {
          "orderId": { "type": "string" }
        },
        "required": ["orderId"]
      }
    },
    {
      "name": "bookAppointment",
      "description": "Boek een afspraak in het dichtstbijzijnde servicepunt",
      "inputSchema": {
        "type": "object",
        "properties": {
          "date": { "type": "string" },
          "location": { "type": "string" }
        }
      }
    }
  ]
}

Een MCP-compatibele AI-client leest dit bestand, weet wat de site kan doen, en stelt die tools beschikbaar in het gesprek. De handlers zijn gewone API-endpoints. Geen nieuwe architectuur.

Imperatief: programmatische controle via JavaScript

Voor complexere situaties biedt WebMCP een JavaScript API via window.mcp.provideContext(). Daarmee bepaal je per pagina, per gebruikersrol of per sessiestatus welke tools zichtbaar zijn:

// Op een productpagina voor ingelogde gebruikers
window.mcp.provideContext({
  tools: [
    {
      name: "getPersonalizedRecommendations",
      description: "Haal productaanbevelingen op basis van aankoopgeschiedenis",
      inputSchema: {
        type: "object",
        properties: {
          limit: { type: "number", default: 5 }
        }
      },
      execute: async (params) => {
        const userId = getCurrentUser().id;
        return await api.getRecommendations(userId, params);
      }
    },
    {
      name: "addToCart",
      description: "Voeg het huidige product toe aan het winkelmandje",
      inputSchema: {
        type: "object",
        properties: {
          quantity: { type: "number" }
        }
      },
      execute: async ({ quantity = 1 }) => {
        return await cart.add(currentProduct.id, quantity);
      }
    }
  ]
});

Een anonieme bezoeker ziet andere tools dan een ingelogde klant. De homepagina toont andere opties dan een productdetailpagina. De site bepaalt wat de AI mag doen.

Hoe dit er in de praktijk uitziet

AI-browsers zoeken actief naar MCP-endpoints terwijl ze door pagina's gaan. Stel dat een gebruiker vraagt: "Boek een afspraak bij de dichtstbijzijnde garage." Dan:

  1. De AI leest de MCP-config van de garagepagina
  2. getAvailability haalt beschikbare tijdsloten op
  3. De AI stelt een tijdstip voor en vraagt bevestiging
  4. Na bevestiging roept de AI bookAppointment aan
  5. De gebruiker krijgt een bevestiging, zonder één formulier te hebben ingevuld

Alles via één gesprek. Het formulier blijft gewoon staan voor wie direct op de site is, maar AI-gebruikers hebben een andere ingang.

WebMCP: de toekomst

WebMCP is jong en nog geen mainstream. Maar de richting is duidelijk: AI-assistenten die websites als tools behandelen in plaats van als tekst. Wie daar vroeg op inspeelt, heeft een voordeel. Ik denk aan vroege SEO. In 2003 kende je het als je in het web zat. In 2010 vroeg elke ondernemer ernaar.

Wil je weten wat WebMCP concreet voor jouw platform kan betekenen? Stuur me een berichtje!

// next_step

WebMCP op jouw platform?

We bouwen werkende WebMCP-integraties, van een eenvoudige declaratieve setup tot volledige agentic tool-handlers. Benieuwd wat dit voor jouw platform kan betekenen?

Neem contact op →