Skip to content

コンポーネント

コンポーネントは、A2UIの基本的な構成単位です。エージェントはこれらのコンポーネントを組み合わせてUIを構築します。

隣接リスト (Adjacency List) モデル

A2UIは、コンポーネントの親子関係を記述するために「隣接リスト」モデルを採用しています。これは、深くネストされたツリー構造をLLMが生成する際の困難さを解消するために設計されました。

エージェントは、すべてのコンポーネントをフラットなリストとして送信し、各コンポーネントは id を通じて他のコンポーネントを参照します。

例：ツリー構造をフラットに記述する

{
  "surfaceUpdate": {
    "surfaceId": "main",
    "components": [
      {
        "id": "container",
        "component": {
          "Card": {
            "title": "カードのタイトル",
            "children": ["text-1", "button-1"]
          }
        }
      },
      {
        "id": "text-1",
        "component": {
          "Text": {"text": {"literalString": "これはカードの中のテキストです"}}
        }
      },
      {
        "id": "button-1",
        "component": {
          "Button": {
            "child": "button-text",
            "action": {"name": "click_action"}
          }
        }
      },
      {
        "id": "button-text",
        "component": {
          "Text": {"text": {"literalString": "クリックして"}}
        }
      }
    ]
  }
}

標準コンポーネントカタログ

A2UIは、基本的な対話に必要な一連の標準コンポーネントを定義しています。

基本要素

  • Text: テキストを表示します。
  • Image: 画像を表示します。
  • Button: クリック可能なボタンです。

入力要素

  • TextField: 1行または複数行のテキスト入力。
  • DateTimeInput: 日付と時間の選択。
  • SelectionInput: ラジオボタン、チェックボックス、ドロップダウン。

レイアウト・コンテナ

  • Card: 視覚的なグループ化。
  • Timeline: 時系列データの表示。
  • List: 重複する要素のリスト。
  • FlexBox: 柔軟なレイアウト（水平・垂直方向）。

カスタムコンポーネント

標準コンポーネントに加えて、クライアントは独自の「カスタムコンポーネント」を定義してエージェントに公開できます。

カスタムコンポーネントを使用すると、Googleマップ、グラフ、複雑なビジネスウィジェットなど、アプリ固有のリッチな要素をエージェントから呼び出すことができます。

詳細は カスタムコンポーネントガイド を参照してください。

コンポーネントのプロパティ

各コンポーネントは、その動作や外観を制御する複数のプロパティを持ちます。多くのプロパティは データバインディング を介して動的に更新可能です。

完全なリストについては、コンポーネントリファレンス を確認してください。

次のステップ