Skip to content

エージェント開発ガイド

A2UIプロトコルを使用して、リッチでインタラクティブなUIを生成するエージェント（サーバー側）を構築する方法を学びます。

基本的なアプローチ

エージェントを構築する際、主に3つの作業があります：

  1. プロンプト設計: LLMにA2UI JSONを生成するように教える。
  2. メッセージ生成: LLMの出力をA2UIメッセージ形式に整形する。
  3. ストリーミング: 生成されたメッセージをリアルタイムでクライアントに送信する。

1. プロンプト設計 (System Prompt)

LLMが正しいA2UI構造を生成できるように、システムプロンプトに以下の情報を含めます。

  • A2UIの形式: 隣接リスト (Adjacency List) モデルであることを記述します。
  • 利用可能なコンポーネント: エージェントが使用できるコンポーネント（標準およびカスタム）のリファレンスを提供します。
  • データバインディング: データモデルとパスの使い方を説明します。

プロンプトの例：

あなたはA2UIメッセージを生成するアシスタントです。
UIを出力する際は、以下のJSON形式に従い、JSONL形式でストリーム出力してください。

1. surfaceUpdate: UIの構造（隣接リスト形式）を定義します。
2. dataModelUpdate: コンポーネントにバインドされるデータを提供します。
3. beginRendering: レンダリングを開始させます。

利用可能なコンポーネント: Text, Button, Card, TextField...

2. メッセージ生成フロー

エージェントは通常、一連のJSONLメッセージを生成します。

ステップ A: UI構造の定義 (surfaceUpdate)

最初に、画面上のコンポーネントの配置を定義します。

{"surfaceUpdate": {"surfaceId": "main", "components": [...]}}

ステップ B: データの送信 (dataModelUpdate)

コンポーネントが必要とするデータ（初期値など）を送信します。

{"dataModelUpdate": {"surfaceId": "main", "contents": [...]}}

ステップ C: レンダリング開始 (beginRendering)

UIを表示するための準備が整ったことをクライアントに伝えます。

{"beginRendering": {"surfaceId": "main", "root": "root-component-id"}}

3. 実装のヒント

ストリーミングの活用

ユーザーの待ち時間を減らすために、LLMのトークンが生成されるたびにパースして、1つずつメッセージ（JSONLの1行）としてクライアントにストリーミングしてください。

エラーハンドリング

LLMが不完全なJSONを生成した場合に備えて、検証（バリデーション）を行い、クライアントに送る前に修正するか、エラーメッセージを送信してください。

ツールの活用

  • ADK (Agent Development Kit): Googleが提供するADKを使用すると、A2UIメッセージの作成がより簡単になります。(サンプルを参照)
  • A2A (Agent-to-Agent): A2Aプロトコルを使用している場合、メッセージのラップ（カプセル化）が自動的に行われます。

開発者チェックリスト

✅ LLMはA2UIの仕様（隣接リスト形式）を理解しているか？ ✅ クライアントで使用可能なコンポーネントのみを生成しているか？ ✅ 適切に JSON Pointer を使用してデータバインディングを行っているか？ ✅ メッセージは正しい順序（構造 → データ → 開始）で送信されているか？ ✅ パフォーマンスのためにストリーミングを実装しているか？

次のステップ