WebMCP: So bietet deine Website KI-Agenten Werkzeuge an

So funktioniert WebMCP: deklarativ und imperativ

WebMCP kennt zwei Wege, Tools anzumelden. Der deklarative Weg arbeitet mit HTML und passt zu Formularen, die es schon gibt. Der imperative Weg arbeitet dagegen mit JavaScript und passt zu allem, was komplexer ist. Beide zeigt die Chrome-Dokumentation mit Beispielen, die hier unverändert stehen.

Deklarativ: Ein Formular wird zum Tool

Beim deklarativen Weg bekommt ein vorhandenes Formular zwei zusätzliche Attribute: toolname für den Namen und tooldescription für die Beschreibung. Die Formularfelder werden dabei automatisch zu Parametern. Fehlt eine eigene Feldbeschreibung, nimmt Chrome den Text des zugehörigen Labels.

<form toolname="supportRequestTool"
  tooldescription="Submit a request for support."
  action="/submit">
  <label for="firstName">First Name</label>
  <input type=text name=firstName>
  <label for="lastName">Last Name</label>
  <input type=text name=lastName>
  <select name="select" required
    toolparamdescription="Determines what team this request is routed to.">
    <option value="Customer happiness team">Return my purchase.</option>
    <option value="Distribution team">Check where my package is.</option>
    <option value="Website support team">Get help on the website.</option>
  </select>
  <button type=submit>Submit</button>
</form>

Das Beispiel leitet eine Support-Anfrage über das Auswahlfeld an das richtige Team. Wichtig ist dabei das Attribut toolautosubmit: Fehlt es, füllt der Agent das Formular nur aus, und der Mensch klickt selbst auf Absenden. Für Anfragen, Bestellungen und Buchungen ist genau das die sichere Voreinstellung. Allerdings stehen die deklarativen Attribute bisher nur im Explainer und in Chromes Umsetzung, noch nicht in der Spezifikation.

Imperativ: Tools per JavaScript anmelden

Der imperative Weg nutzt die Schnittstelle document.modelContext. Über registerTool() meldet die Seite ein Tool mit Name, Beschreibung, einem JSON-Schema für die Eingaben und einer Funktion an, die beim Aufruf läuft. Das funktioniert nur auf Seiten mit HTTPS.

await document.modelContext.registerTool({
  name: 'book_flight',
  description: 'Book a flight for the user with confirmed flight details.',
  inputSchema: {
    type: 'object',
    properties: {
      flightId: { type: 'string', description: 'ID of the flight to book' },
      passengers: { type: 'number', description: 'Number of tickets to purchase' },
    },
    required: ['flightId', 'passengers'],
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
    untrustedContentHint: false,
    debugging: false,
  },
  execute: async ({ flightId, passengers }) => {
    // Add your flight booking transaction logic here.
    return `Booked ${passengers} passenger(s) on flight ${flightId}.`;
  },
});

Neu sind die Annotationen. Mit consequentialHint markiert die Seite eine Aktion mit Folgen, etwa eine Buchung, und readOnlyHint kennzeichnet reine Abfragen. Das sind allerdings nur Hinweise an Browser und Agent, keine Sperre. Ältere Anleitungen zeigen außerdem noch navigator.modelContext und die Methode provideContext(). Beides ist überholt, denn die Methode wurde im März 2026 entfernt, und die Schnittstelle hängt heute an document.

WebMCP testen ohne Origin Trial

Zum Ausprobieren reicht ein aktuelles Chrome. Unter chrome://flags/#enable-webmcp-testing schaltest du WebMCP lokal frei. Die Chrome-Erweiterung „Model Context Tool Inspector“ zeigt dann, welche Tools eine Seite anmeldet, und ruft sie zum Test auf. Für echte Besucher braucht die Website dagegen einen Freischalt-Schlüssel aus dem Origin Trial.