Google & Microsoft wollen das Browsen mit KI revolutionieren (mit WebMCP)

BBetter Stack
AI/미래기술경제 뉴스컴퓨터/소프트웨어

Transcript

00:00:00Es gibt einen neuen Vorschlag, der von Google und Microsoft unterstützt wird und die Zukunft
00:00:03der Webnutzung prägen könnte – und ich finde ihn ziemlich gut. Er heißt WebMCP, aber verwechseln Sie das nicht
00:00:08mit einem normalen MCP-Server. WebMCP ist vielmehr eine Browser-API, die es Frontend-Entwicklern
00:00:13ermöglicht, Funktionen ihrer Websites als Tools für KI-Agenten bereitzustellen. Im Grunde wird
00:00:18jede Seite zu einem kleinen MCP-Server. Vielleicht haben Sie schon gesehen, dass einige Seiten bereits
00:00:23eigene MCP-Server nutzen, aber das hier ist etwas anders. Das Ziel ist es, dass Ihre Agenten
00:00:27die Website tatsächlich für Sie bedienen, anstatt nur auf APIs zuzugreifen und das Ergebnis
00:00:32in einem Chat anzuzeigen. Es wird komplett frontendbasiert sein. Falls dieser Unterschied etwas
00:00:37verwirrend klingt, schauen wir uns direkt eine Demo an und sprechen darüber, warum ich es mag.
00:00:46Zuerst muss ich zugeben, dass diese Demo nicht besonders aufregend aussehen wird, aber
00:00:49genau das ist der Punkt bei WebMCP. Es nimmt etwas, das bereits möglich ist, und macht es
00:00:54einfach viel besser. Bleiben Sie also dran. Ich habe hier die Canary-Version
00:00:58von Chrome, in der dieser Vorschlag getestet wird, sowie eine Seite, die mit
00:01:02einigen WebMCP-Tools ausgestattet ist. Rechts sehen Sie eine Erweiterung, die mit
00:01:06diesen WebMCP-Tools interagieren kann. Stellen Sie sich vor, in Zukunft wäre das einfach die
00:01:10integrierte KI Ihres Browsers, egal ob Gemini, ChatGPT Atlas oder was auch immer aus ARC geworden ist.
00:01:15Wenn ich nun auf dieser Seite eine Eingabe mache und sage, dass ich einen
00:01:19Hin- und Rückflug für zwei Personen von London nach New York an bestimmten Daten buchen möchte,
00:01:23und dann auf Senden klicke, führt mich das direkt zur Suchergebnisseite – die KI hat also die Website
00:01:28für mich bedient. Wahnsinn, oder? Wie gesagt, die Demo sieht sehr simpel aus,
00:01:33aber der entscheidende Punkt bei WebMCP ist, wie die Seite genutzt wurde. Aktuelle Ansätze,
00:01:38bei denen KI Websites nutzt, basieren meist auf Tools wie Playwright, HTML-Parsing oder sogar Screenshots,
00:01:42wobei die KI versucht, die Seite wie ein Mensch zu bedienen. Das ist jedoch ziemlich ineffizient,
00:01:48besonders was den Token-Verbrauch angeht, und zudem sehr fehleranfällig. Genau hier setzt
00:01:53WebMCP an. WebMCP erlaubt es dem Website-Entwickler, bestimmte MCP-Tools freizugeben,
00:01:58die dann mit dem clientseitigen JavaScript interagieren. Wenn eine KI also eines dieser
00:02:03WebMCP-Tools nutzt, führt sie einfach eine JavaScript-Funktion auf Ihrer Website aus,
00:02:07die Sie als Entwickler festgelegt haben. In diesem Beispiel der Flugbuchungsseite
00:02:12habe ich ein WebMCP-Tool namens "search flights" verfügbar gemacht. Wie man sieht,
00:02:16erwartet es Eingabeparameter wie Abflugort, Ziel und Reiseart – genau passend
00:02:20zu dem Formular, das wir hier sehen. Der Clou ist: Die KI weiß jetzt, dass sie dieses
00:02:25MCP-Tool verwenden kann. Wenn wir also eine solche Anfrage senden, füllt sie das Formular nicht
00:02:29mühsam über Playwright oder HTML-Parsing aus. Tatsächlich muss sie gar nicht wissen,
00:02:34wie die Website oder der HTML-Code aussehen. Sie weiß einfach, dass dieses WebMCP-Tool
00:02:38existiert, und ruft es mit den entsprechenden Argumenten auf. Ich als Entwickler habe festgelegt,
00:02:43was passiert, wenn diese Argumente eingehen und eine JavaScript-Funktion ausgeführt wird,
00:02:47die in diesem Fall einfach den React-Status aktualisiert und zur Flugsuche weiterleitet.
00:02:52Wenn wir uns den Frontend-Code dazu ansehen, ist er unglaublich einfach, und hoffentlich
00:02:55wird dann alles klarer. Zuerst müssen wir die WebMCP-Tools registrieren,
00:02:59die für eine bestimmte Seite verfügbar sind. Das geschieht über window.navigator.model_context.
00:03:04Dies ist die API, die in die Browser eingebaut werden muss, falls dieser Vorschlag
00:03:09angenommen wird – in Chrome Canary kann man sie bereits testen. Sobald wir
00:03:13Zugriff auf die Model Context API haben, können wir unsere Tools mit der Funktion
00:03:18registerTool registrieren. Hier registriere ich das "search flights"-Tool, das wir vorhin gesehen haben.
00:03:22Ein Blick auf das eigentliche Tool zeigt: Es ist eine sehr einfache Objektdefinition.
00:03:26Es gibt einen Namen und eine Beschreibung – diese wird an die KI übermittelt, damit sie weiß,
00:03:30wann sie das Tool einsetzen soll. Außerdem gibt es ein Eingabeschema für Argumente.
00:03:34In meinem Fall waren das Abflugort und Ziel, passend zum Formular. Man kann auch
00:03:38zusätzlichen Kontext angeben, damit die KI versteht, welche Werte für diese Argumente
00:03:42erwartet werden. Der wichtigste Teil der Tool-Definition ist die execute-Funktion. Das ist das
00:03:47clientseitige JavaScript, das auf Ihrer Seite ausgeführt wird, wenn dieses MCP-Tool genutzt wird.
00:03:51Es kann im Grunde alles sein, was Sie wollen. In meinem Fall nutze ich die Funktion
00:03:55searchFlights. Wir müssen uns nicht zu sehr um die Details kümmern, aber im Wesentlichen
00:03:59nehme ich die Parameter, welche die KI für die Argumente ausgefüllt hat, und löse
00:04:03ein Event namens "search flights" mit diesen Parametern aus. In meinem React-Code füge ich
00:04:08dann einfach einen Event-Listener für dieses Event hinzu. Sobald es ausgelöst wird,
00:04:12wird die Funktion handleSearchFlights ausgeführt. Hier können wir im Grunde alles tun,
00:04:15was in React möglich ist. Ich nehme die Parameter und setze sie einfach als
00:04:19Suchparameter, was die Navigation auslöst. Es ist wirklich so einfach. Deshalb
00:04:24mag ich diesen Ansatz so sehr: Er ist nicht nur extrem token-effizient, sondern erlaubt mir
00:04:29als Entwickler auch, die Interaktionen der Seite festzulegen, sodass die KI meinen Leitplanken folgt.
00:04:34Es ist eine saubere Lösung, um Websites sowohl für Menschen als auch für KI-Assistenten zu optimieren,
00:04:39statt wie bisher eine Seite für Menschen und einen separaten MCP-Server für die KI zu bauen.
00:04:43Wenn die KI dann die Website nutzen muss, muss man hoffen, dass sie es irgendwie hinbekommt.
00:04:48Diese WebMCP-Tools sind nicht nur nützlich, um Aktionen auf der Seite auszulösen,
00:04:51wie Navigationen oder das Ausfüllen von Formularen, sondern sie helfen auch enorm,
00:04:55wenn Informationen auf der Seite analysiert werden müssen. Nehmen wir an, ich als Mensch
00:05:00passe hier Filter an, zum Beispiel einen Preis unter 500 $ und eine Abflugzeit
00:05:05vor dem Mittag. Es werden immer noch viele Flüge angezeigt, also soll mir die
00:05:11KI helfen, den besten auszuwählen. Ich frage also: "Welchen Flug würdest du auf dieser Seite empfehlen?"
00:05:15Bisherige Ansätze würden Playwright oder HTML-Parsing nutzen, um die gesamte Seite
00:05:20einzulesen, die Informationen zu verstehen und sie in strukturierte Daten
00:05:24umzuwandeln. Mit WebMCP brauchen wir das nicht. Stattdessen habe ich als Entwickler
00:05:29einfach ein WebMCP-Tool namens "list flights" erstellt. Dieses hat Zugriff auf den aktuellen React-Status
00:05:33und somit auf alle Informationen, die dem Benutzer angezeigt werden – aber in einem sauberen
00:05:38JSON-Format. Wenn ich die KI also nun frage, sehen Sie, wie sie dieses Tool aufruft,
00:05:42alle aktuell angezeigten Flüge auflistet und uns dann eine Empfehlung
00:05:46für Flug 56 gibt. Und diesen Flug kann ich direkt hier auf der Seite finden.
00:05:51Dieser Prozess hat viel weniger Token verbraucht und ist wesentlich genauer. Zum
00:05:56Abschluss möchte ich zeigen, wie man WebMCP sogar ganz ohne JavaScript nutzen kann.
00:06:00Bisher haben wir die imperative API verwendet, bei der ich als Entwickler
00:06:05das JavaScript geschrieben habe, um Tool-Aufrufe zu verarbeiten und Tools zu registrieren.
00:06:10Es gibt jedoch einen zweiten Ansatz: die deklarative API. Dieser ist viel einfacher und für
00:06:14den simplen Fall gedacht, HTML-Formulare auszufüllen. Hier habe ich ein ganz einfaches
00:06:19Reservierungsformular. Ich kann die KI bitten, einen Tisch zu buchen und ihr die nötigen
00:06:23Infos geben – sie wird das Formular dann automatisch für mich ausfüllen.
00:06:27Das liegt daran, dass sie Zugriff auf ein WebMCP-Tool namens "book table" hat. Aber
00:06:32der Clou ist: Ich habe kein JavaScript geschrieben, um dieses Tool verfügbar zu machen.
00:06:36Die deklarative API von WebMCP funktioniert nämlich so, dass man lediglich
00:06:40ein Tool-Namen- und ein Tool-Beschreibungs-Attribut zum HTML-Formular hinzufügt. Der Browser
00:06:44versucht dann, dieses Formular in ein WebMCP-Tool umzuwandeln und zu verstehen,
00:06:49welche Eingabefelder welche Argumente für das Tool sein sollen. Wir sehen das hier:
00:06:53Ein Tool-Name "book table" am Formular sowie eine Beschreibung, damit die KI weiß,
00:06:57wann sie es aufrufen soll. Es ist ein ganz normales HTML-Formular. Der einzige Unterschied liegt
00:07:02in einigen Eingabefeldern. Wir nutzen das Attribut "tool param description", um der KI
00:07:06mehr Kontext zum Ausfüllen dieser Information zu geben. Den Rest erledigt der Browser:
00:07:10Er erkennt Input, Input-Typ sowie Name und erstellt daraus das
00:07:14MCP-Tool. Das sehen wir auch hier im Inspektor: Die Eingabeargumente Name, Telefon,
00:07:18Datum, Zeit, Gäste, Sitzplatz und Wünsche wurden korrekt erkannt. All das geschah
00:07:23nur durch einfache Formular-Logik, ohne dass ich eine Zeile JavaScript schreiben musste. Das ist
00:07:27im Grunde alles zum aktuellen WebMCP-Vorschlag. Wie gesagt, ich stehe dem Ganzen
00:07:31sehr positiv gegenüber. Es schließt die Lücke zwischen Web-Apps und KI-Agenten, beendet
00:07:34das Rätselraten der Agenten bei der Seitennutzung und stellt sicher, dass
00:07:38Interaktionen explizit von den Entwicklern definiert werden. Zudem bin ich noch nicht
00:07:43völlig auf dem KI-Trip. Ich mag es, wenn ein Tool einem KI-Agenten hilft, mit mir
00:07:47zusammenzuarbeiten, statt mich zu ersetzen. Ich möchte meine Flüge oder Restaurants nicht in
00:07:51der ChatGPT-Oberfläche buchen. Ich besuche lieber selbst die Website im Browser,
00:07:56und wenn ich möchte, kann mir die KI dort direkt auf der Seite helfen. Das System
00:08:00bezieht den Menschen besser ein und lässt die Entwickler die Erfahrung gestalten.
00:08:05Man darf jedoch nicht vergessen, dass dies erst ein Vorschlag ist. Es könnte also dauern,
00:08:08bis er in den Browsern ankommt. Zudem gibt es noch Hürden zu meistern,
00:08:12wie zum Beispiel das Thema Sicherheit: Es könnte manipulierte Tools und
00:08:16Beschreibungen auf manchen Seiten geben. Wie viel Zugriff auf Nutzerdaten wird gewährt
00:08:21und wie viel Kontrolle hat die Browser-KI über den gesamten Browser? Wenn ein manipuliertes
00:08:25Tool außer Kontrolle gerät, wie viel Schaden kann es anrichten? Hoffentlich finden sie Antworten," denn ich finde den Vorschlag wirklich vielversprechend.
00:08:29Lassen Sie mich in den Kommentaren wissen, was Sie davon halten. Und wenn Sie schon mal da sind:
00:08:33Abonnieren Sie den Kanal. Wir sehen uns im nächsten Video!

Key Takeaway

WebMCP revolutioniert das Webbrowsing, indem es KI-Agenten ermöglicht, Websites über standardisierte Browser-APIs hocheffizient und sicher wie ein Entwickler-Tool zu bedienen.

Highlights

WebMCP ist eine neue Browser-API-Initiative von Google und Microsoft

Timeline

Einführung in WebMCP und das neue Paradigma

Der Sprecher stellt WebMCP als einen wegweisenden Vorschlag von Google und Microsoft vor, der die Webnutzung grundlegend verändern könnte. Es handelt sich dabei um eine Browser-API, die es Frontend-Entwicklern erlaubt, Website-Funktionen direkt als Tools für KI-Agenten bereitzustellen. Im Kern wird jede Webseite durch diesen Standard zu einem kleinen Model Context Protocol (MCP) Server. Dieser Ansatz unterscheidet sich von bisherigen Lösungen dadurch, dass Agenten die Seite aktiv bedienen, anstatt nur Daten über externe APIs abzurufen. Der Fokus liegt hierbei auf einer rein frontendbasierten Integration, die eine nahtlose Interaktion ermöglicht.

Live-Demo: Flugsuche mit der Model Context API

In einer praktischen Demonstration mit Chrome Canary zeigt der Sprecher, wie eine KI-Erweiterung eine Flugbuchungsseite steuert. Anstatt mühsam HTML zu parsen oder Tools wie Playwright zu nutzen, ruft die KI einfach das registrierte WebMCP-Tool "search flights" auf. Der Entwickler definiert hierbei die notwendigen Parameter wie Abflugort und Ziel, die von der KI direkt ausgefüllt werden. Dies führt dazu, dass die KI die Website effizient bedient, ohne das visuelle Layout oder den zugrunde liegenden Code im Detail verstehen zu müssen. Durch die Ausführung einer JavaScript-Funktion wird der React-Status der Seite aktualisiert und die Suche unmittelbar ausgelöst.

Technische Implementierung und Code-Struktur

Der Sprecher erläutert den technischen Aufbau der API, die über window.navigator.model_context angesprochen wird. Entwickler können Tools mit einem Namen, einer Beschreibung für die KI und einem klaren Eingabeschema registrieren. Besonders wichtig ist die execute-Funktion, die das clientseitige JavaScript definiert, welches beim Aufruf des Tools ausgeführt wird. Im gezeigten Beispiel wird ein Event ausgelöst, auf das die React-Applikation reagiert, um die Navigation zu steuern. Dieser Prozess ist nicht nur extrem token-effizient, sondern stellt auch sicher, dass die KI innerhalb der vom Entwickler gesetzten Leitplanken agiert.

Datenanalyse und Informationsextraktion

Ein weiterer großer Vorteil von WebMCP liegt in der Analyse von Informationen, die bereits auf der Seite vorhanden sind. Anstatt die gesamte Seite erneut durch eine KI einlesen zu lassen, kann ein Tool wie "list flights" direkt auf den aktuellen Programmstatus zugreifen. Die KI erhält so strukturierte JSON-Daten über die aktuell angezeigten Flüge und kann basierend darauf präzise Empfehlungen aussprechen. Dies spart massiv Ressourcen und verhindert Fehler, die bei der Interpretation von unstrukturiertem HTML-Code oft entstehen. Der Nutzer erhält so eine fundierte Beratung direkt im Kontext seiner aktuellen Browsing-Sitzung.

Die deklarative API und HTML-Formulare

Für einfache Anwendungsfälle bietet WebMCP eine deklarative API, die ganz ohne manuelles JavaScript auskommt. Durch das Hinzufügen spezieller Attribute wie "tool name" und "tool description" zu Standard-HTML-Formularen erkennt der Browser diese automatisch als KI-Tools. In der Demo wird gezeigt, wie ein Reservierungsformular für ein Restaurant von der KI erkannt und ausgefüllt wird. Der Browser übernimmt dabei die Aufgabe, Eingabefelder und Typen in ein verständliches MCP-Schema zu übersetzen. Dies ermöglicht es Entwicklern, ihre Seiten mit minimalem Aufwand für KI-Assistenten zu optimieren, indem sie lediglich zusätzlichen Kontext in den Attributen hinterlegen.

Fazit, Sicherheit und Zukunftsaussichten

Abschließend bewertet der Sprecher WebMCP äußerst positiv, da es die Lücke zwischen Web-Apps und Agenten schließt, ohne den Menschen zu verdrängen. Er betont, dass er die Interaktion auf der Original-Website bevorzugt, anstatt alles in einer isolierten Chat-Oberfläche zu erledigen. Dennoch gibt es noch Herausforderungen, insbesondere im Bereich der Sicherheit und des Datenschutzes bei manipulierten Seiten. Da es sich noch um einen frühen Vorschlag handelt, bleibt abzuwarten, wie schnell die Browser-Hersteller diese Technologie final implementieren werden. Der Sprecher lädt die Zuschauer ein, ihre Meinung zu diesem vielversprechenden Ansatz in den Kommentaren zu teilen.

Community Posts

View all posts