A2UIとCopilotKitエージェントで作るGenerative UIアプリの構築方法

背景として、従来のエージェントは旅行プランの提案などを長い文章で返すだけで、選択リストや地図、日付ピッカーを会話内に表示する標準的な手段がなかった。Generative UIは、リクエストに応じてエージェントが実行時にインターフェースを組み立てる層であり、UIの記述方法と、エージェントをアプリにつないで描画するスタックの2つが必要になる。

A2UI（Agent-to-UI）はフレームワークに依存しないオープンスタンダードで、エージェントがUIをデータとして記述し、アプリ側が既存のコンポーネントで描画する。事前定義コンポーネントから選ぶ方式から、HTMLやJavaScriptによる自由なコード生成まで幅広く扱えるが、宣言型が最も一般的とされる。実行コードではなく宣言的なデータ形式であり、クライアントが信頼するカタログ外のものは画面に出る前に検出される。小さなJSONメッセージをIDで参照し合う構造のため、ストリーミングで段階的に描画できる。React、Lit、Angular、SwiftUI、Jetpack Compose、Flutterに加え、Vueやターミナル向けのコミュニティ製レンダラーもある。Basic Catalogはレイアウト、表示、入力、コンテナにわたる18の汎用プリミティブを備えるが、本番アプリでは独自カタログを定義するのが一般的としている。

CopilotKitはAG-UI（Agent-User Interaction Protocol）上に構築され、A2UIのペイロードに対応する。LangChain、AWS Strands、Google ADK、Mastraなど、AG-UI互換のフレームワークなら設定は同じである。ADKの例では、ag_ui_adkパッケージでエージェントをFastAPI上のAG-UIエンドポイントとして公開する。クライアント側では、zodスキーマで定義したコンポーネントとレンダラーを対応づけてcreateCatalogでカタログを作り、CopilotKitプロバイダーに渡す。コンポーネントの説明文はエージェントのプロンプトに入り、モデルが使いどころを判断する。設定はサーバー側で事前に行うことも、クライアントからリクエストと一緒に動的に送ることもできる。

A2UIのサーフェスは双方向で、コンポーネントはリアクティブである。日付選択や便の選択、搭乗者情報の入力といった操作が同じストリームでエージェントに戻り、エージェントがその値をもとにサーフェスを再出力する。入力をデータパスにバインドし、ボタンのアクションで返送するパスを指定する仕組みで、検証はクライアント側で行われるため、不正なメールアドレスはモデルを呼ばずにエラー表示できる。AG-UI上で動かす利点として、サーバー側の最小限の設定、専用サブエージェントでの生成、不正な出力の自己修復、再試行が尽きた場合の穏当な失敗処理が挙げられている。始めるには npx copilotkit@latest create --name my-app --framework a2ui でスターターを作成でき、CopilotKit Dojoに実行可能なデモもある。