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!