Markdown als Protokoll für agentenbasierte Benutzeroberflächen mit Streaming-Ausführung

Ein Entwickler hat einen Prototypen erstellt, der untersucht, wie generative Benutzeroberflächen mit Codeausführung für KI-Agenten kombiniert werden können, wobei Markdown als einheitliches Protokoll dient. Das System streamt Text, ausführbaren Code und Daten in einer einzigen Antwort, wobei der Code inkrementell ausgeführt wird, sobald er eintrifft.

Das Protokoll: Markdown mit drei Blocktypen

Der Ansatz verwendet die Standard-Markdown-Syntax, die LLMs bereits verstehen, sodass keine neuen Formate erlernt werden müssen. Es werden drei Blocktypen definiert:

• Textblöcke: Einfache Markdown-Formatierung, die an den Nutzer gestreamt wird
• Code-Blöcke: ```tsx agent.run führt TypeScript/JSX-Code auf dem Server in einem persistenten Kontext aus
• Datenblöcke: ```json agent.data => "id" streamt JSON-Daten in UI-Komponenten

Diese Blöcke können in beliebiger Reihenfolge innerhalb einer einzigen Antwort gemischt werden. Der Parser verarbeitet sie inkrementell, während die Tokens vom LLM eintreffen.

Streaming-Ausführung

Code wird Anweisung für Anweisung ausgeführt, während der LLM ihn generiert, ohne auf das vollständige Schließen des Code-Blocks zu warten. Dies ermöglicht es, API-Aufrufe zu starten, UI zu rendern und Fehler anzuzeigen, während der LLM noch Tokens sendet. Der Entwickler hat bun-streaming-exec erstellt, um dies zu handhaben, wobei vm.Script mit benutzerdefiniertem Wrapping verwendet wird, da Streaming-Ausführung kein Standard-Laufzeitprimitiv ist.

Agentische UI mit mount()-Primitive

Das System verwendet React für die UI-Generierung, da LLMs umfangreiche Erfahrung mit React-Komponenten und JSX haben. Das Kernprimitiv ist mount():

mount({
  ui: () => <Card>Hello from the agent!</Card>
});

Wenn der LLM diesen Code generiert und der Server ihn ausführt, serialisiert mount() die React-Komponente und sendet sie zur Darstellung innerhalb der Chat-Oberfläche an den Client.

Datenflussmuster

Der Prototyp implementiert vier verschiedene Muster für die Datenbewegung:

1. Client → Server (Formulare): Der Agent kann auf Benutzereingaben über Formulare warten
2. Server → Client (gestreamte Daten): Datenblöcke streamen JSON direkt in eingebundene UIs
3. Server → LLM (console.log): console.log-Ausgaben und Ausnahmen werden als neuer Zug an den LLM zurückgegeben
4. LLM → Server → Client (vollständiger Rundlauf): Vollständige Zyklen, bei denen der LLM Code generiert, der Daten abruft und UI mit diesen Daten rendert

Feedback-Schleife

Das System verwendet console.log als Mechanismus, damit der Agent mit sich selbst kommunizieren kann. Wenn der LLM Markdown mit Codeblöcken generiert, wird Text an den Nutzer gestreamt, während Code inkrementell ausgeführt wird. Alle console.*-Ausgaben oder Ausnahmen werden als neuer Zug an den LLM zurückgegeben. Wenn es keine Ausgaben oder Ausnahmen gibt, wartet das System auf eine neue Benutzeranfrage.

Dies ermöglicht es dem Agenten, auf seine eigene Ausführung zu reagieren, z. B. um Nachrichtenanzahlen zu überprüfen oder zu pausieren, um auf Benutzereingaben zu warten, bevor er fortfährt.