Google + CopilotKit

AIエージェントが
安全にUIを生成

A2UIはオープンな宣言型UIプロトコルで、AIエージェントが任意のコードを実行せずに、クロスプラットフォームでリッチなインタラクティブインターフェースを安全にレンダリングできます。

始めるドキュメント

v0.8

現在のバージョン

Apache 2.0

オープンソース

フレームワーク

a2ui-response.json

セキュア宣言型

ストリーミングレンダー

クロスプラットフォーム

Core Features

4つのコア機能

AI時代のUIインタラクション向けに構築、信頼境界を越えた安全なレンダリングを実現

セキュリティファースト

Security by Design

実行可能コードではなく宣言型データフォーマットを使用。エージェントは事前承認されたコンポーネントのみ使用可能で、アーキテクチャレベルでUIインジェクション攻撃のリスクを排除。

詳細を見る

LLMフレンドリー

LLM-Friendly Format

LLMのトークン単位生成に最適化されたフラットなJSON構造。隣接リストモデルは効率的な解析と増分更新をサポート。

詳細を見る

フレームワーク非依存

Framework Agnostic

同じA2UIレスポンスをReact、Angular、Flutter、またはネイティブモバイルプラットフォームで、各プラットフォームのネイティブコンポーネントを使用してレンダリング可能。

詳細を見る

プログレッシブレンダリング

Progressive Rendering

ストリーミングUI更新をサポートし、ユーザーはリアルタイムでインターフェースが段階的に構築されるのを見ることができます。即座のレスポンス、自然な体験。

詳細を見る

How It Works

仕組み

A2UIは宣言型プロトコルを通じてAIエージェントとクライアント間の安全な通信を実現

STEP 01

ユーザーがメッセージを送信

ユーザーがAIエージェントにリクエストを送信、例：「近くのレストランを探して」

STEP 02

エージェントがA2UIを生成

AIエージェントがUIを記述するA2UIメッセージを生成（JSONフォーマットのコンポーネントツリー）

STEP 03

ストリーミング

メッセージがクライアントにストリーミング、生成しながらレンダリングをサポート

STEP 04

ローカルレンダリング

クライアントがネイティブコンポーネント（React/Flutter/Angular）を使用してUIをレンダリング

STEP 05

ユーザーインタラクション

ユーザーがUIと対話、イベントがエージェントに送り返される

STEP 06

レスポンス更新

エージェントが新しいA2UIメッセージで応答、UIが動的に更新

アーキテクチャ概要

ユーザー

リクエスト

AIエージェント(Gemini, GPT...)

A2UI JSON

クライアント(React, Flutter...)

レンダー

ネイティブUI

ライブデモ・インストール不要

試す A2UI Composer

ビジュアルツールを使用してブラウザで直接A2UIインターフェースを構築・テスト、
ドラッグ＆ドロップコンポーネント、ライブプレビュー、ワンクリックでJSONエクスポート

デモを開く

ビジュアルビルダー

ドラッグ＆ドロップでUIを素早く構築、WYSIWYG

ライブプレビュー

即座のレンダリングプレビュー、ミリ秒レスポンス

JSONエクスポート

ワンクリックで標準A2UIフォーマットにエクスポート

A2UI Composer

クリックして開く →

クリックでフルスクリーンデモ

Code Example

コード例

1つのA2UIレスポンスで複数プラットフォームにネイティブレンダリング

1{
2  "type": "surface",
3  "surface_id": "main_content",
4  "components": [
5    {
6      "id": "card_1",
7      "type": "card",
8      "props": {
9        "title": "Italian Restaurant",
10        "subtitle": "0.5 km away",
11        "image": "https://..."
12      },
13      "children": ["rating_1", "btn_1"]
14    },
15    {
16      "id": "rating_1",
17      "type": "rating",
18      "props": { "value": 4.5, "count": 128 }
19    },
20    {
21      "id": "btn_1",
22      "type": "button",
23      "props": {
24        "label": "View Details",
25        "action": "view_restaurant"
26      }
27    }
28  ]
29}