WebMCP: So optimierst du für KI-Agenten und misst, was sie tun

Was WebMCP ist – und was nicht

Ein Browser-Agent muss aus Screenshot und DOM ableiten, was deine Buttons tun, und liegt dabei oft daneben. WebMCP nimmt ihm das ab: Deine Seite deklariert ihre Aktionen, der Agent ruft sie direkt auf. Das passiert im Browser, ist also keine Parallelwelt zu den KI-Browsern, sondern strukturierte Hilfe innerhalb der Browser-Bedienung. Anders als beim reinen Ausfüllen vorhandener Formulare stellst du als Seitenbetreiber dafür aktiv etwas bereit, egal ob Shop, Buchungsseite oder B2B-Formular.

Die zwei APIs

WebMCP kennt zwei Wege, eine Aktion als Tool anzubieten. Die Faustregel: Ist die Aktion schon ein HTML-Formular, nimm die deklarative API; ist sie es nicht, die imperative.

Deklarativ: bestehende Formulare annotieren

Die deklarative API funktioniert ausschließlich mit <form> -Elementen. Einen einzelnen Button, ein <div>oder sonst etwas kannst du damit nicht zum Tool machen, dafür ist die imperative API da.

So entsteht das Tool: <toolname> und <tooldescription> (beide Pflicht) hängst du ans Formular, der <toolname> wird der Tool-Name. Jedes Eingabefeld wird über sein <name> -Attribut automatisch zu einem Parameter. Das Besondere: Der Browser übersetzt auch die normalen HTML-Regeln ins Tool-Schema, <required> wird zur Pflicht, ein select zur festen Auswahlliste, <type>, <min>, und <max> zu Grenzen. Die Felder erklärst du mit <toolparamdescription>, den Rest liest der Browser aus dem Formular.

<!-- Wird zum Tool "searchFlights" mit den Parametern -->
<!-- from, to, class, passengers und when. -->
<form toolname="searchFlights"
      tooldescription="Sucht Flüge zwischen zwei Orten an einem Datum"
      toolautosubmit>   <!-- Agent darf selbst absenden -->

  <!-- Pflichtfelder, Freitext -->
  <input name="from" required
         toolparamdescription="Abflugort oder IATA-Code, z. B. CGN">
  <input name="to" required
         toolparamdescription="Zielort oder IATA-Code, z. B. JFK">

  <!-- feste Auswahlliste: der Agent darf nur diese Werte nehmen -->
  <select name="class" toolparamdescription="Beförderungsklasse">
    <option value="economy">Economy</option>
    <option value="business">Business</option>
    <option value="first">First</option>
  </select>

  <!-- Zahl mit Grenzen -->
  <input name="passengers" type="number" min="1" max="9" value="1"
         toolparamdescription="Anzahl Reisender">

  <input name="when" type="date"
         toolparamdescription="Abflugdatum">

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

Deklarativ ist also mehr als drei Attribute: Du nutzt die vorhandene Formular-Semantik weiter. Die vollständige Attributliste und wie HTML-Regeln zum Schema werden, steht in der Chrome Dokumentation.

Ob der Agent selbst absenden darf, entscheidest du pro Formular über das Attribut toolautosubmit . Ohne das Attribut füllt der Agent nur die Felder, der Browser setzt den Fokus auf den Absenden-Button, klicken muss der Mensch selbst. Mit dem Attribut sendet der Agent selbst.

Das Ergebnis bekommt der Agent standardmäßig dadurch, dass das Formular normal absendet und die Folgeseite lädt. Willst du ihm stattdessen ein strukturiertes Ergebnis ohne Seitenwechsel zurückgeben, fängst du das Submit-Event ab und antwortest über respondWith() (Code im untenstehenden Messabschnitt).

Imperativ: Aktionen als JavaScript-Funktionen

Ist die Aktion kein Formular, registrierst du das Tool über navigator.modelContext. Du gibst Name, Beschreibung, ein Eingabe-Schema und eine execute -Funktion an, die bei jedem Aufruf läuft. In execute rufst du einfach deine vorhandenen JavaScript-Funktionen auf, du musst nichts neu bauen:

navigator.modelContext.registerTool({
  name: "addToCart",
  description: "Fügt das angezeigte Produkt zum Warenkorb hinzu",
  inputSchema: {
    type: "object",
    properties: { quantity: { type: "integer", minimum: 1, default: 1 } }
  },
  async execute(args) {
    return doAddToCart(args);   // deine bestehende Logik
  }
});

So stellst du dem Browser eigene, klar umrissene Funktionen bereit und behältst volle Kontrolle über Schema und Ausführung. Aufrufbar sind nur die Tools, die du registrierst, eine neue Angriffsfläche für deine Seite entsteht dadurch nicht.

Wie du den KI-Agenten in deinem Tracking sichtbar machst

Die verbreiteten Pixel-/DOM-Agenten (Atlas, Comet, Claude for Chrome) laufen im Browser eines echten Nutzers und sehen in deinen Logs aus wie schnelle Menschen. WebMCP liefert dir das fehlende Signal, je nach API auf zwei Arten.

Imperativ ist am robustesten, weil dein Code bei jedem Aufruf ausgeführt wird. Du loggst direkt in der Funktion:

async ausfuehren(args) {
  gtag("event", "agent_call", { tool: "addToCart" });   // z.B. an Google Analytics 4
  return addToCartAusfuehren(args);
}

Deklarativ liefert der Browser das Signal frei Haus: Auf dem Submit-Event sitzt ein schreibgeschütztes Flag agentInvoked. Der Browser setzt es, du liest es nur, true , wenn ein Agent das Formular ausgelöst hat, false beim menschlichen Klick.

form.addEventListener("submit", (event) => {
  if (event.agentInvoked) {
    // 1) an Google Analytics 4 melden
    gtag("event", "agent_submit", { tool: form.getAttribute("toolname") });
    // 2) optional: ein strukturiertes Ergebnis an den Agenten zurückgeben
    event.preventDefault();
    event.respondWith(process(new FormData(form)));
    return;
  }
  // Mensch → normaler Ablauf
});

Gemessen wird im Browser, von dort schiebst du das Signal in deine Analytics (oben via gtag an Google Analytics 4, alternativ über den GTM- dataLayeroder gleich ins Data-Warehouse. So siehst du, wann der Kanal für dein Geschäft anspringt, statt im Dunkeln zu tappen.

Wo WebMCP heute steht

WebMCP ist ein offener Standard von Google und Microsoft in der W3C Web Machine Learning Community Group. Seit Mai 2026 steckt es im offiziellen Chrome, als Origin-Trial in Version 149, und lässt sich damit auf echten Seiten ausprobieren. Edge wird erwartet, Firefox und Safari haben nichts angekündigt. Und es ist modell-agnostisch: Du baust deine Tools einmal, jeder Agent, der den Standard spricht, kann sie nutzen.

Bisher konsumiert genau ein Agent WebMCP-Tools: Gemini in Chrome. Alle anderen (Claude, ChatGPT/Atlas, Perplexity, Edge) klicken und scrapen weiter. Real in Benutzung also, aber denkbar schmal: ein Agent, ein Browser, Testbetrieb.

Das kann sich aber schnell ändern. WebMCP sitzt in Chrome, dem Browser mit rund 65 % Marktanteil. Löst Google die Funktion aus der bezahlten US-Vorschau und rollt sie breit oder kostenlos aus, steigt die Reichweite um ein Vielfaches dessen, was eine einzelne Erweiterung wie Claude for Chrome je erreicht. Wann das kommt, ist offen.

Die Konsequenz: kleiner Aufwand jetzt, möglicherweise großer Kanal später. Bau WebMCP jetzt ein, wenn du den Mess-Vorsprung willst. Breiten Traffic musst du dieses Jahr nicht erwarten, aber wenn Google den Schalter umlegt, willst du nicht erst dann anfangen.

Wo anfangen

Fazit