00:00:00KI-Agenten beginnen mittlerweile, jeden Teil unseres Lebens zu durchdringen.
00:00:03Und einer der wichtigsten Bereiche, in denen das passiert, ist der Browser.
00:00:06Jedes große KI-Unternehmen hat erkannt, dass der Browser das eine Tool ist, das jeder
00:00:11jeden Tag nutzt.
00:00:12Warum also nicht KI direkt dort integrieren?
00:00:14Aber die Wahrheit ist: Bisher taugen sie alle nichts.
00:00:15Und es liegt nicht an mangelnder Optimierung.
00:00:17Es gibt ein grundlegendes Problem, das man mit bloßer Optimierung nicht lösen kann.
00:00:20Aber Google hat gerade in Zusammenarbeit mit Microsoft etwas namens WebMCP veröffentlicht.
00:00:24Anstatt zu versuchen, Agenten besser in der Nutzung von Websites zu machen, sorgt es dafür,
00:00:29dass Websites besser mit Agenten kommunizieren können.
00:00:30Das ist ein völlig neuer Ansatz.
00:00:32Und es ermöglicht Dinge, die wir so noch nicht gesehen haben.
00:00:35Dies ist eine einfache HTML-Seite, die auf einem lokalen Server läuft.
00:00:38Wenn wir den Erweiterungs-Tab öffnen, sehen wir die WebMCP-Erweiterung.
00:00:41Darunter finden wir für diese Seite ein Tool: „BookTable“.
00:00:45Wir haben diese WebMCP-Brücke mit Claude Code verbunden und mitgeteilt, dass ein
00:00:49Reservierungsformular mit verfügbaren WebMCP-Tools geöffnet ist.
00:00:52Wir gaben die Aufgabe, einen Tisch für zwei Personen mit Datum, Namen und Sonderwunsch zu buchen.
00:00:57Alle diese Felder sind im Formular vorhanden.
00:00:59Der Agent bestätigte das Datum, nutzte das WebMCP-Tool der Website, füllte die Felder aus
00:01:03und schloss die Reservierung erfolgreich ab.
00:01:06Aktuell hat ein Agent zwei Möglichkeiten zu verstehen, was auf dem Bildschirm passiert.
00:01:09Die erste Methode ist visionsbasiert.
00:01:11Der Agent macht einen Screenshot der Seite, markiert jedes erkennbare Element
00:01:15und füttert das Bild einem Modell, das dann entscheidet, wo geklickt werden muss.
00:01:19Die zweite Methode ist das DOM-Parsing.
00:01:21Der Agent liest den rohen HTML-Code der Seite aus.
00:01:24Wenn Sie jemals „Element untersuchen“ auf einer Website genutzt haben, wissen Sie, wie das aussieht.
00:01:28Tausende Zeilen von Code.
00:01:29Der Agent liest das alles durch und versucht, den richtigen Button zu identifizieren.
00:01:33Beide Ansätze haben dasselbe grundlegende Problem.
00:01:35Sie sind nicht-deterministisch.
00:01:36Der Agent muss jedes Mal aufs Neue raten.
00:01:39Der Grund, warum das nicht konsistent funktioniert, ist, dass das Internet für
00:01:43menschliche Augen gebaut wurde.
00:01:45Jede Website geht davon aus, dass eine Person sie betrachtet.
00:01:47Es gibt keine Struktur für Maschinen.
00:01:48Jeder Agent, egal wie gut das Modell ist, versucht also etwas zu interpretieren,
00:01:53das nie für die Interpretation durch Maschinen konzipiert wurde.
00:01:55Mit WebMCP versucht der Agent nicht mehr, Ihre Website zu erraten – Ihre Website
00:02:00registriert ihre verfügbaren Aktionen direkt als Tools.
00:02:01Wenn ein Agent auf einer Seite landet, rät er nicht.
00:02:04Er liest einfach die verfügbaren Tools aus und ruft sie direkt auf.
00:02:07Aktuell ist WebMCP nur als frühe Vorschau verfügbar.
00:02:10Mit der Entwicklung des „agentischen Webs“ müssen sich auch Websites weiterentwickeln.
00:02:13Wie Sie gesehen haben, geben wir Agenten durch diese Tools einen viel besseren Zugriff,
00:02:18um mit unseren Seiten zu interagieren.
00:02:19Die Demo funktionierte, weil es ein einfaches HTML-Formular war.
00:02:21Aber die meisten echten Websites sind deutlich komplexer.
00:02:23WebMCP bietet daher zwei verschiedene Ansätze an, je nachdem, womit man arbeitet.
00:02:28Es gibt zwei Wege, über die Agenten die Kontrolle über den Browser übernehmen können.
00:02:31Die deklarative API ist für einfache Workflows gedacht, wie die eben gezeigten HTML-Formulare.
00:02:35Die imperative API ist für vollwertige Web-Apps mit mehreren Seiten gedacht.
00:02:40Diese erfordern eine zusätzliche Implementierung, auf die wir später noch eingehen.
00:02:43Aktuell gibt es noch keine offizielle Dokumentation, aber Google Chrome Labs bietet ein
00:02:48Repository mit WebMCP-Tools und zwei Demos an, von denen nur eine gehostet wird.
00:02:52Es gibt eine Flugsuche-Demo und eine offizielle Erweiterung zur Inspektion des Kontexts.
00:02:56Sobald man diese installiert hat, kann man die Tools auf jeder Website, die WebMCP
00:03:01implementiert hat, über die Erweiterung erkennen und weitere Dinge tun.
00:03:05Das Eingabeschema für die Tools wird direkt dort angezeigt.
00:03:07Im Moment gibt es auf dieser Seite nur ein Tool: die Flugsuche.
00:03:10Es wurden zwei Optionen zur Nutzung bereitgestellt.
00:03:12Man kann entweder benutzerdefinierte Argumente angeben, die das KI-Modell ausfüllen muss,
00:03:16oder man hinterlegt seinen Gemini-API-Key und gibt einen Prompt in natürlicher Sprache ein,
00:03:21woraufhin die Seite entsprechend gesteuert wird.
00:03:22Hier sehen wir die Standard-Eingaben.
00:03:24Wir haben sie ausgetauscht, und es wurden tatsächlich Flüge gesucht und Ergebnisse angezeigt.
00:03:28Als ich zurückging, bot die WebMCP-Reiseseite plötzlich vier Tools an,
00:03:32wobei drei davon nun Filter waren, die angewendet werden konnten.
00:03:35Auch die Eingabeargumente für die Seite hatten sich geändert.
00:03:37Ich fügte ein weiteres Argument hinzu und erhielt die Bestätigung, dass die Filter aktualisiert wurden.
00:03:41Zwar gab es keine passenden Flüge, aber alle Filter wurden korrekt angewendet.
00:03:44Wir haben währenddessen zwischen Zen Browser und Chrome gewechselt, weil WebMCP
00:03:48zwar als offenes Protokoll für jeden Browser gedacht ist, derzeit aber nur
00:03:54in der Canary-Version von Chrome funktioniert.
00:03:55Das bleibt so, bis der Standard für alle freigegeben wird.
00:03:58Das ist der aktuelle Stand der offiziellen Tools.
00:04:01Keine Doku, nur zwei Demos, läuft nur auf Chrome Canary – und man kann es nicht
00:04:05mit Claude Code nutzen, da es für Browser-Agenten gedacht ist.
00:04:09Wir haben jedoch eine WebMCP-Brücke gefunden, die man auf seinem System installieren kann
00:04:14und die sowohl ein MCP als auch eine Erweiterung bereitstellt.
00:04:16Dies ermöglicht es Claude Code, WebMCP zu nutzen und durch die Tools
00:04:22beliebiger Websites zu navigieren.
00:04:23Um zu zeigen, wie man das implementiert, beginnen wir mit dem einfacheren Ansatz.
00:04:27Bei der deklarativen API, die ihr beim HTML-Formular gesehen habt, muss man lediglich
00:04:31drei Dinge im HTML-Formular deklarieren: den Tool-Namen, die Beschreibung und
00:04:36die Parameterbeschreibung.
00:04:37Man muss dabei gar nicht tief ins Detail gehen.
00:04:39Man muss nur sicherstellen, dass der Agent sie korrekt einfügt.
00:04:41Wir haben zwei Anleitungen basierend auf dem WebMCP-Repo erstellt und
00:04:46Claude Code Zugriff darauf gegeben.
00:04:47Dabei stießen wir auf einige Probleme und mussten die Anleitungen
00:04:51während des Prozesses korrigieren.
00:04:53Beide sind in AI Labs Pro verfügbar, unserer Community, in der ihr
00:04:57fertige Vorlagen findet.
00:04:58Ihr könnt sie direkt für dieses Projekt und alle früheren Videos nutzen.
00:05:01Die wichtigsten Infos gibt es hier im Video, aber wer die Dateien möchte,
00:05:05findet die Links in der Beschreibung.
00:05:06Wenn der Agent diese Deklarationen einfügt, übernimmt der Browser den Rest,
00:05:10indem er sie aus dem HTML ausliest.
00:05:12Der zweite Weg war die imperative API für komplexere Interaktionen
00:05:17und JavaScript-Ausführung.
00:05:18Wir haben eine Next.js-App gestartet und Claude Code die entsprechende Anleitung gegeben,
00:05:23was für die Implementierung ausreichte.
00:05:24In React-Apps wird eine neue Datei im Library-Ordner erstellt, in der alle
00:05:29benötigten Tools der Seite deklariert werden.
00:05:30Hier sieht man die Funktionen und deren Definitionen.
00:05:33Da Web-Apps jedoch riesig sein und über 100 Tools haben können,
00:05:38entsteht dasselbe Problem wie bei Claude Code: Der Kontext wird überlastet
00:05:41und das ganze System bricht zusammen.
00:05:43Statt alle Tools einer Website zu laden, ist es besser, nur die Tools zu laden,
00:05:47die auf der aktuellen Seite relevant sind.
00:05:48Dieses Konzept nennt man „Contextual Loading“.
00:05:50Das ist die Next.js-App, die Claude Code für uns erstellt hat.
00:05:53Es ist eine voll funktionsfähige kleine Demo-App mit Backend.
00:05:57Auf der Homepage sind aktuell nur drei Tools verfügbar.
00:06:01Als ich zur Warenkorb-Seite wechselte, waren es vier Tools mit anderen Namen.
00:06:05Die Tool-Verfügbarkeit ändert sich also je nach Unterseite.
00:06:09Hier kommen die Registrierungsfunktionen ins Spiel.
00:06:11Wenn man auf der Homepage landet, wird „registerHomeTools“ ausgeführt,
00:06:15und beim Verlassen wird „unregisterHomeTools“ aufgerufen.
00:06:18Die Tools werden also passend zur jeweiligen Seite an- und abgemeldet.
00:06:23In diesem Fall hängt es nicht nur vom Browser ab, sondern der Code
00:06:27selbst steuert die Integration.
00:06:28Wir nutzen WebMCP hier nicht mit einem Browser-Agenten, wie es Google vorsieht
00:06:32und wie es jeder Browser selbst implementieren würde.
00:06:34Wir nutzen eine Brücke, die Claude Code mit WebMCP verbindet,
00:06:39um Websites zu steuern.
00:06:40Um mehr aus Claude Code herauszuholen, haben wir ein Video über die
00:06:44zehn aktuellsten Wege erstellt, um sich damit einen Vorteil zu verschaffen.
00:06:46Diese Brücke ist ein Community-Projekt und hat bei der imperativen API ein Problem:
00:06:51Der Tool-Wechsel funktioniert mit diesem MCP-Server nicht richtig.
00:06:54Als ich die Seite öffnete, war ich auf der Checkout-Seite und startete dort
00:06:58die Claude-Code-Session.
00:06:59Als wir den Agenten baten, zurück zur Homepage zu navigieren, konnte er
00:07:03die dortigen Tools nicht sehen.
00:07:04Wir waren auf der Homepage, ich ging zur Produktseite und wir erhielten einen „In den Warenkorb“-Button.
00:07:08Aber der Agent konnte diesen Button auf der Produktseite nicht erkennen.
00:07:11Für die Demo mussten wir den Artikel also manuell in den Warenkorb legen.
00:07:14Als wir ihn dann baten, den Checkout abzuschließen, füllte er die Details automatisch aus,
00:07:18gab die Bestellung auf und beendete den gesamten Einkaufsvorgang.
00:07:21Das ist eine Einschränkung dieses MCPs, was uns zu einem weiteren Punkt führt.
00:07:25WebMCP ist Open Source, und große Browser-Hersteller sind als Teilnehmer gelistet.
00:07:30Aber derzeit unterstützt nur Chrome Canary das Protokoll, und der vorgesehene Agent
00:07:34ist Gemini, Googles eigene, fest in den Browser integrierte KI.
00:07:38Wenn Sie als Website-Betreiber heute WebMCP implementieren, ist Gemini
00:07:42der einzige Agent, der Ihre Tools nativ nutzen kann.
00:07:44Claude Code benötigt eine Community-Brücke, die bei Contextual Loading scheitert.
00:07:49Jeder Nicht-Google-Agent ist momentan im Nachteil.
00:07:51Könnte Claude aufholen?
00:07:52Sicher, sie haben ihre eigene Browser-Erweiterung.
00:07:55Da dies ebenfalls ein Browser-Agent ist, könnte er diese Tools
00:07:59theoretisch genauso entdecken wie Gemini.
00:08:00Die Frage ist aber: Wie viele Leute werden extra eine Claude-Erweiterung installieren,
00:08:04wenn Gemini bereits fest in Chrome integriert ist?
00:08:08Chrome hat Milliarden Nutzer, die nichts zusätzlich installieren müssen.
00:08:11Unserer Meinung nach sperrt Google niemanden aus.
00:08:13Sie nutzen einfach die Architektur und die Reichweite, die sie bereits haben.
00:08:17Ein offener Standard, der am besten in ihrem eigenen Browser mit ihrem
00:08:21eigenen Agenten funktioniert.
00:08:22Das heißt aber nicht, dass man es nicht implementieren sollte.
00:08:23Der Standard an sich ist extrem nützlich, und seine Seite für Agenten zugänglich
00:08:28zu machen, ist klug – egal, welcher Agent zuerst davon profitiert.
00:08:30Ein paar Dinge sollte man bei der Implementierung beachten.
00:08:33Die Spezifikation empfiehlt nicht mehr als 50 Tools pro Seite.
00:08:36Es geht nicht darum, die gesamte Anwendung offenzulegen.
00:08:38Es ist für gezielte, spezifische Aktionen gedacht – also das,
00:08:42was ein Nutzer auf dieser Seite tatsächlich tun möchte.
00:08:43Auch die Tool-Beschreibungen sind wichtiger, als man denkt.
00:08:46Agenten lesen diese Beschreibungen, um zu entscheiden, welches Tool sie aufrufen.
00:08:49Vage Beschreibungen führen dazu, dass der Agent das falsche Tool wählt oder es ignoriert.
00:08:53Schreiben Sie sie so, als würden Sie die Aktion jemandem erklären, der Ihre Seite noch nie gesehen hat.
00:08:57Und bedenken Sie: Das Ganze ist noch experimentell.
00:08:58Die API wird sich noch verändern.
00:09:00Chrome 146 erscheint im März mit breiterer Unterstützung.
00:09:03Bis dahin bleibt es ein Testlauf für Entwickler.
00:09:05Nutzen Sie es also noch nicht für den produktiven Einsatz.
00:09:06Wer diesen Kanal verfolgt, weiß, dass KI ein starkes technisches Fundament erfordert.
00:09:11Deshalb bin ich ein großer Fan von Brilliant.
00:09:13Es ist eine interaktive Plattform mit Lektionen von erstklassigen Lehrern
00:09:17vom MIT, aus Harvard und Stanford.
00:09:19Ich empfehle besonders die Kurse zu Clustering, Klassifizierung und der Funktionsweise von KI.
00:09:23Dort lernt man interaktiv, verborgene Muster zu erkennen und die Logik hinter
00:09:27großen Sprachmodellen zu verstehen.
00:09:28Wie man im Katalog sieht, gibt es eine riesige Auswahl an Kursen,
00:09:33von Mathe-Grundlagen bis hin zu Data Science und Informatik.
00:09:37Brilliant bietet unseren Zuschauern zudem 20 % Rabatt auf das Premium-Jahresabo,
00:09:42das unbegrenzten Zugriff auf alle Inhalte ermöglicht.
00:09:44Um Brilliant 30 Tage lang kostenlos zu testen, besucht brilliant.org/ailabs,
00:09:50scannt den QR-Code oder klickt auf den Link in der Beschreibung.
00:09:53Etabliert noch heute eine Lernroutine und verbessert eure Fähigkeiten
00:09:56mit Brilliant.
00:09:57Damit sind wir am Ende dieses Videos angelangt.
00:09:59Wenn ihr den Kanal unterstützen und uns helfen wollt, weiterhin solche Videos zu machen,
00:10:03könnt ihr das über den „Super Thanks“-Button tun.
00:10:06Wie immer vielen Dank fürs Zuschauen und bis zum nächsten Mal.