UI ツール
adk-ui crateは、AI Agentがツール呼び出しを通じてリッチなユーザーインターフェースを動的に生成することを可能にします。Agentは、フォーム、カード、アラート、テーブル、チャートなどをレンダリングできます。これらはすべて、フロントエンドでの利用のためにJSONにシリアライズされる型安全なRust APIを介して行われます。
構築するもの
主要な概念:
- フォーム - さまざまなフィールドタイプでユーザー入力を収集します
- カード - アクションボタン付きで情報を表示します
- テーブル - 行/列で構造化データを提示します
- チャート - 棒グラフ、折れ線グラフ、面グラフ、円グラフでデータを視覚化します
- アラート - 通知とステータスメッセージを表示します
- モーダル - 確認ダイアログと集中的なインタラクション
- トースト - 短いステータス通知
- プロトコル相互運用 - A2UI、AG-UI、またはMCP AppsペイロードとしてUIを出力します
例: アナリティクスダッシュボード
例：登録フォーム
動作の流れ
┌─────────────────────────────────────────────────────────────────────────────┐
│ STEP 1: User requests something │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ User: "I want to register for an account" │
│ │
│ ↓ │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ AI AGENT (LLM) │ │
│ │ "I should show a registration form" │ │
│ └──────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────────┐
│ STEP 2: Agent calls render_form tool │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 📞 Tool Call: render_form({ │
│ title: "Registration", │
│ fields: [ │
│ {name: "email", type: "email"}, │
│ {name: "password", type: "password"} │
│ ] │
│ }) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────────┐
│ STEP 3: Frontend renders the form │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 📋 Registration │ │
│ │ ──────────────────────────────────────────── │ │
│ │ Email: [________________________] │ │
│ │ Password: [________________________] │ │
│ │ │ │
│ │ [ Register ] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ✅ User sees an interactive form, fills it out, clicks Register │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────────┐
│ STEP 4: Form submission sent back to agent │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ 📩 Event: { │
│ type: "form_submit", │
│ data: { email: "user@example.com", password: "***" } │
│ } │
│ │
│ Agent: "Great! I'll process your registration and show a success alert" │
│ │
│ 📞 Tool Call: render_alert({ │
│ title: "Registration Complete!", │
│ variant: "success" │
│ }) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘概要
UIツールを使うと、エージェントは次の操作を実行できます。
- テキストエリアに対応した動的フォームでユーザー入力を収集する
- カード、アラート、通知で情報を表示する
- テーブルや対話型チャート（Recharts）でデータを提示する
- 進捗や読み込み状態（スピナー、スケルトン）を表示する
- 複数のコンポーネントを使ったダッシュボードを構成する
- モーダルでユーザーの確認を求める
- 状態更新をトースト通知で表示する
クイックスタート
Cargo.tomlに追加します。
[dependencies]
adk-ui = { git = "https://github.com/zavora-ai/adk-ui" }
adk-agent = "2.0.0"
adk-model = "2.0.0"基本的な使い方
use adk_rust::prelude::*;
use adk_ui::UiToolset;
use std::sync::Arc;
#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
let model = Arc::new(GeminiModel::from_env("gemini-2.5-flash")?);
// Get all 10 UI tools
let ui_tools = UiToolset::all_tools();
// Create AI agent with UI tools
let mut builder = LlmAgentBuilder::new("ui_agent")
.model(model)
.instruction(r#"
You are a helpful assistant that uses UI components to interact with users.
Use render_form for collecting information.
Use render_card for displaying results.
Use render_alert for notifications.
Use render_modal for confirmation dialogs.
Use render_toast for brief status messages.
"#);
for tool in ui_tools {
builder = builder.tool(tool);
}
let agent = builder.build()?;
Ok(())
}A2UI JSONL (render_screen / render_page / render_kit)
これらのツールは、A2UIレンダラーとの互換性を保つためにA2UI v0.9 JSONLを出力します。
render_screen (single surface)
{
"surface_id": "main",
"components": [
{ "id": "root", "component": "Column", "children": ["title", "cta"] },
{ "id": "title", "component": "Text", "text": "Welcome", "variant": "h1" },
{ "id": "cta_label", "component": "Text", "text": "Continue", "variant": "body" },
{ "id": "cta", "component": "Button", "child": "cta_label", "action": { "event": { "name": "continue" } } }
]
}render_page (multi-section page)
{
"title": "Release Notes",
"description": "Highlights for the latest launch.",
"sections": [
{
"heading": "What’s new",
"body": "Three big improvements shipped this week.",
"bullets": ["Faster onboarding", "Better search", "New dashboards"],
"actions": [{ "label": "View details", "action": "view_details", "variant": "borderless" }]
}
]
}render_kit (catalog + tokens + templates)
{
"name": "Fintech Pro",
"version": "0.1.0",
"brand": { "vibe": "trustworthy", "industry": "fintech" },
"colors": { "primary": "#2F6BFF" },
"typography": { "family": "Source Sans 3" },
"templates": ["auth_login", "dashboard"]
}React レンダラーを使用して A2UI JSONL を消費します:
import {
A2uiStore,
A2uiSurfaceRenderer,
applyParsedMessages,
parseJsonl,
} from "@zavora-ai/adk-ui-react";
const store = new A2uiStore();
const parsed = parseJsonl(jsonl);
applyParsedMessages(store, parsed);
export function App() {
return <A2uiSurfaceRenderer store={store} surfaceId="main" />;
}利用可能なツール
render_form
ユーザー入力を収集するためのインタラクティブなフォームをレンダリングします。
{
"title": "Registration Form",
"description": "Create your account",
"fields": [
{"name": "username", "label": "Username", "type": "text", "required": true},
{"name": "email", "label": "Email", "type": "email", "required": true},
{"name": "password", "label": "Password", "type": "password", "required": true},
{"name": "newsletter", "label": "Subscribe to newsletter", "type": "switch"}
],
"submit_label": "Register"
}レンダリング結果:
┌─────────────────────────────────────────────────┐
│ 📋 Registration Form │
│ Create your account │
│ ───────────────────────────────────────────── │
│ │
│ Username * │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Email * │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Password * │
│ ┌─────────────────────────────────────────┐ │
│ │ •••••••• │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Subscribe to newsletter [○] │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Register │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘フィールドタイプ: text, email, password, number, date, select, multiselect, switch, slider, textarea
render_card
オプションのアクションボタン付きの情報カードを表示します。
{
"title": "Order Confirmed",
"description": "Order #12345",
"content": "Your order has been placed successfully. Expected delivery: Dec 15, 2025.",
"actions": [
{"label": "Track Order", "action_id": "track", "variant": "primary"},
{"label": "Cancel", "action_id": "cancel", "variant": "danger"}
]
}ボタンのバリアント: primary, secondary, danger, ghost, outline
render_alert
通知とステータスメッセージを表示します。
{
"title": "Payment Successful",
"description": "Your payment of $99.00 has been processed.",
"variant": "success"
}バリアント: info, success, warning, error
render_confirm
アクションの前にユーザーの確認を要求します。
{
"title": "Delete Account",
"message": "Are you sure you want to delete your account? This action cannot be undone.",
"confirm_label": "Delete",
"cancel_label": "Keep Account",
"variant": "danger"
}render_table
表形式のデータを表示します。
{
"title": "Recent Orders",
"columns": [
{"header": "Order ID", "accessor_key": "id"},
{"header": "Date", "accessor_key": "date"},
{"header": "Amount", "accessor_key": "amount"},
{"header": "Status", "accessor_key": "status"}
],
"data": [
{"id": "#12345", "date": "2025-12-10", "amount": "$99.00", "status": "Delivered"},
{"id": "#12346", "date": "2025-12-11", "amount": "$149.00", "status": "Shipped"}
]
}render_chart
データビジュアライゼーションを作成します。
{
"title": "Monthly Sales",
"chart_type": "bar",
"x_key": "month",
"y_keys": ["revenue", "profit"],
"data": [
{"month": "Jan", "revenue": 4000, "profit": 2400},
{"month": "Feb", "revenue": 3000, "profit": 1398},
{"month": "Mar", "revenue": 5000, "profit": 3800}
]
}チャートの種類: bar, line, area, pie
render_progress
オプションのステップでタスクの進行状況を表示します。
{
"title": "Installing Dependencies",
"value": 65,
"description": "Installing package 13 of 20...",
"steps": [
{"label": "Download", "completed": true},
{"label": "Extract", "completed": true},
{"label": "Install", "current": true},
{"label": "Configure", "completed": false}
]
}render_layout
複数のセクションを持つダッシュボードレイアウトを作成します。
{
"title": "System Status",
"description": "Current system health overview",
"sections": [
{
"title": "Services",
"type": "stats",
"stats": [
{"label": "API Server", "value": "Healthy", "status": "operational"},
{"label": "Database", "value": "Degraded", "status": "warning"},
{"label": "Cache", "value": "Down", "status": "error"}
]
},
{
"title": "Recent Errors",
"type": "table",
"columns": [{"header": "Time", "key": "time"}, {"header": "Error", "key": "error"}],
"rows": [{"time": "10:30", "error": "Connection timeout"}]
}
]
}セクションの種類: stats, table, chart, alert, text
render_modal
確認や集中的な操作のためにモーダルダイアログを表示します。
{
"title": "Confirm Deletion",
"message": "Are you sure you want to delete this item? This action cannot be undone.",
"size": "medium",
"closable": true,
"confirm_label": "Delete",
"cancel_label": "Cancel",
"confirm_action": "delete_confirmed"
}サイズ: small, medium, large, full
render_toast
ステータス更新のために短いトースト通知を表示します。
{
"message": "Settings saved successfully",
"variant": "success",
"duration": 5000,
"dismissible": true
}バリアント: info, success, warning, error
フィルタリングされたツール
エージェントが必要とするツールのみを選択してください。
let toolset = UiToolset::new()
.without_chart() // Disable charts
.without_table() // Disable tables
.without_progress() // Disable progress
.without_modal() // Disable modals
.without_toast(); // Disable toasts
// Or use forms only
let forms_only = UiToolset::forms_only();UIイベントの処理
ユーザーがレンダリングされたUI（フォームの送信、ボタンのクリックなど）と対話すると、イベントはエージェントに送り返されます。
use adk_ui::{UiEvent, UiEventType};
// UiEvent structure
pub struct UiEvent {
pub event_type: UiEventType, // FormSubmit, ButtonClick, InputChange
pub action_id: Option<String>,
pub data: Option<HashMap<String, Value>>,
}
// Convert to message for agent
let message = ui_event.to_message();UI更新のストリーミング
リアルタイムのUI更新には、UiUpdateを使用してIDでコンポーネントをパッチします。
use adk_ui::{UiUpdate, UiOperation};
let update = UiUpdate {
target_id: "progress-bar".to_string(),
operation: UiOperation::Patch,
payload: Some(Component::Progress(Progress {
id: Some("progress-bar".to_string()),
value: 75,
label: Some("75%".to_string()),
})),
};操作: Replace, Patch, Append, Remove
コンポーネントスキーマ
全ての28種類のコンポーネントタイプは、ストリーミング更新のためにオプションのidフィールドをサポートしています。
アトム: Text, Button, Icon, Image, Badge 入力: TextInput, NumberInput, Select, MultiSelect, Switch, DateInput, Slider, Textarea レイアウト: Stack, Grid, Card, Container, Divider, Tabs データ: Table, List, KeyValue, CodeBlock 視覚化: Chart (bar, line, area, pie via Recharts) フィードバック: Alert, Progress, Toast, Modal, Spinner, Skeleton
Reactクライアント
参照用のReact実装は、スタンドアロンのadk-uiリポジトリに提供されています。
npm install @zavora-ai/adk-ui-reactReactクライアントには以下が含まれます:
- TypeScript Rustスキーマに一致する型
- 全28種類のコンポーネントレンダラー
- インタラクティブなチャートのためのRecharts統合
- Markdownレンダリングサポート
- ダークモードサポート
- フォーム送信処理
- Modalおよびトーストコンポーネント
アーキテクチャ
Agent ──[render_* tool]──> UiResponse (JSON)
│
│ SSE
▼
Client (React)
│
└──> UiEvent (user action) ──> Agentプロトコル相互運用
すべての13のレンダーツールは、protocol引数を介してプロトコルを認識した出力をサポートしています:
| プロトコル | 説明 |
|---|---|
a2ui | A2UI v0.9 に準拠した JSONL 形式 (render_screen、render_page のデフォルト) |
ag_ui | ハイブリッド AG-UI サポート: デフォルトで互換性ラッパー、に加え adk-server クライアント向けの追加のプロトコルネイティブなランタイム転送 |
mcp_apps | MCP Apps ペイロードと ui:// resources、追加のブリッジヘルパー、通知フロー、ランタイムリクエストフィールド、および HTML/resource アダプターとの互換性 |
protocolが省略された場合、ツールはデフォルトの出力形式（ほとんどのツールではレガシーなUiResponse JSON、render_screen/render_page/render_kitではA2UI）を使用します。
プロトコル選択の例：
{
"protocol": "mcp_apps",
"mcp_apps": {
"resource_uri": "ui://demo/surface"
}
}相互運用アダプター
adk-uiはプロトコル変換のためのアダプタープリミティブを含んでいます：
A2uiAdapter— 標準サーフェスをA2UI JSONLに変換しますAgUiAdapter— AG-UIイベントペイロードに変換しますMcpAppsAdapter— MCP Appsリソースペイロードに変換します
これらは、すべてのツールで一貫した変換のために、共有のUiProtocolAdapter traitを実装しています。
非推奨のタイムライン
レガシーなadk_ui runtime profileは非推奨のメタデータを含んでいます：
| 日付 | マイルストーン |
|---|---|
| 2026-02-07 | 非推奨化を発表 |
| 2026-12-31 | サービス終了目標 |
代替プロファイル：a2ui、ag_ui、mcp_apps
このメタデータはUI_PROTOCOL_CAPABILITIES定数で公開され、adk-serverの/api/ui/capabilitiesから取得できます。
機能レスポンスはimplementationTier、specTrack、summary、limitationsも返します。クライアントは、ハイブリッドまたは互換性重視のサブセットと、完全なプロトコルネイティブ対応を区別できます。
adk-serverがホスト側の境界になる場合は、MCP Appsブリッジ用の追加エンドポイントとして/api/ui/initialize、/api/ui/message、/api/ui/update-model-context、/api/ui/notifications/poll、/api/ui/notifications/resources-list-changed、/api/ui/notifications/tools-list-changedも公開します。これらは既存のADKランタイム契約を維持し、直接のリクエストボディと、ui/...メソッドを持つJSON-RPC形式のエンベロープの両方を受け付けます。
ランタイムコンシューマー向けに、adk-server もサポートします:
- AG-UIネイティブの SSE シリアライゼーションのための
x-adk-ui-transport: protocol_nativeまたはuiTransport: "protocol_native" - 既存の
newMessageに加えて、input/agUiInputを介したAG-UIデュアルパスリクエスト入力 /api/run_sse内の MCP Appsブリッジエンベロープを、mcpAppsInitialize、mcpAppsRequest、およびmcpAppsInitializedを介して
これらの追加機能はオプトインです。既存の /api/run および /api/run_sse コンシューマーは、ネイティブのAG-UIトランスポートモードを明示的に要求しない限り、汎用的な ADK ラッパーを引き続き受け取ります。
フレームワークが所有する MCP Appsツール応答の場合、adk-server::ui_types は現在、以下を公開しています:
- 型付きホスト/アプリブリッジ状態用
McpUiBridgeSnapshot - 追加応答エンベロープ用
McpUiToolResult - ブリッジメタデータ用
McpUiToolResultBridge(protocolVersion,structuredContent,hostInfo,hostCapabilities,hostContext,appInfo,appCapabilities,initialized)
bridge/session state を tool response に昇格させる場合、McpUiBridgeSnapshot::build_tool_result(...) を推奨します。これにより、互換性重視のホスト向けに resourceUri およびインライン html フォールバックを維持しながら、tool-result の形状が標準化されます。
組み込みまたはブラウザホストのマッピングの場合、追加の HTTP bridge は、以下の host/app フローに対応します。
ui/initialize->/api/ui/initializeui/message->/api/ui/messageui/update-model-context->/api/ui/update-model-contextnotifications/resources/list_changed->/api/ui/notifications/resources-list-changednotifications/tools/list_changed->/api/ui/notifications/tools-list-changed- キューに入れられたホスト通知 ->
/api/ui/notifications/poll
直接の /api/ui/* bridge エンドポイントは、MCP Apps ホストにとって推奨されるライフサイクルパスです。ランタイム側の MCP Apps リクエストフィールドは、混合またはレガシーなクライアント向けの追加の互換性パスとして引き続き利用可能です。
例
スタンドアロンの adk-ui リポジトリには、実行可能な UI の例が含まれています。
| 例 | 説明 | 実行コマンド |
|---|---|---|
ui_agent | コンソールデモ | cargo run --bin ui_agent |
ui_server | HTTPサーバーとSSE | cargo run --bin ui_server |
ui_react_client | React フロントエンド | cd ui_react_client && npm run dev |
これらの例をadk-uiリポジトリから実行してください。これにより、RustとReactのパッケージが同じリリースラインに保たれます。
サンプルプロンプト
これらのプロンプトでUIツールをテストしてください:
# Forms
"I want to register for an account"
"Create a contact form"
"Create a feedback form with a comments textarea"
# Cards
"Show me my profile"
"Display a product card for a laptop"
# Alerts
"Show a success message"
"Display a warning about expiring session"
# Modals
"I want to delete my account" (shows confirmation modal)
"Show a confirmation dialog before submitting"
# Toasts
"Show a success toast notification"
"Display an error toast"
# Tables
"Show my recent orders"
"List all users"
# Charts
"Show monthly sales chart"
"Display traffic trends as a line chart"
"Show revenue breakdown as a pie chart"
# Progress & Loading
"Show upload progress at 75%"
"Display a loading spinner"
"Show skeleton loading state"
# Dashboards
"Show system status dashboard"前へ: ← Browser Tools | 次へ: MCP Tools →