WebMCP entmystifiziert: deine Website agent-bereit für E-Commerce und CMS

KI-Agenten werden zu einem echten Teil davon, wie Menschen mit dem Web interagieren. Sie suchen Produkte, füllen Formulare aus, buchen Termine und schließen Käufe ab, alles indem sie in deinem Namen Websites durchsuchen. Aber es gibt ein grundlegendes Problem: Websites sind für Menschen gebaut, nicht für Maschinen.

Ein KI-Agent, der auf deine E-Commerce-Website schaut, sieht ein Durcheinander aus divs, Buttons und Formularen. Er muss raten, was jedes Element tut, was zu langsamen, fehleranfälligen Interaktionen führt. WebMCP löst das, indem es dich genau sagen lässt, was deine Website kann, in einer Sprache, die Agenten verstehen.

WebMCP ist ein neuer Browser-Standard (derzeit im Origin Trial, Chrome 149+), mit dem du die Funktionalität deiner Website als strukturierte "Tools" für KI-Agenten bereitstellen kannst. Keine Backend-Änderungen, keine separaten APIs. Nur deine bestehende Website, agentenfreundlich gemacht.

In diesem Artikel erklären wir, was WebMCP ist, was es für E-Commerce- und CMS-Websites ermöglicht und wie du es nutzen kannst, ob du Entwickler oder Website-Betreiber bist.

Was ist WebMCP?

WebMCP (Web Model Context Protocol) ist ein vorgeschlagener W3C-Standard, der zwei komplementäre APIs zum Registrieren von Tools auf einer Webseite bereitstellt:

• Die imperative API: JavaScript-basierte Tool-Registrierung über document.modelContext.registerTool()
• Die deklarative API: HTML-Attribut-Annotationen auf bestehenden <form>-Elementen (toolname, tooldescription, toolparamdescription)

Beide APIs dienen demselben Zweck: Sie machen die Fähigkeiten deiner Website für KI-Agenten, die im Browser laufen (Chromiums integrierter Agent, Browser-Erweiterungen oder andere Agenten-Plattformen), auffindbar und ausführbar.

Wie es funktioniert

┌─────────────────────────────────────────────┐
│              Web Browser                     │
│  ┌───────────────────────────────────────┐  │
│  │  Running Page (your website)          │  │
│  │  ┌─────────────────────────────────┐  │  │
│  │  │  WebMCP Tools                   │  │  │
│  │  │  - search_products()            │  │  │
│  │  │  - add_to_cart()                │  │  │
│  │  │  - submit_order()               │  │  │
│  │  └─────────────────────────────────┘  │  │
│  └───────────────────────────────────────┘  │
│              │                               │
│  Browser AI Agent                           │
└──────────────┼───────────────────────────────┘
               │
    Agent invokes tools → UI updates visibly

Der entscheidende Unterschied zu traditionellen Backend-Integrationen (wie MCP-Servern) ist, dass WebMCP-Tools im Browser-Tab laufen, auf der Seite, die der Nutzer bereits ansieht. Der Agent agiert auf dem Live-DOM, in der Sitzung des Nutzers, mit vollem Zugriff auf Cookies, Authentifizierungsstatus und Echtzeitdaten.

Was WebMCP für E-Commerce ermöglicht

Suche und Produktentdeckung

Statt dass ein Agent durch Hunderte Produktseiten scrollt, um zu finden, was zu einer Nutzeranfrage passt, lässt ein gut definiertes search_products-Tool den Agenten deinen Katalog direkt abfragen:

await document.modelContext.registerTool({
  name: "search_products",
  description: "Search the product catalog by category, price range, and features.",
  inputSchema: {
    type: "object",
    properties: {
      category: { type: "string", description: "Product category" },
      max_price: { type: "number", description: "Maximum price in EUR" },
      features: {
        type: "array",
        items: { type: "string" },
        description: "Required features, e.g. ['organic', 'gluten-free']"
      }
    },
    required: ["category"]
  },
  async execute({ category, max_price, features }) {
    const results = await fetch(`/api/products?category=${category}&max_price=${max_price}&features=${features.join(",")}`);
    return results.json();
  }
});

Ein Nutzer kann dann sagen: "Finde mir Bio-Babynahrung unter 5 € für mein 1-jähriges Kind", und der Agent ruft dein Tool direkt auf und liefert strukturierte Ergebnisse zurück, die deine UI bereits darstellen kann.

Checkout- und Kaufabläufe

WebMCP-Tools können Agenten durch komplexe Checkout-Reisen führen:

Das ist besonders wertvoll bei Wiederholungskäufen. Ein Nutzer, der fragt "Bestelle die Kaffeebohnen nach, die ich letzten Monat gekauft habe", kann von einem get_order_history()-Tool bedient werden, das vergangene Bestellungen zurückgibt, gefolgt von add_to_cart() und submit_order().

Kundensupport

Komplexe Support-Abläufe (Garantieansprüche, Rücksendungen, Umtausch) erfordern oft das Navigieren durch mehrere Seiten und Formulare. WebMCP-Tools können:

• zur richtigen Support-Seite navigieren (start_claim_process())
• bekannte Felder vorausfüllen (populate_product_details())
• das ausgefüllte Formular absenden (submit_claim())

Der Nutzer sieht, wie das Formular in Echtzeit auf seinem Bildschirm ausgefüllt wird, was Vertrauen und Sichtbarkeit erhält.

Was WebMCP für CMS ermöglicht

Inhaltssuche und -abruf

Eine CMS-basierte Website kann Suche und Filterung als Tools bereitstellen:

await document.modelContext.registerTool({
  name: "search_articles",
  description: "Search articles by topic, date, author, or keywords.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "Search query" },
      category: { type: "string", description: "Article category" },
      date_from: { type: "string", description: "Start date (YYYY-MM-DD)" },
      date_to: { type: "string", description: "End date (YYYY-MM-DD)" }
    },
    required: ["query"]
  },
  async execute({ query, category, date_from, date_to }) {
    // Query your CMS search index
    return await cmsSearch({ query, category, date_from, date_to });
  }
});

Formularbasierte Interaktionen

CMS-Websites haben oft Kontaktformulare, Newsletter-Anmeldungen, Event-Registrierungen und Buchungssysteme. Die deklarative API lässt dich diese mit nur wenigen HTML-Attributen in WebMCP-Tools verwandeln, ohne JavaScript.

<form
  toolname="book_event"
  tooldescription="Register for a public event at our venue."
  toolautosubmit
>
  <label for="name">Full Name</label>
  <input name="name" type="text"
    toolparamdescription="Attendee's full name" required />

  <label for="email">Email</label>
  <input name="email" type="email"
    toolparamdescription="Contact email address" required />

  <label for="date">Event Date</label>
  <input name="date" type="date"
    toolparamdescription="Date of the event" required />

  <label for="guests">Number of Guests</label>
  <select name="guests"
    toolparamdescription="Number of attendees (1-50)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option>
  </select>

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

Wenn ein Agent dieses Tool aufruft, fokussiert der Browser das Formular, füllt die Felder aus und sendet es mit toolautosubmit automatisch ab. Der Nutzer sieht alles auf dem Bildschirm geschehen.

Inhaltsfilterung und Navigation

Für Websites mit großen Inhaltssammlungen (Nachrichtenportale, Kataloge, Dokumentation) lassen Filter-Tools Agenten Ergebnisse präzise eingrenzen:

await document.modelContext.registerTool({
  name: "filter_articles",
  description: "Refine article results by reading time, language, or tags.",
  inputSchema: {
    type: "object",
    properties: {
      max_read_time: { type: "number", description: "Maximum reading time in minutes" },
      language: {
        type: "string",
        enum: ["en", "fr", "de", "es"],
        description: "Article language"
      },
      tags: {
        type: "array",
        items: { type: "string" },
        description: "Article tags to include"
      }
    }
  },
  async execute({ max_read_time, language, tags }) {
    // Apply filters to current results
    return applyFilters({ max_read_time, language, tags });
  }
});

Deklarativ vs. imperativ: Welche solltest du verwenden?

WebMCP bietet zwei APIs. Sie konkurrieren nicht, sie ergänzen sich. So wählst du.

Die deklarative API

Was sie ist: Du fügst HTML-Attribute zu bestehenden <form>-Elementen hinzu. Das war's. Kein JavaScript.

Am besten für:

• Formulare, die bereits existieren und für menschliche Nutzer funktionieren
• Kontaktformulare, Registrierung, Buchung, Suchformulare
• Websites, die mit CMS-Plattformen gebaut sind, die Formular-HTML generieren
• Schnelle Erfolge: Du kannst WebMCP-Unterstützung in Minuten zu einer bestehenden Website hinzufügen

Vorteile:

• Kein JavaScript erforderlich
• Funktioniert mit jedem HTML-Formular
• Einfach neben deinem bestehenden Markup zu pflegen
• Ideal für einfache, strukturierte Datenerfassung

Nachteile:

• Auf formularbasierte Interaktionen beschränkt
• Weniger Kontrolle über die Ausführungslogik
• Kann Tools nicht dynamisch je nach Seitenzustand registrieren/deregistrieren
• Schema-Generierung ist implizit (basierend auf der Formularstruktur)

Verwende sie, wenn: Dein Hauptbedarf darin besteht, Formulare für Agenten zugänglich zu machen. Wenn die wichtigsten Interaktionen deiner Website Formularübermittlungen sind (Kontakt, Buchung, Suche, Registrierung), fang hier an.

Die imperative API

Was sie ist: Du rufst document.modelContext.registerTool() aus JavaScript auf und definierst Tools mit Namen, Beschreibungen, JSON-Schemas und execute-Funktionen.

Am besten für:

• Komplexe Interaktionen jenseits von Formularen (Produktsuche, Warenkorbverwaltung, Filterung)
• Dynamische Tool-Registrierung (Tools, die je nach Kontext erscheinen/verschwinden)
• Tools, die APIs aufrufen, Daten transformieren oder strukturierte Ergebnisse zurückgeben müssen
• Websites, die feinkörnige Kontrolle über das Agentenverhalten brauchen

Vorteile:

• Volle Kontrolle über Tool-Verhalten und Rückgabewerte
• Dynamische Registrierung und Deregistrierung
• Kann Backend-APIs aufrufen, Daten transformieren, JSON zurückgeben
• Reichhaltige JSON-Schema-Unterstützung (Enums, Typen, Validierung)
• Cross-Origin-iframe-Unterstützung mit exposedTo

Nachteile:

• Erfordert eine JavaScript-Implementierung
• Mehr Entwicklungsaufwand
• Muss das Tool-Lifecycle-Management übernehmen

Verwende sie, wenn: Deine Interaktionen über einfache Formularübermittlungen hinausgehen: E-Commerce-Produktkataloge, dynamische Filterung, mehrstufige Workflows oder jedes Szenario, in dem du strukturierte Daten aus einer Tool-Ausführung zurückgeben musst.

Entscheidungsmatrix

Kannst du beide verwenden?

Absolut. Eine gut gestaltete Website könnte die deklarative API für statische Formulare (Kontakt, Newsletter) und die imperative API für dynamische Interaktionen (Produktsuche, Warenkorbverwaltung) verwenden. Sie koexistieren auf derselben Seite ohne Konflikt.

WebMCP vs. MCP: Keine Konkurrenten, sondern Partner

Es ist wichtig zu verstehen, dass WebMCP kein Ersatz für das Model Context Protocol (MCP) ist. Sie lösen unterschiedliche Probleme:

Denk es so: MCP ist deine Backend-Service-Schicht: Sie übernimmt Kern-Geschäftslogik, Datenabruf und Hintergrundaufgaben. WebMCP ist deine Frontend-Schicht: Sie verbindet Agenten direkt mit der Website, die der Nutzer ansieht, und ermöglicht kontextuelle Interaktionen im Browser.

Die effektivsten agentischen Anwendungen nutzen beide: MCP für die Schwerarbeit (Daten, Authentifizierung, Geschäftslogik) und WebMCP für die interaktive Erfahrung (UI-Aktion, Echtzeit-Feedback, Human-in-the-Loop-Workflows).

Erste Schritte

Verfügbarkeit

WebMCP ist derzeit in Chrome 149+ über einen Origin Trial verfügbar. Um teilzunehmen:

1. Registriere dich für den Origin Trial im Origin-Trial-Portal von Chrome
2. Füge das Origin-Trial-Meta-Tag zu deinem HTML hinzu
3. Implementiere deine Tools mit einer der beiden APIs

Für die lokale Entwicklung kannst du WebMCP über chrome://flags/#enable-webmcp-testing aktivieren.

Sicherheit

WebMCP-Tools sind eingeschränkt durch:

• Origin-Isolation: Tools funktionieren nur in origin-isolierten Dokumenten
• Permissions Policy: die tools-Policy ist standardmäßig self und deaktiviert Tools in Cross-Origin-iframes, sofern nicht explizit mit allow="tools" erlaubt

Tools sind flüchtig: Sie existieren nur, solange die Seite offen ist. Sobald der Nutzer wegnavigiert oder den Tab schließt, verliert der Agent den Zugriff.

Best Practices

1. Ein Tool, eine Aufgabe: Jedes Tool sollte eine einzige, klar definierte Aufgabe erfüllen. Vermeide überlappende Tools.
2. Klare Benennung: Verwende Verben, die genau beschreiben, was passiert (create-event statt start-event-creation-process).
3. Positive Beschreibungen: Beschreibe, was ein Tool kann, nicht was es nicht kann.
4. Rohe Eingaben akzeptieren: Verlange nicht, dass der Agent Berechnungen durchführt oder Strings formatiert. Lass das Tool das übernehmen.
5. Streng im Code validieren, locker im Schema: Schema-Beschränkungen helfen, sind aber nicht garantiert.
6. Tool-Lifecycle verwalten: Registriere Tools, wenn sie relevant sind, deregistriere sie, wenn nicht.
7. Vertraue dem Agenten: Beschreibe Fähigkeiten, schreibe keine exakten Abläufe vor.

Praxisbeispiele

Google hat mehrere Demos veröffentlicht, die WebMCP in Aktion zeigen:

• Pizza Maker (imperativ): Pizza mit geschichteter Anpassung bestellen
• Flight Search (imperativ, React): Flüge mit komplexen Filtern suchen
• Le Petit Bistro (deklarativ): Restaurantreservierungsformular mit HTML-Annotationen

Diese Demos zeigen die beiden APIs nebeneinander und sind ein großartiger Ausgangspunkt für Experimente.

Wie geht es weiter?

WebMCP ist noch in aktiver Entwicklung. Die Spezifikation wird auf GitHub verfeinert, und Chromes Implementierung kann sich ändern. Auch Angular hat experimentelle Unterstützung für die WebMCP-Tool-Registrierung.

Für Entwickler, die E-Commerce-Plattformen, CMS-Lösungen oder jede Webanwendung bauen, in der KI-Agenten mit nutzerseitigen Seiten interagieren müssen, stellt WebMCP einen grundlegenden Wandel dar: Statt dass Agenten raten, wie deine Website funktioniert, sagt deine Website ihnen genau, was sie kann.

Das Ergebnis sind schnellere, zuverlässigere und transparentere Interaktionen, bei denen der Nutzer immer die Kontrolle behält.

Dieser Artikel basiert auf der offiziellen Chrome-Entwicklerdokumentation, der W3C-WebMCP-Spezifikation und Googles WebMCP-Demos. WebMCP ist ein vorgeschlagener Standard und kann sich ändern.