WebMCP
mcp2everything · Coding
WebMCP (Web Model Context Protocol) ist ein vorgeschlagener Webstandard für die Web-Integration von KI-Agenten. Er lässt Websites strukturierte Werkzeuge direkt für KI-Agenten bereitstellen, die im Browser laufen. Statt dass ein Agent Screenshots macht und rät, wo die Schaltflächen sitzen, registriert die Seite JavaScript-Funktionen mit Namen, Beschreibungen und Parameterschemata, und der Agent ruft sie sofort auf. Es ist eine schlanke Open-Source-Bibliothek plus eine API auf Browser-Ebene, gedacht für Frontend-Entwickler, die wollen, dass ihre Seiten sauber mit KI-Assistenten zusammenarbeiten.
Über WebMCP
Was ist WebMCP
WebMCP ist ein offener Webstandard für KI-Agenten. Er stellt das übliche Modell der Browser-Automatisierung auf den Kopf: Statt dass ein Agent das DOM auswertet oder Screenshots liest, um herauszufinden, was eine Seite kann, erklärt die Seite ihre Fähigkeiten selbst als strukturierte Werkzeuge. Der Browser reicht diese Werkzeuge dann an jeden verbundenen KI-Agenten weiter, der sie wie lokale Funktionen aufruft.
Die Kernidee stützt sich auf ein einziges globales Objekt: navigator.modelContext. Ein Entwickler ruft registerTool mit einem Namen, einer Beschreibung in einfacher Sprache, einem JSON Schema für die Argumente und einer Handler-Funktion auf. Agenten entdecken das Werkzeug automatisch und rufen es mit echten Parametern auf. Weil das Werkzeug in der laufenden Seite arbeitet, hat es bereits die Sitzung des Nutzers, die Cookies und den aktuellen App-Zustand, also braucht es keine zusätzliche Authentifizierungs-Verkabelung.
Eine echte Grenze sollte man früh kennen. WebMCP lebt und stirbt mit dem Browser-Tab. Schließt man den Tab, verschwinden die Werkzeuge. Es deckt nur Werkzeuge ab, nicht die Ressourcen und Prompts, die ein vollständiger MCP-Server tragen kann. Und es setzt voraus, dass ein Mensch anwesend ist, um Aktionen zu genehmigen, was eine Sicherheitsfunktion ist, aber vollständig unbeaufsichtigte Hintergrundarbeit ausschließt.
Erste Schritte
- Öffnen Sie den Frontend-Code Ihrer Website und fügen Sie das WebMCP-Script-Tag hinzu (oder führen Sie
npm install webmcpaus), damit die Bibliothek auf Ihren Seiten geladen wird. - Erstellen Sie eine
WebMCP-Instanz. Sie können UI-Optionen wie Farbe, Position und Größe der Schaltfläche des schwebenden Hilfe-Widgets übergeben. - Registrieren Sie Ihr erstes Werkzeug mit
mcp.registerTool(name, description, schema, handler). Richten Sie den Handler auf Logik, die Ihre App bereits ausführt. - Registrieren Sie alle Werkzeuge direkt nach dem Laden des Scripts. MCP-Clients brauchen oft einen Neustart, um neu verfügbare Werkzeuge zu erkennen.
- Testen Sie in einem unterstützten Browser mit verbundenem MCP-Client und veröffentlichen Sie dann. Sobald es live ist, können Agenten Ihre Werkzeuge aufrufen.
Das war es. Kein Backend, kein Auth-Server, kein Umbau.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von WebMCP.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler
- Betreiber unabhängiger Websites und kleine Teams
- Produktteams, die sich auf KI-Traffic vorbereiten
Aufgaben
- Ein Suchwerkzeug bereitstellen, damit ein Agent Ihre Inhalte per Stichwort abfragen und strukturierte Ergebnisse liefern kann, statt eine Liste am Bildschirm zu lesen.
- Aktionen zum Ausfüllen und Absenden von Formularen registrieren, damit ein Assistent eine Bestellung oder Buchung im Namen des Nutzers abschließt, mit der Sitzung bereits in der Hand.
- Bestehende JavaScript-Geschäftslogik als vom Agenten aufrufbare Funktionen einpacken. So vermeiden Sie eine parallele API-Schicht, die nur für die KI gebaut wurde.
Szenarien
- Ein Einkaufsablauf, in dem der Agent ein Werkzeug zum Hinzufügen in den Warenkorb aufruft, statt durch ein wechselndes Layout zu klicken.
- Eine Dokumentationsseite, die einen Assistenten den Seiteninhalt direkt abrufen lässt, wenn ein Nutzer danach fragt.
- Ein Dashboard, in dem der Assistent Live-Widgets über registrierte Ressourcen liest, statt das DOM neu zu parsen.
Wichtigste Funktionen
Werkzeug-Registrierung mit JSON Schema
registerTool ist das Herzstück dieses Webstandards für KI-Agenten. Sie übergeben einen Namen, eine Beschreibung in natürlicher Sprache, ein Argumentschema und einen Handler, und das Werkzeug wird für jeden verbundenen Agenten sichtbar. Das Schema sagt dem Modell genau, welche Eingaben es senden darf, was fehlerhafte Aufrufe und Rätselraten verringert.
Geteilte Sitzung und Seitenkontext
Werkzeuge laufen in der Seite und erben daher den eingeloggten Zustand, die Cookies und die Daten im Speicher, die der Nutzer bereits hat. Ein Agent muss die Authentifizierung nicht neu aufbauen und sich keine Sorgen um Origin-Grenzen machen. Das ist eine große Vereinfachung gegenüber einem separaten Backend-Proxy für jede KI-Aktion.
Prompts und Ressourcen neben den Werkzeugen
Über Aktionen hinaus können Sie mit WebMCP Prompt-Vorlagen und lesbare, per URI gekennzeichnete Ressourcen registrieren. Ein Prompt kann eine häufige Anfrage formen und Argumente annehmen, die sich pro Aufruf ändern. Eine Ressource kann Seiteninhalt als Kontext bereitstellen. Zusammen geben sie dem Agenten mehr als nur Schaltflächen zum Drücken.
Keine Framework- oder Backend-Abhängigkeit
Die Bibliothek ist ein kleiner Vanilla-JavaScript-Baustein, der auf Chrome, Firefox, Safari und Edge läuft und sich mit React, Vue und Angular verträgt. Sie brauchen keinen neuen Server, keine neue Datenbank und keinen Umbau Ihrer Architektur. Wenn Sie das Frontend einer Seite bearbeiten können, können Sie WebMCP hinzufügen.
Widerstandsfähig gegen UI-Änderungen
Weil Agenten semantische Werkzeuge aufrufen, statt Bildschirmelemente zu suchen, bricht eine umbenannte CSS-Klasse oder ein verschobenes Layout die Integration nicht. Agenten, die auf Screenshots und DOM-Scraping setzen, veralten in dem Moment, in dem ein Designer die Seite anfasst. WebMCP umgeht diese ganze Klasse von Ausfällen.
Vor- und Nachteile
Vorteile
- Keine Backend-Änderungen und ein einfaches Setup per Script-Tag, sodass die Integrationskosten für kleine Teams niedrig bleiben.
- MIT-Lizenz und kostenlos, ohne Anbieterkonto und ohne Gebühr pro Anfrage, um KI-Traffic durchzuleiten.
- Nutzt bestehende Frontend-Logik weiter, sodass derselbe Code, der menschliche Nutzer bedient, auch Agenten bedient.
- Erbt die Sitzung des Nutzers automatisch, was fast die gesamte Authentifizierungs-Verkabelung aus dem KI-Pfad entfernt.
- Läuft auf allen großen Browsern und Frontend-Frameworks, Sie sind also nicht an einen einzigen Stack gebunden.
Nachteile
- Werkzeuge verschwinden beim Schließen des Tabs, deshalb kann es keine dauerhafte oder kopflose Hintergrundautomatisierung tragen.
- Keine gebündelte Unterstützung für Ressourcen und Prompts wie ein vollständiger MCP-Server bietet, was begrenzt, was manche Agenten tun können.
- Erfordert von der Konzeption her die Genehmigung durch den Nutzer, was sicherer ist, aber einen Schritt hinzufügt, bevor Agenten handeln.
- Das Umfeld ist noch jung, deshalb können Sie auf raue Kanten und wenige funktionierende Beispiele stoßen.
Häufige Fragen
Es lässt eine Website strukturierte Werkzeuge an einen KI-Agenten im Browser übergeben. Der Agent ruft diese Werkzeuge direkt auf, sodass er suchen, Formulare ausfüllen oder Aktionen auslösen kann, ohne die Seite auszulesen oder zu raten, wo er klicken soll.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu WebMCP.
Alternativen zu WebMCP
Forefront
Forefront · CodingForefront ist eine Webplattform zum Bauen mit Open-Source-KI. Sie lassen sich führende Open-Source-Sprachmodelle mit eigenen Daten feintunen, ihre Leistung bewerten und sie über eine API ausführen oder exportieren, um sie selbst zu hosten. Entwickler, die den Komfort einer geschlossenen Plattform wollen, aber darauf bestehen, ihre Modelle und Daten zu besitzen, sind hier die Zielgruppe.
Startkit
StartKit.AI · CodingStartkit ist ein Boilerplate zum Bauen von KI-SaaS-Produkten und KI-Wrappern. Man kann es sich als KI-Startup-Boilerplate vorstellen, bei dem die langweiligen Teile schon verdrahtet sind: Authentifizierung, Zahlungen über Stripe und Lemon Squeezy, Nutzungslimits, transaktionale E-Mail und ein KI-API-Starter-Kit, das mit OpenAI, Anthropic, Groq oder Llama spricht. Man klont das Repository, setzt seinen Preis und kümmert sich um den Teil des Produkts, für den Menschen wirklich bezahlen. Es basiert auf Next.js über React und Tailwind, deshalb fühlt sich ein Großteil des Boilerplate-Codes schon vertraut an.
Testim
Tricentis · CodingTestim ist eine KI-gestützte Plattform für Testautomatisierung, mit der man End-to-End-Tests für Web-, Mobile- und Salesforce-Anwendungen baut und ausführt. Sie setzt auf maschinelles Lernen, um Tests stabil zu halten, wenn sich eine Oberfläche ändert, sodass Teams weniger Zeit mit der Reparatur kaputter Selektoren verbringen. Nicht schlecht für ein Tool für automatisierte Tests, das Sie heute schon nutzen können. Sie erstellen Tests, indem Sie Aktionen im Browser aufzeichnen, und fügen danach JavaScript hinzu, wenn Sie mehr Kontrolle brauchen. Für ein beschäftigtes QA-Team eine solide Wahl.