ジェネラティブエージェンツの大嶋です。
「AIエージェントキャッチアップ #63 - A2UI」という勉強会を開催しました。
generative-agents.connpass.com
アーカイブ動画はこちらです。
A2UI
今回は、Generative UIのためのエージェントとユーザー間のインターフェース「A2UI」をキャッチアップしました。
A2UIのGitHubリポジトリはこちらです。
公式ドキュメントはこちらです。
今回のポイント
A2UIとは
A2UI（Agent-to-User Interface）は、AIエージェントの出力をもとに動的にUIを生成する「Generative UI」のためのインターフェースやレンダラーを提供するオープンソースプロジェクトです。
A2UIが使われている例としてはGoogle OpalやGemini Enterpriseが挙げられており、Googleのプロダクトで使用していたしくみを整理してオープンソース化したものと思われます。
A2UIは現在、v0.8のパブリックプレビュー段階です。
基本的なアーキテクチャ
A2UIは、UIの生成と実行を切り離した設計になっています。 エージェントはJSON形式でUIを宣言的に記述し、クライアントアプリケーションがJSONをもとにレンダリングします。
エージェントは以下の3つのステップでUIを生成します。
- UIの構造を返す (surfaceUpdate)
- データをバインディングする (dataModelUpdate)
- レンダリングを開始する (beginRendering)
デモを動かしてみた
クイックスタートのデモを動かしてみました。
レストラン予約のサンプルで、エージェントが動的にフォームを生成し、ユーザーが入力できるUIが表示されました。
「2人用のテーブルを予約する」といった入力に対して、エージェントの出力をもとに動的にUIが生成される様子を確認できました。
Generative UIのコンセプト自体は以前から存在していましたが、最近のモデルの性能向上により、実用的なレベルになってきている可能性を感じました。
コンポーネント
A2UIには標準で様々なコンポーネントが用意されています。
- ボタン
- テキスト
- モーダル
- タブ
- 画像
- 動画
- etc...
また、カスタムコンポーネントも定義できるため、ドメイン固有のUIやGoogleマップのようなサードパーティコンポーネントも使用できます。
フレームワークサポート
A2UIのフロントエンド側は、Lit・Angular・Flutterのレンダラーが提供されており、React・SwiftUI・Jetpack Composeが対応予定となっています。
バックエンド側はフレームワーク非依存で、LangChainなど好きなフレームワークを使用してJSON形式のメッセージを生成できます。
次回のご案内
以上、今回は「A2UI」をキャッチアップしました。
次回は「AIエージェントキャッチアップ #64 - Universal Commerce Protocol」ということで、Googleが発表したエージェンティックコマースのプロトコル「Universal Commerce Protocol（UCP）」がテーマです！
generative-agents.connpass.com
ご興味・お時間ある方はぜひご参加ください！
また、その次の回以降のテーマも募集しているので、気になるエージェントのOSSなどあれば教えてください！
