エージェント指向UIのためのストリーミング実行プロトコルとしてのMarkdown

開発者は、AIエージェント向けに生成型UIとコード実行を組み合わせる方法を探るプロトタイプを構築し、統一プロトコルとしてMarkdownを使用しました。このシステムは、単一のレスポンスでテキスト、実行可能なコード、データをストリーミングし、コードは到着するにつれて段階的に実行されます。

プロトコル：3種類のブロックを持つMarkdown

このアプローチは、LLMが既に理解している標準的なMarkdown構文を使用し、新しい形式を教える必要を回避します。3種類のブロックを定義します：

• テキストブロック：ユーザーにストリーミングされるプレーンなMarkdownフォーマット
• コードフェンス：```tsx agent.run は、永続的なコンテキストでサーバー上でTypeScript/JSXコードを実行します
• データフェンス：```json agent.data => "id" は、JSONデータをUIコンポーネントにストリーミングします

これらのブロックは、単一のレスポンス内で任意の順序で交互に配置できます。パーサーは、LLMからトークンが到着するにつれて段階的に処理します。

ストリーミング実行

コードは、LLMが生成するにつれて文単位で実行され、コードフェンス全体が閉じるのを待ちません。これにより、API呼び出しが開始され、UIがレンダリングされ、エラーが表面化する一方で、LLMはまだトークンを送信し続けることができます。開発者はこれを処理するためにbun-streaming-execを構築し、ストリーミング実行が標準的なランタイムプリミティブではないため、カスタムラッピングでvm.Scriptを使用しました。

mount()プリミティブによるエージェント型UI

このシステムは、LLMがReactコンポーネントとJSXに広く触れているため、UI生成にReactを使用します。中核となるプリミティブはmount()です：

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

LLMがこのコードを生成し、サーバーがそれを実行すると、mount()はReactコンポーネントをシリアライズし、チャットインターフェース内でレンダリングするためにクライアントに送信します。

データフローパターン

プロトタイプは、データ移動のための4つの異なるパターンを実装しています：

1. クライアント → サーバー（フォーム）：エージェントはフォームを通じてユーザー入力が行われるのを待つことができます
2. サーバー → クライアント（ストリーミングデータ）：データフェンスはJSONをマウントされたUIに直接ストリーミングします
3. サーバー → LLM（console.log）：console.log出力と例外は、新しいターンとしてLLMにフィードバックされます
4. LLM → サーバー → クライアント（完全な往復）：LLMがデータを取得し、そのデータでUIをレンダリングするコードを生成する完全なサイクル

フィードバックループ

このシステムは、エージェントが自身と対話するためのメカニズムとしてconsole.logを使用します。LLMがコードブロックを含むMarkdownを生成すると、テキストはユーザーにストリーミングされ、コードは段階的に実行されます。すべてのconsole.*出力または例外は、新しいターンとしてLLMにフィードバックされます。出力や例外がない場合、システムは新しいユーザークエリを待ちます。

これにより、エージェントは自身の実行に反応することができ、例えばメッセージ数を確認したり、ユーザー入力を待ってから続行するために一時停止したりできます。