Generative UI... in Python? — Jeremiah Lowin, Prefect
AAI Engineer
Computing/SoftwareInternet Technology
Transcript
00:00:00Vielen Dank, dass Sie alle da sind. Ich möchte heute über eine der seltsamsten Software-Anwendungen sprechen,
00:00:18die ich je geschrieben habe. Sie bewegt sich irgendwie am Rande von ganz vielen Dingen, die ich in letzter Zeit
00:00:22in die Welt getragen habe. Kommen Sie also gerne mit. Wir wollen versuchen, einen möglichst vernünftigen Ansatz
00:00:27zu einer sehr eigentümlichen Sache zu finden, die Agenten in MCP und andere Dinge ermöglichen. Und um zu beginnen,
00:00:34möchte ich über MCP-Apps sprechen. Ich weiß nicht, ob einige von Ihnen bei den anderen Vorträgen
00:00:38heute dabei sein konnten, vielleicht dem von Ido und Liat vor etwa einer Stunde. Wer von Ihnen
00:00:44kennt sich mit MCP-Apps aus? Okay, das ist wahrscheinlich das beste Publikum, vor dem ich diesen Vortrag jemals gehalten habe,
00:00:52ehrlich gesagt. Das ist also fantastisch. Für diejenigen, die sich nicht gemeldet haben: MCP-Apps sind eine
00:00:57Erweiterung des MCP-Protokolls, die, glaube ich, im Januar dieses Jahres eingeführt wurde. Und die Idee ist –
00:01:02das ist ein typischer Anfrage-Antwort-Zyklus für ein MCP-Tool. Der Nutzer stellt eine Anfrage an den Agenten. Der
00:01:10Agent wiederum beschließt, ein MCP-Tool zu verwenden, das auf einem MCP-Server gehostet wird. Ein Tool-Ergebnis kommt zurück
00:01:16in den Kontext des Agenten. Und der Agent wählt aus, wie er darauf antwortet, und sendet es an den Nutzer. Und somit sind
00:01:23grundsätzlich MCP-Server eine fantastische Möglichkeit, Funktionen und Geschäftslogik zu Ihren Agenten hinzuzufügen,
00:01:28aber es gibt niemals eine direkte Verbindung zwischen einem Nutzer und dem MCP-Server. Es läuft immer über das Gehirn des
00:01:34Agenten und, was noch wichtiger ist, über das Kontextfenster des Agenten. MCP-Apps sind also eine Erweiterung davon,
00:01:40die es uns tatsächlich ermöglicht, den Agenten zu umgehen. Stattdessen passiert Folgendes:
00:01:44Der Nutzer fordert etwas vom Agenten an, der Agent verwendet ein Tool, aber anstatt dass diese Tool-Anfrage
00:01:49an den Agenten zurückgeht, wird sie an den Nutzer gesendet. Und zwar als HTML, CSS, JavaScript. Es ist eine vollständige Benutzeroberfläche.
00:01:55Und sie kann genau so sein, wie Sie es möchten. Die Idee dahinter ist also, dass Sie eine Möglichkeit haben, das Internet
00:02:01sozusagen in Ihren Agenten zu integrieren. Sie können jede beliebige benutzerdefinierte, nützliche Benutzeroberfläche ausliefern. Sie können
00:02:08dem Nutzer jede gewünschte interaktive Erfahrung bieten. Und dann kann der Nutzer, wie man im
00:02:12Diagramm sieht, nun mit der Anwendung interagieren. Er kann die Tools nutzen. Er kann Informationen
00:02:17zurück an ein Backend senden, das auf dieser App gehostet wird, und wirklich eine vollständige Erfahrung erhalten. Man kann sich also vorstellen,
00:02:21einen Tisch in einem Restaurant zu reservieren, den Sitzplatz im Flugzeug zu wechseln oder mit einem Zeitplan zu interagieren.
00:02:28Für KI-Entwickler gibt es jetzt viele Dinge, die man als Nutzer tun kann, bei denen der Agent zwar vermittelt hat,
00:02:33bei denen man aber als Mensch agiert. Und es kommt eine Erweiterung heraus. Das wird
00:02:37im Juli-MCP-Release erscheinen, bei dem der Agent tatsächlich ebenfalls mit der App interagieren kann. Und das
00:02:43wird einige wirklich interessante Anwendungsfälle eröffnen, über die wir heute zwar nicht sprechen werden, aber man könnte
00:02:47hypothetisch nun eine Partie Schach gegen den Agenten in einer visuellen App spielen, bei der Sie einen Zug machen
00:02:52und dann der Agent ebenfalls mit der App interagiert. Ich denke also, das wird eine ganz neue
00:02:55Welt voller Möglichkeiten eröffnen. Nun, einige von Ihnen kennen vielleicht ein Framework, dessen Autor ich bin und das mein Unternehmen
00:03:03wartet, namens FastMCP. FastMCP ist eine der beliebtesten Methoden zum Erstellen von MCP-Servern. Und immer wenn etwas
00:03:09Neues und Cooles in der MCP-Welt auftaucht, frage ich mich als Erstes: Wie kann ich das unseren Nutzern zur Verfügung stellen?
00:03:16Und eines der wichtigsten Dinge, die ich Ihnen über unsere Nutzerschaft mitteilen muss, ist, dass es sich
00:03:20hauptsächlich um Python-Entwickler handelt. Und das ist ein kleines Problem, wenn wir Frontends und UIs bereitstellen wollen,
00:03:27denn wie sollen wir das eigentlich machen? Und an diesem Punkt des Vortrags enthülle ich,
00:03:31dass ich nicht genau weiß, was auf der nächsten Folie steht, also werfen wir mal einen kurzen Blick darauf.
00:03:35Nein, wir kommen gleich darauf zurück. Wir haben jetzt ein Problem: Wie bringen wir Python-Entwickler dazu, UIs zu bauen,
00:03:42die Best Practices entsprechen, die interaktiv, schön und nützlich sind, ohne so zu tun,
00:03:50als würden wir etwas Verrücktes tun, etwas das schon oft versucht wurde, und das gesamte
00:03:54Frontend, das gesamte Ökosystem, einfach auf seltsame, kompromittierte und fehlerhafte Weise
00:04:00als Frankenstein-System in Python hineinquetschen? Damit habe ich wirklich gerungen. Ich muss,
00:04:04ich verspüre wirklich die Verpflichtung, einen Weg zu finden, dies anzubieten. Aber ich kann nicht so tun,
00:04:10als würden wir React in Python ausliefern. Das wird nicht funktionieren. Also haben wir ziemlich intensiv darüber nachgedacht,
00:04:15wer eigentlich unsere Nutzer im FastMCP-Ökosystem sind. Wer sind diese Python-Entwickler, die oft in Unternehmen arbeiten?
00:04:20Was machen sie und wofür brauchen sie diese UIs? Wofür brauchen sie diese MCP-Apps?
00:04:25Was sie nicht brauchen, sind maßgeschneiderte UIs für Verbraucher mit vollständigem Branding. Das ist nicht das, was diese Leute tun. Worauf sie hauptsächlich
00:04:34fokussiert sind, ist das Teilen von Informationen in ihrer Organisation sowie das Sammeln
00:04:38von Informationen in ihrer Organisation. Und das hat die Art und Weise verändert, was wir von ihnen
00:04:43innerhalb des MCP-Apps-Frameworks erwarten. Und diese Einschränkung erwies sich als sehr nützlich. Grundsätzlich erwarten wir also,
00:04:48dass sie Dinge wie Tabellen erstellen, Informationen über Formulare erfassen
00:04:53und Diagramme teilen möchten. Mit dieser Einschränkung können wir also
00:04:58eine Software vorstellen, die wir vor einigen Monaten als Open Source veröffentlicht haben und die in diesem Kreis überraschend
00:05:03beliebt ist: Prefab. Es ist ein UI-Erstellungsframework mit begrenztem Umfang zum Zweck der
00:05:11Bereitstellung von UIs über einen Agenten für die vor Kurzem erwähnten Zwecke. Das hier ist eine Hello-World-Karte.
00:05:17Das sehen Sie vielleicht in jedem Frontend-Framework. Buchstäblich jedem. Es gibt dort etwas,
00:05:22das so aussieht, es steht auf der Website, man tippt seinen Namen ein und es aktualisiert sich in Echtzeit.
00:05:27Aber das Merkwürdige daran ist natürlich, dass der Code, der dies generiert hat, vollständig
00:05:31in Python geschrieben ist. Und ich hoffe, Sie empfinden dasselbe wie ich, wenn ich mir das ansehe, nämlich eine sehr seltsame
00:05:38Kombination aus „Ja, das ist cool“ und „Das macht mir ziemlich Angst“. Das „Ja, das ist cool“ rührt
00:05:44her von der Tatsache, dass dieser Code – selbst wenn man ihn nicht aus der Nähe sieht, ich kann ihn
00:05:48etwas größer machen – irgendwie Sinn ergibt. Man kann die
00:05:52Struktur der UI im Code erkennen, aber er hat auch etwas offensichtlich Fremdartiges und ein wenig
00:05:58Seltsames an sich. Und wenn man das fühlt, kommt man zu dem Schluss, dass
00:06:04das Erstellen eines Frontends in Python sich tatsächlich gut anfühlen kann, solange wir die
00:06:09Herausforderung richtig eingrenzen. Wir versuchen nicht, ein Frontend von Grund auf neu zu bauen. Wir versuchen, ein Frontend
00:06:15aus einer Reihe erstklassiger, gut gestalteter Komponenten zusammenzusetzen. Und so behalten wir die Leitplanken bei
00:06:20und behalten den Nutzer im Auge. Der Nutzer hier versucht nicht, etwas Beliebiges zu tun.
00:06:24Er versucht, ein gut strukturiertes Frontend zu nehmen und es der Person zu präsentieren, für die es bestimmt ist.
00:06:29Hier ist also eine kurze Tour durch diese DSL. In erster Linie verwenden wir Kontextmanager. Für
00:06:34diejenigen unter Ihnen, die FastMCP kennen, wissen Sie, dass man FastMCP wohl darauf reduzieren könnte zu sagen:
00:06:39Die Kerninnovation von FastMCP besteht darin, dass wir einen Python-Decorator verwendet haben, um einen gesamten MCP-Server zu bauen.
00:06:44Wenn Sie denselben reduktiven Ansatz auf Prefab anwenden möchten, könnten Sie sagen: Wir verwenden einen Kontextmanager,
00:06:48um eine vollständige Benutzeroberfläche zu erstellen. Indem wir Komponenten als Kontextmanager verschachteln, wie Sie hier sehen, bauen wir
00:06:55exakt dieselbe Struktur in der UI auf. Es fühlt sich beim Lesen sehr natürlich an. Sie können sehen, wie die Dinge
00:07:01strukturiert sind. Jedes Element der Benutzeroberfläche, jede Komponente – die beim Rendern eine wunderschöne Shad-cn-Komponente ist,
00:07:06wie Sie hier sehen können – ist eine Klasse, die Sie instanziieren. Sie können sie parametrisieren. Sie können ihr Dinge wie
00:07:11CSS-Klassen übergeben und sie beliebig aussehen lassen. Und das Letzte, wofür wir heute leider nicht
00:07:17genug Zeit haben, sind diese reaktiven Variablen. Ich werde Ihnen gleich eine Demo davon zeigen.
00:07:21Im Wesentlichen haben wir jedoch eine umfassende Möglichkeit, clientseitige Interaktivität zu erzeugen
00:07:26und Daten zwischen Komponenten zu binden, sodass Sie diese sehr reichhaltigen Erlebnisse erstellen können – und das wiederum,
00:07:31ohne vollständig in die JavaScript-Welt eintauchen und ein Ökosystem verlassen zu müssen, mit dem zumindest meine Nutzerschaft
00:07:36äußerst vertraut ist. Und das ist die Pipeline, die Prefab im Wesentlichen bereitstellt.
00:07:42Wir verwenden eine Python-DSL, die ich Ihnen gerade gezeigt habe. Wir nutzen diese, um eine deklarative
00:07:46Repräsentation einer Benutzeroberfläche zu erstellen. Diese wird dann in ein JSON-Protokoll serialisiert. Und dieses JSON-Protokoll wird
00:07:53schließlich von einer React-App gerendert, die als die eigentliche MCP-App gehostet wird. Das wird also eine
00:07:59Menge Möglichkeiten für uns eröffnen, die ich Ihnen gleich noch demonstrieren werde. Aber der Schlüssel
00:08:02zu alledem ist das JSON in der Mitte. Das Python ist eigentlich ein Versehen, das ich
00:08:07im Nachhinein entdeckt habe, weil es eine seltsame, idiosynkratische Sache war, die ich haben wollte. Der Sinn davon war:
00:08:10„Können wir eine serialisierbare Repräsentation einer Benutzeroberfläche erstellen?“ Und das ist wiederum das JSON-Protokoll.
00:08:17Und da es serialisierbar ist, kann ich es von einem Agenten generieren lassen. Ich kann es an einen Agenten senden. Ich kann es
00:08:22als Mensch erstellen und einen Agenten bitten, es zu modifizieren. All diese coolen Dinge passieren aufgrund dieser
00:08:26intermediären Repräsentation in JSON. Und als die Python-DSL dann quasi von selbst entstand und wirklich
00:08:31schön und einfach zu bedienen war, hatte ich das Gefühl, wir haben etwas in der Hand. Wir haben also diese Dokumentation. Und um
00:08:37das zu beweisen, das war eine weitere Einschränkung, die wir uns auferlegt haben – ich weiß gar nicht, was das ist. Das ist die
00:08:42Dokumentation für die Datentabellen-Komponente in Prefab. Ich glaube, es gibt 130 oder 140 Komponenten, die wir ausliefern und die
00:08:47Sie zu einer beliebigen Form zusammenstellen können. Die Dokumentation für Prefab wird zu 100 % in Prefab gerendert. Die Datentabelle
00:08:55hier in der grundlegenden Verwendung wird live in Prefab gerendert. Der Python-Code, Sie können sehen, wie er
00:09:01am unteren Bildschirmrand auftaucht – dieser Python-Code wird vom Renderer live ausgeführt, um dies zu erzeugen.
00:09:05Wenn Sie möchten, können Sie jedes beliebige Beispiel in der Prefab-Dokumentation nehmen, auf einen Link klicken, es in den
00:09:09Playground laden und den Code live bearbeiten, den Python-Code live verändern, und Sie werden sehen, wie sich die Benutzeroberfläche aktualisiert. Und nochmals,
00:09:15das ist super seltsam. Wenn Sie sich dabei ein wenig unwohl fühlen, ist das in Ordnung. Es ergibt
00:09:20viel mehr Sinn, wenn wir das Problem einschränken und uns daran erinnern, dass wir eine Benutzeroberfläche
00:09:24zusammenstellen, anstatt sie zu bauen. Ich möchte das jetzt wieder mit dem Thema verknüpfen, mit dem ich begonnen habe, nämlich MCP-Servern
00:09:29und genauer gesagt MCP-Apps. Sie können Prefab gerne für jede Art von Frontend-Problem verwenden,
00:09:34das Sie haben. Mein Team hat begonnen, es für kleine interaktive Daten-Apps und Erkundungstools zu nutzen. Sie haben
00:09:39damit Präsentationen erstellt. Wir liefern ein Dark-Mode-Theme mit, das ehrlich gesagt ein bisschen so aussieht wie das,
00:09:43das ich Ihnen gerade zeige, um Folien und Präsentationen zu machen. Man kann damit eine Menge anstellen. Aber der Grund,
00:09:48warum wir es entwickelt haben, der Anwendungsfall, den es abdeckt, sind MCP-Server. Deshalb möchte ich Ihnen einen kurzen
00:09:54Überblick über drei Wege geben, wie Sie es nutzen können, drei zunehmend raffinierte Wege,
00:09:58MCP-Server nutzen können. Das erste ist, ein interaktives Tool zu bauen. Wie ich Ihnen zu Beginn des Vortrags zeigte,
00:10:04Beginn des Vortrags gezeigt habe, ist ein MCP-Tool typischerweise etwas, das Ihr Agent aufruft, wobei der Agent das Ergebnis
00:10:09erhält und Sie überhaupt nicht damit interagieren können. Was ist also der einfachste Weg, diese interaktive Funktionalität weiterzuentwickeln?
00:10:14Das zeige ich Ihnen hier. Das ist ein Fast-MCP-Tool. Es wurde, wie Sie sehen, mit einem Tool-Decorator versehen
00:10:20und ist einfach eine Python-Funktion, die einige Informationen zurückgibt. Bedenken Sie dabei, dass diese Informationen an den
00:10:24Agenten gehen, nicht an den Benutzer. Wenn wir dies in ein vollständig interaktives Tool mit Prefab verwandeln wollen,
00:10:30nehmen wir eine Änderung vor. Anstatt am Ende ein Python-Dictionary zurückzugeben, das an den Agenten geht,
00:10:36geben wir eine Prefab-Komponente zurück. In diesem Fall ist es die Datentabelle. Das ist das,
00:10:40wovon ich Ihnen vorhin die Dokumentation gezeigt habe. Und wenn wir diese Prefab-Komponente zurückgeben, erkennt Fast MCP das automatisch.
00:10:46Es schließt automatisch darauf, dass Sie tatsächlich eine MCP-App zurückgeben möchten, und es startet
00:10:51die gesamte Maschinerie, um HTML, JavaScript, CSS, den Renderer und alles bereitzustellen, damit Ihr
00:10:55Benutzer eine Datentabelle sieht. So sieht das in der Praxis aus. Hier wird der Goose-Client verwendet,
00:11:00was ein hervorragender Client ist. Ich habe einen Server, der die gerade von mir gezeigte Funktion enthielt, gefragt: Zeige mir das Teamverzeichnis,
00:11:06und was dann auftaucht – das wäre als GIF besser gewesen, ich entschuldige mich –, aber was auftaucht, ist eine vollständig
00:11:10interaktive Datentabellen-Komponente. Sie unterstützt Suchen, Filtern, Sortieren, Paginierung
00:11:16und all diesen Kram. Und das Einzige, was man tun muss, ist das, was ich Ihnen vorhin gezeigt habe: einfach die Datentabellen-Klasse zurückgeben,
00:11:21und um den Rest wird sich gekümmert. Wir können noch einen Schritt weiter gehen. Was ist, wenn wir zusätzlich zur Datentabelle
00:11:26direkt neben der Datentabelle ein Kreisdiagramm anzeigen möchten, das dieses Teamverzeichnis aufschlüsselt?
00:11:30Wie Sie sich denken können, ist das sehr, sehr, sehr ähnlicher Code. Anstelle der Datentabelle allein werden wir nun
00:11:35ein Grid und ein Kreisdiagramm importieren, und wenn Sie auf den unteren Teil schauen, sehen Sie, dass wir sowohl das
00:11:40Kreisdiagramm als auch die Datentabelle mithilfe eines Context Managers ganz natürlich in ein Grid einfügen, und das ist das
00:11:45Ergebnis. Wir erhalten nun ein Kreisdiagramm neben unserer Datentabelle. Dies folgt also einem Prinzip, das wir bei Prefect
00:11:51in vielen unserer Softwares wirklich einzuhalten versuchen, nämlich: eine Zeile Code, eine große spürbare Änderung.
00:11:55Wir versuchen, diese Komplexität inkrementell zu halten, und das erfüllt viele Dinge, die meiner Meinung nach wirklich
00:11:59wichtig für Frameworks und DSLs sind. Hier ist ganz schnell – da wir keine Zeit haben, näher darauf einzugehen –, dies
00:12:05ist nur ein Beispiel, das ich zusammengestellt und aufgenommen habe, für eine rein clientseitige Interaktivität,
00:12:09bei der all diese Steuerelemente verknüpft sind, Dinge aktualisiert werden, Text aktualisiert wird, Werte aktualisiert werden,
00:12:15ohne dass JavaScript geschrieben wurde. Das sind einfach ein paar zusammengestellte Klassen, die alle dasselbe
00:12:19Attribut zugewiesen haben, sodass sie automatisch zusammenarbeiten.
00:12:24Oh, und ich habe noch ein kurzes Codebeispiel eingefügt, wie das aussieht. Wir haben eine Klasse namens Rx, die,
00:12:28wie Sie sich vielleicht denken können, für reaktiv steht. Wenn Sie diese reaktiven Variablen verwenden, können Sie sie einfach überall
00:12:33in Ihrem Code referenzieren, Sie können sie formatieren, Sie können sie zum Namen von etwas machen, und es wird
00:12:38automatisch in die korrekte JavaScript-Implementierung kompiliert. Das zweite, was wir tun können, ist
00:12:43eine FastMCP-App. Wenn ein interaktives Tool also gewissermaßen eine einmalige Benutzeroberfläche ist,
00:12:49mit der man im Client interagieren kann, ist eine FastMCP-App eine vollständige Anwendung mit einem Backend,
00:12:54und in diesem Fall fungiert der MCP-Server als Backend. Wir haben in dieser Sitzung zwar keine Zeit,
00:12:59ein vollständiges Praxisbeispiel durchzugehen, aber hier ist der Code, um Ihnen einen Eindruck zu vermitteln.
00:13:03Wir schreiben eine Klasse, die unsere FastMCP-App darstellt, und versehen dann mindestens
00:13:08zwei Funktionen mit app.ui. Das ist der Einstiegspunkt, der die vorgefertigten Komponenten zurückgibt,
00:13:14die die Basis-Benutzeroberfläche dieser Anwendung bilden, und dann mindestens eine – ich schätze, das ist optional, also null oder mehr –
00:13:20app.tools. Das sind im Wesentlichen Backend-Methoden, auf die Sie nun in der Benutzeroberfläche verweisen können.
00:13:27Sie könnten also eine Schaltfläche haben, die von einem Benutzer in ein Formular eingegebene Daten übernimmt
00:13:31und sie über ein solches dekoriertes Tool an eine Datenbank sendet. Etwas, das wir verwenden und mittlerweile als integrierte
00:13:38Komponente in FastMCP mitliefern, ist eine Upload-Komponente. Wie Sie also sehen, hat nur der Agent Zugriff
00:13:46auf einen MCP-Server hat, kann man nicht einfach eine Datei auf einen MCP-Server hochladen. Sie muss durch das Gehirn des
00:13:51Agenten gehen, und das führt dazu, dass viele Leute im Grunde ein Upload-Tool auf ihrem MCP-Server erstellen,
00:13:56vergessen, dass der Agent es tatsächlich aufrufen muss, und was man am Ende tut, ist die teuerste Copy-Paste-Operation
00:14:00der Welt. Man gibt dem Agenten ein Megabyte Text, der Agent tippt ihn Zeichen für Zeichen in den MCP
00:14:06ein, und ja, dann hat man es tatsächlich hochgeladen, aber es ist extrem, extrem ineffizient.
00:14:12Das ist also ein wirklich guter Anwendungsfall für eine MCP-App, bei der man den Agenten bittet, die App-Oberfläche
00:14:18aufzurufen, man eine Datei hineinzieht, und nun umgeht die Datei den Agenten und gelangt direkt in den
00:14:23Server, und wir haben das zusammen mit einer Handvoll anderer nützlicher Tools zu einem Einzeiler gemacht, und
00:14:30ist das ein GIF? Das ist kein GIF, oder wenn es eines ist, wird es nicht gerendert, aber es würde in Ihrem
00:14:34Client so aussehen, und jeder Client, der MCP-Apps unterstützt, kann Ihnen dies jetzt zeigen, wenn Sie den Agenten bitten, ich muss etwas hochladen,
00:14:38und Sie können sicher und vor allem günstig hochladen. Oh, ich habe doch ein GIF. Macht nichts.
00:14:45Seine eigenen Folien zu kennen, ist eine gute Lektion aus diesem Vortrag. Hier interagiert der Agent also nun mit
00:14:50einer Datei, die ich gerade hochgeladen, die ich per Drag & Drop hineingezogen habe. Ich stelle diese Folien später zur Verfügung,
00:14:55falls Sie sie sehen möchten, oder – natürlich – es ist ein Einzeiler. Sie können es heute Nachmittag in Ihren Servern ausprobieren.
00:15:00Das Letzte, worüber ich sprechen möchte, das quasi durch diese Architektur ermöglicht wird,
00:15:04ist eine vollständig generative Benutzeroberfläche. Wir überspringen das einfach und lassen es laufen, während ich spreche. Das ist also eine sehr
00:15:10einfache Demo, in der ich Claude gefragt habe: „Hey, ich halte einen Vortrag darüber. Fang einfach an, die interessanteste
00:15:15Benutzeroberfläche zu streamen, die dir einfallen kann.“ Und so hat es einfach losgelegt. Und was es hierbei tut – wir haben ein Tool bereitgestellt,
00:15:21das das JSON akzeptiert, die Protokollserialisierung einer Benutzeroberfläche, auf der Prefab basiert. Und während der Agent nun
00:15:29diese Informationen über die Leitung streamt, rendern wir in Echtzeit alles, was wir haben,
00:15:35reparieren dieses JSON und rendern es. Und das war eine echt coole Demo, und sie war sehr effektiv,
00:15:39und die Leute mögen das, weil man jetzt nicht einmal mehr die Benutzeroberfläche selbst definieren muss. Alles, was man tun muss, ist,
00:15:43den Skill zu verwenden, den wir bereits ausliefern, ihn mit Ihrem Agenten zu teilen, damit er weiß, wie man eine Benutzeroberfläche schreibt, und schon geht's los.
00:15:48Es kann Ihnen bauen, was immer Sie wollen. Es gibt einige Clients, die integrierte Versionen davon haben. Wenn sie
00:15:52eine integrierte Version haben, bevorzugen Sie diese vielleicht, tun Sie das auf jeden Fall. Aber dies könnte eine Möglichkeit für Sie sein, Ihren
00:15:56eigenen benutzerdefinierten Ansatz oder einen begrenzten Satz an Komponenten zu entwickeln, die für Sie nützlich sind. Nun, eine wirklich interessante
00:16:01Sache passierte, als wir das aufsetzten. Wie ich bereits erwähnte, war ursprünglich der Plan, dass der Agent
00:16:07JSON über die Leitung sendet und es in dieser vollständigen React-Anwendung gerendert wird. Was wir schließlich herausfanden,
00:16:13ist, dass die Python-Repräsentation einer Benutzeroberfläche etwa 70 % kleiner ist als die JSON-Repräsentation.
00:16:20Deshalb machen wir das nicht mehr. Wenn ich diese Demo mit gestreamtem JSON aufgenommen habe, machen wir es jetzt so, dass wir tatsächlich
00:16:26das Python über die Leitung streamen. Es wird in einer Sandkasten-Umgebung ausgeführt. Es wird auf dem Server in JSON umgewandelt,
00:16:32und das wird dann gerendert. Und das hat einen drastischen, drastischen Token-Effizienzvorteil und Latenzvorteil.
00:16:39Es funktioniert also genau so wie bei der Aufzeichnung dieser Demo, aber das ist einfach eines dieser Dinge,
00:16:43die wir im Handumdrehen gelernt haben. Und es ist wirklich faszinierend, dass die Python-Repräsentation einfach so viel kompakter und ergonomischer ist
00:16:49als die vollständige JSON-Variante. Das ist also Prefab. Wenn Sie es ausprobieren möchten, wenn Sie neugierig sind,
00:16:55wenn Sie das Seltsamste sehen wollen, was ich je gebaut habe, zusammen mit vielen anderen Leuten, finden Sie
00:17:00die Dokumentation unter prefab.prefect.io. Sie können sich die vollständige Bibliothek ansehen, die sich hier auf unserem GitHub befindet. Und das ist
00:17:06bereits vollständig in Fast MCP integriert. Wenn Sie also eine aktuelle Version von Fast MCP verwenden, sollten Sie in der Lage sein,
00:17:11diese optionale Edition zu installieren, die Komponenten zu importieren, sie zurückzugeben und mit diesen MCP-Apps zu experimentieren.
00:17:17Vielen Dank an alle fürs Kommen.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video