Back

Schluss mit dem Rätselraten: So macht WebMCP Ihre Website selbstständig

 

Derzeit sind KI-Agenten gezwungen, über Schnittstellen mit dem Web zu interagieren, die ausschließlich für Menschen konzipiert sind. Sie müssen durch die Analyse von Pixeln und komplexen DOM-Strukturen, den mitunter umfangreichen Quellcodes von Websites, erraten, welche Aktionen möglich sind. Diese Abhängigkeit von für Menschen bestimmten Web-Elementen wie visuellem Scraping und tokenintensiven Bildverarbeitungsmodellen macht ihre Navigation instabil, fehleranfällig und stark eingeschränkt.

Google und Microsoft beenden diese Ära des Rätselratens mit WebMCP (Web Model Context Protocol). Diese neue Browsertechnologie ermöglicht es Websites, in der Muttersprache der KI zu kommunizieren. Durch die Umgehung der menschlichen Benutzeroberfläche stellen Sie Agenten eine optimierte Liste zulässiger Aktionen zur Verfügung und verwandeln Ihre Website von einem visuellen Dokument in ein deterministisches, strukturiertes Werkzeug.

Obwohl es sich hierbei um eine gemeinsame Entwicklung von Google Chrome und Microsoft Edge handelt, ist es sehr wahrscheinlich, dass Apple und Samsung diese Technologie in ihre Browser Safari und Samsung Internet Browser integrieren werden, und auch Perplexity könnte seinen Comet-Browser mit dem WebMCP-Standard erweitern.

Von Pixeln zu Präzision: Der Agenten-Handshake

Anstatt dass ein Agent versucht, eine komplexe Benutzeroberfläche zu interpretieren, teilt Ihre Website dem Browser explizit mit:

„Ich habe ein Tool namens ‚book_appointment‘. Es benötigt ein Datum und eine Dienstart. Hier ist das JSON-Schema, um es aufzurufen.“

WebMCP

Durch die Implementierung dieses „Handshakes“ profitieren Unternehmen von unmittelbaren strategischen Vorteilen:

  • 98 % Aufgabenpräzision: Durch die Bereitstellung strukturierter JSON-Schemas vermeiden Sie das Rätselraten, das zu „Halluzinationen“ führt. ¹
  • 89 % Token-Einsparung: Agenten müssen keine umfangreichen Screenshots oder DOM-Bäume mehr verarbeiten, was die Kosten für KI-Interaktionen erheblich senkt. ¹
  • Entkoppelte Stabilität: Ihr Marketingteam kann das gesamte Frontend neu gestalten, ohne die KI-Integrationen zu beeinträchtigen, da der zugrunde liegende „Tool-Vertrag“ weiterhin gilt.
  • Native Sicherheit: Im Gegensatz zu Backend-Integrationen nutzt WebMCP die bestehende Browsersitzung und die Cookies des Benutzers; das bedeutet, dass keine separaten API-Schlüssel oder komplexen OAuth-Abläufe erforderlich sind, damit der Agent agieren kann.

Und für die Marketer unter uns: Interaktionen zwischen Benutzern und KI-Bots können theoretisch gemeinsam in einer einzigen Sitzung nachverfolgt werden.

Die Wahl Ihres KI-Integrationspfads

Nicht alle KI-Integrationen sind gleich. Und wie sieht es mit ChatGPT-Apps aus? Nachfolgend finden Sie einen Vergleich aktueller und zukünftiger Methoden, der Ihnen dabei helfen soll, die beste „Agentic“-Strategie für Ihr Unternehmen zu ermitteln.

Dimension

Browser Automation (Legacy)

Backend MCP (Server-side)

WebMCP (Die Zukunft)

OpenAI App.SDK (ChatGPT-App)

Methode

DOM-Scraping / Bildverarbeitungsmodelle

JSON-RPC Server-zu-Server

Clientseitiger Browser-Standard (nativ in Chrome/Edge)

Sandbox-iFrame (REACT-Frontend-Code)

Token-Effizienz

Sehr schlecht: Hunderttausende von Tokens pro Sitzung

Vorteil: Strukturierter Datenaustausch

Hervorragend: 89 % weniger Token im Vergleich zur herkömmlichen Automatisierung ²

Variabel: Abhängig von der Komplexität des Widgets und den Metadaten

Ausführungsgenauigkeit

~70 %: Instabil; wird durch UI-Aktualisierungen unterbrochen

Vorteil: Nutzt deterministische serverseitige Logik

98%: Basiert auf strukturierten JSON-Schemas ²

Hoch: Verwendet deterministische Tool-Aufrufe

Sicherheit & Authentifizierung

Fehlt: Funktioniert als externes Modul; löst häufig Bot-Erkennung aus

Eingeschränkt: Erfordert separate API-Schlüssel und serverseitige Verwaltung

Nativ: Nutzt bestehende Browsersitzungen, SSO und Cookies

Isoliert: Verwendet Tokens/OAuth-Abläufe (Allianz IAM); OpenAI sieht den verarbeiteten Text

Komplexität der Einrichtung

Hoch: Erfordert benutzerdefinierte Skripte und ständige Wartung

Mittel: Erfordert die Bereitstellung und Verwaltung eines eigenen Servers

Minimal: Implementierung über einfache HTML-Attribute und Standard-JS

Mittel/Hoch: Erfordert die Entwicklung einer vollständigen Web-App und eine Überprüfung durch OpenAI

Potenzielle Reichweite

Hoch: Funktioniert auf jeder öffentlichen Website (wenn auch unzuverlässig)

Mäßig: Beschränkt auf bestimmte Unternehmens- oder serverseitige Integrationen

Sehr hoch: Für jeden Endnutzer über alle gängigen kompatiblen Browser

Niedrig: Exklusiv für ChatGPT Plus-, Team- und Enterprise-Nutzer 

Warum MarTech „Agentic SEO“ braucht

Wir treten in eine Ära ein, in der man nicht mehr nur für menschliche Augen optimiert, sondern auch für den Modellkontext.

Der strategische Wandel: So wie Marken in den 2000er Jahren die Google-Suche erobert haben, definieren zukunftsorientierte Unternehmen nun ihre Tool-Manifeste.

Betrachten Sie dies als UX für Agenten, also AX (Agent Experience Optimization): das Verfassen von Beschreibungen in natürlicher Sprache für Ihre Web-Tools, damit Gemini, Copilot oder Claude genau wissen, wann und wie sie Ihren Service einem Nutzer empfehlen sollen. Wenn Ihre Tool-Beschreibung lautet: „Verwenden Sie dies, um das beste Hotel und Zimmer für Ihren Nutzer zu finden“, kann der Agent sofort die Lücke zwischen der Frage eines Nutzers und Ihrem Konversionsformular schließen.

Die drei Säulen der Zusammenarbeit

1. Kontext: Der Browser vermittelt dem Agenten einen Eindruck von der Seite (einschließlich Daten, die für das menschliche Auge derzeit nicht sichtbar sind).

2. Funktionen: Sie registrieren bestimmte Funktionen (z. B. search_flights), die der Agent direkt aufruft.

3. Koordination: Der Browser fungiert als Vertrauensebene und sorgt dafür, dass kritische Vorgänge wie Zahlungen nur nach einer Bestätigung durch einen Menschen erfolgen.

Für technisch Versierte: Eine 4-Schritt-Anleitung für die Sandbox, wie man WebMCP bereits jetzt testen und nutzen kann

Sie können den „Agentic Handshake“ bereits heute in Chrome 146 (Canary) testen.

Wenn Sie Chrome Canary noch nicht haben, können Sie es hier herunterladen: Chrome Canary

  1. Gehen Sie dann zu chrome://flags/#enable-webmcp-testing
  2. Aktivieren Sie „WebMCP for testing“
  3. Installieren Sie die Erweiterung
  4. Und probieren Sie eine dieser Demoseiten aus

Wenn Sie Hilfe benötigen, kontaktieren Sie uns und wir schauen uns an, wie WebMCP Ihre Website agent-fähig machen kann.

Die Demo-Website enthält keine für Menschen nutzbaren Elemente wie Schaltflächen oder Eingabeformulare.

Im Quellcode der Seite teilen wir den KI-Agenten jedoch mit, dass die Farbe des Kreisbereichs nach Belieben angepasst werden kann.

  1. Über ein Chatfenster teilen wir dem Sprachmodell Google Gemini mit, dass wir Websites in Gelb bevorzugen.
  2. Gemini entscheidet nun, dass es die zulässige Funktion nutzen kann, um den Kreis in einem Gelbton zu färben.
  3. In weiteren Chat-Einträgen ändern wir unsere Meinung über unseren KI-Agenten Gemini, und dieser reagiert sofort.

Verwendete Quellen und weiterführende Literatur:

  • WebMCP-Entwurf des W3C: Die offizielle Spezifikation, in der die API-Architektur, die Terminologie und Sicherheitsaspekte detailliert beschrieben werden.
  • Chrome for Developers Blog: Die offizielle Ankündigung von Google (verfasst von André Cipriani Bandarra) mit Einzelheiten zum Early-Preview-Programm, Leistungsstatistiken und Anwendungsbeispielen.

Technische Demonstrationen & Code

  • Beispiele zum OpenAI Apps SDK (GitHub): Das offizielle Repository mit Beispielen für UI-Komponenten, Widgets und MCP-Server-Integrationen für ChatGPT.
  • Offizielle WebMCP-Reisedemo: Eine vom Chrome-Team bereitgestellte Live-Umgebung zum Testen des „Agentic Handshake“ mithilfe eines searchFlights-Tools.

Branchenanalyse & Community-Ressourcen

FAQ: Das Wichtigste zum „Decision Maker“

Was genau ist WebMCP?

WebMCP steht für „Web Model Context Protocol“. Es handelt sich um einen von Google und Microsoft gemeinsam entwickelten Webstandard, der es einer Website ermöglicht, strukturierte Tools direkt für KI-Agenten im Browser bereitzustellen. Stellen Sie sich das als eine Art „Handshake“ vor, der Ihre visuelle Webseite in eine maschinenlesbare Tool-Oberfläche verwandelt.

Wie verbessert es die KI-Leistung?

Herkömmliche Agenten „raten“ sich mithilfe von Screenshots und DOM-Scraping durch Ihre Website, was zu einer Genauigkeit von etwa 70 % führt. ² WebMCP verändert die Spielregeln:

  • 98 % Aufgaben-Genauigkeit: Agenten verwenden strukturierte JSON-Schemas anstelle von visuellen Vermutungen. ²
  • 89 % Token-Effizienz: Durch den direkten Aufruf von Funktionen vermeiden Agenten die Verarbeitung von Bildern oder unübersichtlichem Code im Umfang von Tausenden von Token. ²
  • 67 % Reduzierung des Overheads: Die Rechenkosten für den Betrieb des Agenten sinken erheblich. ²

Ist das bereits ein offizieller W3C-Standard?

Nein. Derzeit handelt es sich um einen Entwurf der W3C Community Group, der sich in einer frühen Inkubationsphase befindet. Obwohl er von Branchenriesen unterstützt wird, befindet er sich noch nicht auf dem offiziellen Standards Track.

Kann ein KI-Agent ohne meine Erlaubnis Produkte kaufen oder Verträge unterzeichnen?

Nein. WebMCP beinhaltet eine „Human-in-the-Loop“-Koordinationssäule. Bei kritischen Aktionen wie Zahlungen oder Formularübermittlungen fungiert der Browser als Vermittler und erzwingt eine obligatorische Bestätigungs-Benutzeroberfläche, in der der Nutzer auf „Zulassen“ klicken muss.

Was ist der Unterschied zwischen WebMCP und Anthropics MCP?

Es handelt sich um komplementäre Protokolle, die verschiedene Teile des Stacks abdecken:

  • MCP (Backend): Verbindet KI-Modelle mit Servern, Datenbanken oder lokalen Dateien.
  • WebMCP (Frontend): Eine browser-native API, die Agenten mit der aktiven Webseite und ihrem lokalen JavaScript-Kontext verbindet.

Mehr über MCP erfahren Sie hier.

Wie implementiere ich das auf meiner Website?

Je nach Ihren technischen Anforderungen stehen Ihnen zwei Hauptansätze zur Verfügung:

  1. Der deklarative Ansatz: Ideal für statische Seiten. Sie fügen einfach Attribute wie „toolname“, „tooldescription“ und „toolautosubmit“ zu Ihren bestehenden HTML-<form>-Tags hinzu.
  2. Die imperative API: Am besten geeignet für komplexe Web-Apps (SPAs). Sie verwenden JavaScript, um Tools über `navigator.modelContext.registerTool()` zu registrieren, wobei Sie benutzerdefinierte Schemata und Ausführungslogik festlegen.

Do’s und Don’ts bei der Implementierung von WebMCP auf Ihrer Website

Auch wenn WebMCP noch nicht einmal offiziell veröffentlicht wurde, haben wir einige Tipps für Ihre ersten Versuche damit:

  • Minimieren Sie „Model Math“: Zwingen Sie die KI nicht, Werte zu berechnen. Wenn Ihr Formular „Minuten bis Mitternacht“ benötigt, gestalten Sie das Tool so, dass es eine einfache Zeichenfolge wie „11:00 Uhr“ akzeptiert, und führen Sie die Umrechnung auf der Client-Seite durch.
  • Atomic Design: Bevorzugen Sie ein Tool mit mehreren optionalen Parametern gegenüber zehn separaten, sich überschneidenden Tools.
  • Strenge Validierung, lockeres Schema: Ihr Tool sollte ein Schema haben, das breit genug ist, damit der Agent „experimentieren“ kann, aber bei Fehlern sehr aussagekräftige Fehlermeldungen zurückgibt, damit der Agent sich selbst korrigieren kann.

Ist WebMCP bereits heute verfügbar?

Es ist derzeit als frühe Vorschau in Chrome 146 Canary verfügbar. Um es zu testen, müssen Sie das #webmcp-Flag unter chrome://flags/#enable-webmcp-testing aktivieren

Sind Sie bereit, Ihre Website in ein Präzisionswerkzeug für die nächste Milliarde KI-Agenten zu verwandeln? Digital Loop kann Ihnen dabei helfen, Ihre aktuellen Ressourcen zu überprüfen und eine Agent-Strategie zu entwickeln.

Benjamin Wingerter
Benjamin Wingerter
https://skillshop.exceedlms.com/profiles/288cfa6b37bd4d6bb33c760e35642be3
Seit mehr als 24 Jahren arbeitet Benjamin im verkaufsfokussierten Marketing und seit 2008 als Suchmaschinenoptimierer, Affiliate und Berater für KMUs und internationale DAX-Unternehmen. Interessen: Werbepsychologie, UX & CRO, AI & Automation