WebMCP ermöglicht es React-Apps, strukturierte Tool-APIs direkt für KI-Agenten bereitzustellen, und ersetzt fragiles UI-Scraping durch zuverlässige, UI-unabhängige Aufrufe. Das Feature ist in einem Origin-Trial für Chrome 149 und höher verfügbar, und Sie können es über chrome://flags/#enable-webmcp-testing aktivieren.

Das Problem beim Beibringen von Klicks an Agenten

Die meisten aktuellen Versuche, KI-Agenten mit einer Webseite interagieren zu lassen, verlassen sich auf visuelle Hinweise. Ein Agent analysiert das DOM, errät, welches Element ein Button ist, simuliert Klicks, scrollt und füllt Formularfelder aus. Sobald sich ein Button verschiebt, ein Label ändert oder das Layout angepasst wird, schlägt das Skript fehl. Dieser Ansatz ist langsam, da er darauf warten muss, dass der Browser jeden Schritt rendert, und ein routinemäßiges Redesign kann eine gesamte Automatisierungspipeline unterbrechen.

WebMCP stellt das Modell auf den Kopf

WebMCP ist ein neuer Webstandard, der von Google Chrome eingeführt wurde. Anstatt eine visuelle Oberfläche zur Erkundung für den Agenten bereitzustellen, bewirbt eine Seite eine Reihe von Tools – benannte, typisierte Operationen, die die Seite ausführen kann. Ein KI-Agent fragt zuerst: „Welche Tools sind verfügbar?“; die Seite antwortet mit einer Liste wie „searchProducts“ oder „checkout“. Der Agent ruft dann ein Tool auf, indem er ein JSON-Payload sendet, das dem deklarierten Input-Schema des Tools entspricht, z. B. searchProducts(query: "jacket"). Der Browser leitet die Anfrage direkt an das JavaScript der Seite weiter, welches die zugrunde liegende Logik ohne jegliche UI-Beteiligung ausführt.

Das Ergebnis ist eine Interaktion, die sofort erfolgt, unabhängig von CSS-Änderungen funktioniert und so lange funktionsfähig bleibt, wie die Tool-Definitionen stabil bleiben.

Vorteile, die für Entwickler wichtig sind

  • Geschwindigkeit – Die Kommunikation bleibt innerhalb des Messaging-Systems des Browsers, wodurch der Roundtrip aus dem Rendern von Klicks und dem Warten auf Seitenaktualisierungen entfällt.
  • Zuverlässigkeit – Tools rufen dieselben Funktionen auf, die die Website bereits für ihre eigene UI verwendet, sodass ein Redesign die API nicht bricht.
  • Kontrolle – Entwickler entscheiden, welche Operationen offengelegt werden, welche Parameter sie akzeptieren und was der Agent in der Antwort sehen kann.
  • UI-Unabhängigkeit – Styling, Layout oder das Refactoring von Komponenten beeinflussen die Fähigkeit des Agenten, ein Feature aufzurufen, nicht mehr.

WebMCP ersetzt nicht das bestehende MCP (Message-Channel-Protocol), das serverseitig verwendet wird. MCP übernimmt weiterhin das Abrufen umfangreicher Daten und die Backend-Orchestrierung, während WebMCP die Live-Interaktionen innerhalb eines Tabs übernimmt.

So können React-Entwickler starten

React-Code kann Tools entweder über eine imperative JavaScript-API oder eine deklarative, auf HTML-Formularen basierende API registrieren. Ein gängiges Muster besteht darin, die Registrierung in einem Custom Hook zu kapseln:

  1. Rufen Sie eine Registrierungsfunktion mit dem Namen des Tools und einer kurzen Beschreibung auf.
  2. Geben Sie ein Input-Schema an (zum Beispiel ein JSON-Schema, das die erforderlichen Felder beschreibt).
  3. Stellen Sie einen execute-Callback bereit, der die bestehende Business-Logik ausführt – oft dieselbe Funktion, die ein Button-Klick auslösen würde.

Wenn der Hook ausgeführt wird, fügt der Browser das Tool dem WebMCP-Manifest der Seite hinzu. Ein KI-Agent, der das Manifest entdeckt, kann das Tool dann aufrufen, ohne jemals das DOM zu berühren.

Da die Registrierung zum Zeitpunkt des Component Mounts erfolgt, können Tools auf bestimmte Routen oder Feature-Flags beschränkt werden, was Teams eine granulare Kontrolle darüber gibt, was die KI in der Produktion im Vergleich zu einer Testumgebung tun kann.

Einschränkungen und worauf zu achten ist

WebMCP ist noch ein Origin-Trial. Es funktioniert nur in Chrome 149+ und muss manuell über ein Flag aktiviert werden.

Was als Nächstes kommt

Google hat den Trial für Entwickler geöffnet, die mit KI-nativen Web-Erlebnissen experimentieren möchten. Die nächsten Schritte für alle Interessierten sind:

  • Aktivieren Sie das Flag in Chrome und laden Sie die Zielseite neu.
  • Fügen Sie eine einfache Tool-Registrierung in einer React-Komponente hinzu und beobachten Sie, wie das Manifest in den DevTools des Browsers erscheint.
  • Testen Sie einen KI-Client (zum Beispiel ein lokales Skript, das das WebMCP-Protokoll befolgt), um das Tool aufzurufen und die Antwort zu verifizieren.
  • Verfolgen Sie die Statusseite des Trials für Updates zur stabilen Veröffentlichung.

Fazit: WebMCP bietet React-Entwicklern die Möglichkeit, ihre Apps direkt für KI-Agenten aufrufbar zu machen, indem UI-Elemente in stabile, typisierte Dienste umgewandelt werden. Dieser Wandel beseitigt den Wartungsalbtraum des Screen-Scrapings und ebnet den Weg für echte KI-native Webanwendungen – vorausgesetzt, die Teams fühlen sich wohl dabei, in einer experimentellen Chrome-Umgebung zu arbeiten.