🧭Architektur: drei Wege zum selben Ziel
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) |
|---|---|---|
| Zweck | Daten und Aktionen für Agenten überall und jederzeit verfügbar machen | Eine 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 |
| Transport | JSON-RPC über stdio oder HTTP | Browser-API – der Browser vermittelt zwischen Seite und Agent |
| Lebenszyklus | Dauerhaft (Server, Daemon) | Flüchtig – an den Tab gebunden |
| Anmeldung & Zustand | Eigene Authentifizierung, eigener Zustand | Nutzt Sitzung, Cookies und DOM der geöffneten Seite |
| Bausteine | Tools, Ressourcen, Prompts u. a. | Tools (serverseitige Konzepte wie Ressourcen entfallen) |
| Discovery | Agenten-spezifische Registrierung | Tools werden beim Besuch der Seite registriert |
| UI | Headless / extern | Browser-integriert, DOM-bewusst, UI bleibt sichtbar |
| Reichweite | Global: Desktop, Mobil, Cloud, Web | Nur Browser-Agenten (eingebaut, Erweiterung, iframe) |
Quellen: Chrome „When to use WebMCP and MCP“ [Chrome] und Explainer [W3C].
🔁 Lebenszyklus eines Tool-Aufrufs
Die Seite ruft registerTool() auf (oder annotiert ein Formular).
Ein verbundener Agent fragt den Browser nach den aktiven Tools und Schemas.
Der Agent fordert einen Tool-Aufruf mit Argumenten passend zum inputSchema an.
Der Browser vermittelt und ruft den execute-Callback der Seite auf.
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.
Schicht 1: Sicherer Kontext
document.modelContext existiert nur in sicheren Kontexten – also über HTTPS oder auf localhost. Auf http:// fehlt die API einfach. [W3C]
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]
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
};