Outils UI
Le crate adk-ui permet aux agents IA de générer dynamiquement des interfaces utilisateur riches via des appels de Tool. Les agents peuvent afficher des formulaires, des cartes, des alertes, des tableaux, des graphiques et bien plus encore, le tout grâce à une API Rust sûre en termes de types qui se sérialise en JSON pour la consommation frontend.
Ce que vous allez construire
Concepts Clés :
- Formulaires - Recueillir les entrées utilisateur avec différents types de champs
- Cartes - Afficher des informations avec des boutons d'action
- Tableaux - Présenter des données structurées en lignes/colonnes
- Graphiques - Visualiser des données avec des diagrammes à barres, linéaires, en aires, circulaires
- Alertes - Afficher des notifications et des messages d'état
- Modales - Dialogues de confirmation et interactions ciblées
- Toasts - Notifications d'état brèves
Exemple : Tableau de bord analytique
Exemple : Formulaire d'inscription
Fonctionnement
┌─────────────────────────────────────────────────────────────────────────────┐
│ 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" │
│ }) │
│ │
└─────────────────────────────────────────────────────────────────────────────┘Aperçu
Les outils d'interface utilisateur permettent aux agents de :
- Recueillir les entrées utilisateur via des formulaires dynamiques avec prise en charge de la zone de texte
- Afficher des informations avec des cartes, des alertes et des notifications
- Présenter des données dans des tableaux et des graphiques interactifs (Recharts)
- Afficher la progression et les états de chargement (spinner, squelette)
- Créer des mises en page de tableau de bord avec plusieurs composants
- Demander une confirmation à l'utilisateur via des modales
- Afficher des notifications toast pour les mises à jour de statut
Démarrage Rapide
Ajoutez à votre Cargo.toml :
[dependencies]
adk-rust = { version = "0.2.0", features = ["ui"] }
# Or use individual crates:
adk-ui = "0.2.0"
adk-agent = "0.2.0"
adk-model = "0.2.0"Utilisation Basique
use adk_rust::prelude::*;
use adk_rust::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.0-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#"
Vous êtes un assistant utile qui utilise des composants d'interface utilisateur pour interagir avec les utilisateurs.
Utilisez render_form pour recueillir des informations.
Utilisez render_card pour afficher les résultats.
Utilisez render_alert pour les notifications.
Utilisez render_modal pour les boîtes de dialogue de confirmation.
Utilisez render_toast pour les messages de statut brefs.
"#);
for tool in ui_tools {
builder = builder.tool(tool);
}
let agent = builder.build()?;
Ok(())
}Outils Disponibles
render_form
Permet d'afficher des formulaires interactifs pour recueillir les informations de l'utilisateur.
{
"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"
}Rendu :
┌─────────────────────────────────────────────────┐
│ 📋 Registration Form │
│ Create your account │
│ ───────────────────────────────────────────── │
│ │
│ Username * │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Email * │
│ ┌─────────────────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Password * │
│ ┌─────────────────────────────────────────┐ │
│ │ •••••••• │ │
│ └─────────────────────────────────────────┘ │
│ │
│ Subscribe to newsletter [○] │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ Register │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘Types de champs : text, email, password, number, date, select, multiselect, switch, slider, textarea
render_card
Affiche des cartes d'information avec des boutons d'action optionnels.
{
"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"}
]
}Variantes de bouton : primary, secondary, danger, ghost, outline
render_alert
Affiche les notifications et les messages d'état.
{
"title": "Payment Successful",
"description": "Your payment of $99.00 has been processed.",
"variant": "success"
}Variantes : info, success, warning, error
render_confirm
Demande la confirmation de l'utilisateur avant d'effectuer des actions.
{
"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
Affiche des données sous forme de tableau.
{
"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
Crée des visualisations de données.
{
"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}
]
}Types de graphique : bar, line, area, pie
render_progress
Affiche la progression d'une tâche avec des étapes optionnelles.
{
"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
Crée des mises en page de tableau de bord avec plusieurs sections.
{
"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"}]
}
]
}Types de section : stats, table, chart, alert, text
render_modal
Affiche des boîtes de dialogue modales pour les confirmations ou les interactions ciblées.
{
"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"
}Tailles : small, medium, large, full
render_toast
Affiche de brèves notifications toast pour les mises à jour de statut.
{
"message": "Settings saved successfully",
"variant": "success",
"duration": 5000,
"dismissible": true
}Variantes : info, success, warning, error
Outils Filtrés
Sélectionnez uniquement les outils dont votre Agent a besoin :
let toolset = UiToolset::new()
.without_chart() // Désactiver les graphiques
.without_table() // Désactiver les tableaux
.without_progress() // Désactiver la progression
.without_modal() // Désactiver les modales
.without_toast(); // Désactiver les toasts
// Ou utiliser uniquement les formulaires
let forms_only = UiToolset::forms_only();Gestion des Événements UI
Lorsque les utilisateurs interagissent avec l'UI rendue (soumission de formulaires, clics sur des boutons), des événements sont renvoyés à l'Agent :
use adk_ui::{UiEvent, UiEventType};
// Structure de UiEvent
pub struct UiEvent {
pub event_type: UiEventType, // FormSubmit, ButtonClick, InputChange
pub action_id: Option<String>,
pub data: Option<HashMap<String, Value>>,
}
// Convertir en message pour l'Agent
let message = ui_event.to_message();Mises à Jour UI en Streaming
Pour les mises à jour UI en temps réel, utilisez UiUpdate pour patcher les composants par leur 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()),
})),
};Opérations : Replace, Patch, Append, Remove
Schéma des Composants
Les 28 types de composants prennent en charge les champs id optionnels pour les mises à jour en streaming :
Atomes : Text, Button, Icon, Image, Badge Entrées : TextInput, NumberInput, Select, MultiSelect, Switch, DateInput, Slider, Textarea Mises en page : Stack, Grid, Card, Container, Divider, Tabs Données : Table, List, KeyValue, CodeBlock Visualisation : Chart (barre, ligne, aire, secteur via Recharts) Retour d'information : Alert, Progress, Toast, Modal, Spinner, Skeleton
Client React
Une implémentation de référence React est fournie :
cd official_docs_examples/tools/ui_test
# Démarrer le serveur UI
cargo run --bin ui_server
# Dans un autre terminal, démarrer le client React
cd ui_react_client
npm install && npm run dev -- --hostLe client React inclut :
- Des types TypeScript correspondant au schéma Rust
- Un moteur de rendu de composants pour les 28 types
- Intégration de Recharts pour les graphiques interactifs
- Prise en charge du rendu Markdown
- Prise en charge du mode sombre
- Gestion de la soumission de formulaires
- Composants Modal et Toast
Architecture
┌─────────────┐ ┌─────────────┐
│ Agent │ ──[render_* tool]──│ UiResponse │
│ (LLM) │ │ (JSON) │
└─────────────┘ └──────┬──────┘
▲ │
│ │ SSE
│ ▼
│ ┌─────────────┐
└────── UiEvent ◄───────────│ Client │
(action utilisateur) │ (React) │
└─────────────┘Exemples
Trois exemples illustrent les outils UI :
| Exemple | Description | Commande d'exécution |
|---|---|---|
ui_agent | Démo console | cargo run --bin ui_agent |
ui_server | Serveur HTTP avec SSE | cargo run --bin ui_server |
ui_react_client | Frontend React | cd ui_react_client && npm run dev |
À exécuter depuis official_docs_examples/tools/ui_test/.
Exemples d'invites
Testez les outils d'interface utilisateur avec ces invites :
# 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"Précédent: ← Browser Tools | Suivant: MCP Tools →