🧭Architektur: drei Wege zum selben Ziel

Aufgabe: „Lege 2 Vollkornbrote in den Warenkorb.“ Schalte die Sequenzdiagramme Schritt für Schritt durch und vergleiche, wie viele Modellaufrufe und unsichere Schritte jeder Weg braucht. Die Abläufe folgen den Diagrammen im Explainer [W3C].
🧑 Nutzer🤖 Agent (im Browser)🧠 KI-Modell🌐 Browser🛒 Webseite1. registerTool(warenkorb_aendern)
1/11
🛒 Webseite🌐 Browser
registerTool(warenkorb_aendern)

Schon beim Laden meldet die Seite ihre Tools an – mit Beschreibung und JSON Schema. Sie laufen im Seitenkontext mit Sitzung und Cookies der Nutzerin.

await document.modelContext.registerTool({ name: "warenkorb_aendern", … })

Tipp: Pfeiltasten ← → schalten ebenfalls weiter.

⚖️ MCP und WebMCP im Vergleich

„WebMCP is not an extension or a replacement of MCP.“ Chrome vergleicht es mit Callcenter (MCP, überall erreichbar) und Fachberatung im Laden (WebMCP, nur auf der eigenen Website). Am besten wirken beide zusammen. [Chrome]

Merkmal🗄️ MCP (Backend)🧰 WebMCP (Frontend)
ZweckDaten und Aktionen für Agenten überall und jederzeit verfügbar machenEine geöffnete Website sofort für Agenten bedienbar machen
Wo läuft der Code?Eigener Server-Prozess (lokal oder entfernt)Im JavaScript der Webseite, im Tab der Nutzerin
TransportJSON-RPC über stdio oder HTTPBrowser-API – der Browser vermittelt zwischen Seite und Agent
LebenszyklusDauerhaft (Server, Daemon)Flüchtig – an den Tab gebunden
Anmeldung & ZustandEigene Authentifizierung, eigener ZustandNutzt Sitzung, Cookies und DOM der geöffneten Seite
BausteineTools, Ressourcen, Prompts u. a.Tools (serverseitige Konzepte wie Ressourcen entfallen)
DiscoveryAgenten-spezifische RegistrierungTools werden beim Besuch der Seite registriert
UIHeadless / externBrowser-integriert, DOM-bewusst, UI bleibt sichtbar
ReichweiteGlobal: Desktop, Mobil, Cloud, WebNur Browser-Agenten (eingebaut, Erweiterung, iframe)

Quellen: Chrome „When to use WebMCP and MCP“ [Chrome] und Explainer [W3C].

🔁 Lebenszyklus eines Tool-Aufrufs

1
Registrierung

Die Seite ruft registerTool() auf (oder annotiert ein Formular).

2
Discovery

Ein verbundener Agent fragt den Browser nach den aktiven Tools und Schemas.

3
Aufruf

Der Agent fordert einen Tool-Aufruf mit Argumenten passend zum inputSchema an.

4
Ausführung

Der Browser vermittelt und ruft den execute-Callback der Seite auf.

5
Antwort

Das Ergebnis geht zurück an den Agenten, der mit der Nutzerin weiterarbeitet.

Nach „Lifecycle of a Tool Call“ im Explainer [W3C].

🛡️ Sicherheits- und Berechtigungsmodell

Von außen nach innen: Jede Schicht muss passen, bevor der execute()-Callback einer Seite läuft. Klicke auf eine Schicht.

⚙️ execute() der Seite
🔒

Schicht 1: Sicherer Kontext

document.modelContext existiert nur in sicheren Kontexten – also über HTTPS oder auf localhost. Auf http:// fehlt die API einfach. [W3C]

Noch offen im Entwurf
Native Prüfung der Argumente gegen das Schema (Issue #92), ein outputSchema (Issue #9), Rückfragen an die Nutzerin aus dem Tool heraus (Issue #165/#50), Antworten bei Formular-Navigation (Issue #135) und Tools in Service Workers. [W3C]

📐 Die API auf einen Blick (WebIDL)

Auszug aus dem Spezifikationsentwurf vom 17.09.2026 (Kommentare ergänzt). provideContext(), clearContext() undunregisterTool() aus der frühen Vorschau gibt es darin nicht mehr – Abmelden geht über ein AbortSignal. [W3C] [PR #132] [PR #156]

webmcp.idl (Auszug)
partial interface Document {
  [SecureContext, SameObject] readonly attribute ModelContext modelContext;
};

[Exposed=Window, SecureContext]
interface ModelContext : EventTarget {
  Promise<undefined> registerTool(ModelContextTool tool, optional ModelContextRegisterToolOptions options = {});
  Promise<sequence<RegisteredTool>> getTools(optional ModelContextGetToolOptions options = {});
  Promise<DOMString> executeTool(RegisteredTool tool, optional any inputObject, optional ModelContextExecuteToolOptions options = {});
  attribute EventHandler ontoolchange;
  attribute EventHandler ontoolactivated;
  attribute EventHandler ontoolcancel;
};

dictionary ModelContextTool {
  required DOMString name;         // 1–128 Zeichen: A–Z a–z 0–9 _ - .
  USVString title;
  required DOMString description;  // darf nicht leer sein
  object inputSchema;              // JSON Schema, muss serialisierbar sein
  required ToolExecuteCallback execute;
  ToolAnnotations annotations;
};

dictionary ModelContextRegisterToolOptions {
  sequence<USVString> exposedTo;
  AbortSignal signal;              // abort() meldet das Tool ab
};