WebMCP: Bereitstellung von Website-Tools, damit Agenten das DOM nicht mehr scannen.

Webseiten wurden für menschliche Klicks, Formulare und APIs entwickelt. Immer häufiger kann der „Benutzer“ ein KI-Agent sein, der die visuelle Benutzeroberfläche nie berührt. Agenten, die DOM-Bäume auslesen oder Browser steuern, funktionieren nicht mehr, wenn sich die Markierung ändert. WebMCP (Web Model Context Protocol), das im Chrome-Ökosystem vorgeschlagen wurde, zielt darauf ab, Seiten zu ermöglichen, strukturierte Tools direkt an Agenten bereitzustellen – Namen, Eingaben, Ausgaben sowie Angaben dazu, wann sie aufgerufen werden sollen – sodass die Automatisierung explizit stattfindet anstatt nur geschlossen abgeleitet werden kann.

Was ist WebMCP?

Kurz gesagt ermöglicht WebMCP einer Seite, agentenorientierte Tools zu veröffentlichen, anstatt darauf zu hoffen, dass Scraper richtig raten.

Ohne WebMCP improvisiert ein Agent mit einer undurchsichtigen Benutzeroberfläche:

AI Agent → Reads HTML → Guesses → Clicks → Hopes it works

Mit WebMCP wird derselbe Zweck zu einem ausdrücklichen Toolaufruf:

AI Agent → Reads structured tools → Executes correctly

Chromes Dokumentation beschreibt den Vorteil als Geschwindigkeit, Zuverlässigkeit und Präzision bei interaktiven Abläufen mit Agenten.

Warum WebMCP existiert

Bedenken Sie die Buchung eines Hotels. Der zerbrechliche Prozess öffnet eine Seite, findet Eingabefelder, interpretiert Daten, klickt auf „Suchen“ und analysiert die Ergebnisse – er bricht bei Veränderungen im DOM zusammen. Mit WebMCP ruft der Agent eine strukturierte Operation auf:

searchHotels({
 location: "Tokyo",
 checkIn: "2026-08-10",
 checkOut: "2026-08-15",
 guests: 2
})

Keine XPath-Archäologie, keine CSS-Selector-Methode, keine Umwege für routinemäßige Abläufe – nur direkte Ausführung.

Wie WebMCP funktioniert

Zwei ergänzende APIs:

1. Imperative API

JavaScript registriert die Tools explizit:

navigator.webMCP.registerTool({
  name: "create-event",
  description: "Creates a calendar event",
  inputSchema: {
    type: "object",
    properties: {
      title: { type: "string" },
      date: { type: "string" }
    }
  },
  execute: async ({ title, date }) => {
    return await createCalendarEvent(title, date);
  }
});

Agenten erhalten den Namen des Tools, seine Funktion, die erforderlichen Eingaben sowie einen Ausführungsweg – die Frontend-Logik wird als aufrufbare Funktionen exportiert.

2. Declarative API

HTML in der ersten Reihe, insbesondere für Formulare:

<form webmcp-tool="book-flight">
  <input name="from" />
  <input name="to" />
  <input name="date" />
</form>

Die Laufzeit wandelt das Formular in ein strukturiertes Tool um, sodass bestehende Anwendungen durch geringfügige Markup-Änderungen agentkompatibel werden können.

WebMCP im Vergleich zu MCP

Verwirrung ist häufig. Eine praktische Einteilung: WebMCP richtet sich an die Frontend-Oberfläche; MCP zielt auf Backend-Systeme und -Dienste ab. Ein gängiges Denkmodell sieht MCP als das Server-seitige „Gehirn“ und WebMCP als den UI-Körper. Gemeinsam decken sie vollständige Full-Stack-Agentenwerkzeuge ab, ohne jede Aktion durch anfällige Browser-Automatisierung erzwingen zu müssen.

Reale Anwendungsfälle

1. E-Commerce

Ein Käufer bittet um Laufschuhe innerhalb eines bestimmten Budgets sowie um den Bestellvorgang. Zu den verwendeten Werkzeugen könnten gehören:

searchProducts()
filterProducts()
addToCart()
applyCoupon()
checkout()

Der Agent führt den Prozess ab, ohne durch Tabellenstrukturen klicken zu müssen.

2. Reisebuchung

Flüge suchen, Hotels vergleichen, Bodentransport buchen, Versicherung hinzufügen – alles über Werkzeuge und nicht über anfällige Makros.

3. SaaS-Dashboards

Analytics-Oberflächen können Aktionen wie folgende bereitstellen:

generateReport()
downloadCSV()
inviteMember()
changeBillingPlan()

In-Produkt-Copiloten rufen anschließend dieselben Funktionen auf, die für Menschen als Schaltflächen sichtbar sind.

4. CRM-Systeme

Anstelle von zehn Bildschirmen voller Klicks:

createLead()
assignSalesRep()
scheduleFollowUp()

5. Kundenservice

Abschließen von Abonnements, beantragen von Rückerstattungen, Verfolgen von Lieferungen mithilfe geprüfter Tools anstelle von HTML-Methoden.

Warum Entwickler darauf achten sollten

Die Arbeit am Frontend erweitert sich von „Pixel malen“ zu „Tools für Agenten veröffentlichen“. Die Verantwortlichkeiten richten sich stärker auf klare Benennung, starke Schemata und zuverlässige Ausführung. Das Vorher/Nachher bei der Funktionsgestaltung sieht weniger so aus:

Build components for humans

und eher so aus:

Build components for humans + machines

Best Practices

Halten Sie die Tools einzigartig nutzbar

Vermeiden Sie umfassende, vielseitige Funktionen:

manageEverything()

Ziehen Sie fokussierte Tools vor:

createInvoice()
sendInvoice()
downloadInvoice()

Spezifität verbessert die Genauigkeit der Agenten.

Verwenden Sie klare Namen

Unklare Beschriftungen:

doTask()

Namen, die die Absicht verdeutlichen:

submitExpenseClaim()

Vermindern Sie die kognitive Last

Zwingen Sie das Modell nicht dazu, vorab zu berechnen, was die App bereits weiß. Vermeiden Sie:

durationInMinutes

Ziehen Sie es vor, rohe Eingaben zu akzeptieren, die der Backend normalisieren kann:

startTime: "10:00"
endTime: "12:00"

Fehler angemessen handhaben

Agenten versuchen es erneut. Tools müssen bei Wiederholungsversuchen sicher sein – Idempotenz ist wichtig.

Sicherheitsaspekte

Falls Agenten Tools ausführen können, stellt die feindliche Einbettung von falschen Tools ein Forschungsproblem dar. Zu berücksichtigende Abhilfemöglichkeiten umfassen die Überprüfung der Herkunft, die Prüfung von Registrierungen, Bereichsbeschränkungen für Berechtigungen sowie Bestätigungen durch Benutzer bezüglich Nebenwirkungen. Vertrauen Sie Registrierungen nicht blind.

Der größere Kontext

WebMCP ist Teil eines umfassenderen agentbasierten Webs: Websites machen ihre Funktionen zugänglich, Agenten verstehen sie, Menschen delegieren Aufgaben – dadurch wird die Arbeit schneller erledigt. Teams entwickeln bereits APIs für Entwickler; als nächstes kommen Tools für Agenten. Die ersten Nutzer, die fragen „Welche Teile dieser Anwendung sollten zu KI-Tools werden?“, werden die nächste Welle der Webarchitektur mitgestalten – ähnlich wie REST, GraphQL, WebSockets und Serverkomponenten von Nischenlösungen zu Standardtechnologien wurden. Die Technologie ist noch in den Anfängen, doch die Entwicklungstendenz lässt sich kaum übersehen.

Einführungsweg für bestehende Anwendungen

Beginnen Sie damit, einen hochwertigen Formularabschnitt oder Bestellschritt mithilfe der deklarativen API zu kennzeichnen, den Erfolg der Agenten im Vergleich zum alten Scraper zu messen und anschließend imperative Tools für Abläufe einzusetzen, die eine benutzerdefinierte Validierung erfordern. Behalten Sie bei Zahlungen sowie zerstörerischen Kontoveränderungen eine menschliche Bestätigungspflicht bei, bis Telemetriedaten eine sichere Idempotenz zeigen. Behandeln Sie Tool-Schemata wie öffentliche APIs: Überprüfen Sie die Namen, versionieren Sie sie und lehnen Sie Registrierungen von unzuverlässigen Skripten ab.