UI उपकरण
adk-ui क्रेट AI एजेंटों को टूल कॉल के माध्यम से गतिशील रूप से समृद्ध उपयोगकर्ता इंटरफ़ेस उत्पन्न करने में सक्षम बनाता है। एजेंट फ़ॉर्म, कार्ड, अलर्ट, टेबल, चार्ट, और बहुत कुछ रेंडर कर सकते हैं - यह सब एक टाइप-सेफ Rust API के माध्यम से होता है जो फ्रंटएंड खपत के लिए JSON में सीरियलाइज़ होता है।
आप क्या बनाएंगे
मुख्य अवधारणाएँ:
- फ़ॉर्म - विभिन्न फ़ील्ड प्रकारों के साथ उपयोगकर्ता इनपुट एकत्र करें
- कार्ड - एक्शन बटन के साथ जानकारी प्रदर्शित करें
- टेबल - पंक्तियों/स्तंभों में संरचित डेटा प्रस्तुत करें
- चार्ट - बार, लाइन, एरिया, पाई चार्ट के साथ डेटा विज़ुअलाइज़ करें
- अलर्ट - सूचनाएं और स्थिति संदेश दिखाएं
- मोडल - पुष्टिकरण डायलॉग और केंद्रित इंटरैक्शन
- टोस्ट - संक्षिप्त स्थिति सूचनाएं
उदाहरण: एनालिटिक्स डैशबोर्ड
उदाहरण: पंजीकरण फ़ॉर्म
यह कैसे काम करता है
┌─────────────────────────────────────────────────────────────────────────────┐
│ 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) में डेटा प्रस्तुत करें
- प्रगति और लोडिंग स्थिति (spinner, skeleton) दिखाएं
- कई घटकों के साथ डैशबोर्ड लेआउट बनाएं
- modals के माध्यम से उपयोगकर्ता की पुष्टि का अनुरोध करें
- स्थिति अपडेट के लिए toast notifications प्रदर्शित करें
त्वरित शुरुआत
अपने 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"बुनियादी उपयोग
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")?);
// सभी 10 UI टूल प्राप्त करें
let ui_tools = UiToolset::all_tools();
// UI टूल के साथ AI एजेंट बनाएं
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(())
}उपलब्ध उपकरण
render_form
उपयोगकर्ता इनपुट एकत्र करने के लिए इंटरैक्टिव फॉर्म प्रस्तुत करें।
{
"title": "पंजीकरण फ़ॉर्म",
"description": "अपना खाता बनाएं",
"fields": [
{"name": "username", "label": "उपयोगकर्ता नाम", "type": "text", "required": true},
{"name": "email", "label": "ईमेल", "type": "email", "required": true},
{"name": "password", "label": "पासवर्ड", "type": "password", "required": true},
{"name": "newsletter", "label": "न्यूज़लेटर की सदस्यता लें", "type": "switch"}
],
"submit_label": "पंजीकरण करें"
}ऐसे प्रस्तुत होता है:
┌─────────────────────────────────────────────────┐
│ 📋 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": "ऑर्डर की पुष्टि हो गई",
"description": "ऑर्डर #12345",
"content": "आपका ऑर्डर सफलतापूर्वक दिया गया है। अनुमानित डिलीवरी: 15 दिसंबर, 2025।",
"actions": [
{"label": "ऑर्डर ट्रैक करें", "action_id": "track", "variant": "primary"},
{"label": "रद्द करें", "action_id": "cancel", "variant": "danger"}
]
}बटन प्रकार: primary, secondary, danger, ghost, outline
render_alert
सूचनाएं और स्थिति संदेश दिखाएं।
{
"title": "भुगतान सफल रहा",
"description": "आपका $99.00 का भुगतान संसाधित कर दिया गया है।",
"variant": "success"
}प्रकार: info, success, warning, error
render_confirm
कार्रवाई से पहले उपयोगकर्ता की पुष्टि का अनुरोध करें।
{
"title": "खाता हटाएँ",
"message": "क्या आप निश्चित हैं कि आप अपना खाता हटाना चाहते हैं? इस कार्रवाई को पूर्ववत नहीं किया जा सकता।",
"confirm_label": "हटाएँ",
"cancel_label": "खाता रखें",
"variant": "danger"
}render_table
सारणीबद्ध डेटा प्रदर्शित करें।
{
"title": "हाल के ऑर्डर",
"columns": [
{"header": "ऑर्डर ID", "accessor_key": "id"},
{"header": "दिनांक", "accessor_key": "date"},
{"header": "राशि", "accessor_key": "amount"},
{"header": "स्थिति", "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": "मासिक बिक्री",
"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": "निर्भरताएँ स्थापित कर रहा है",
"value": 65,
"description": "20 में से पैकेज 13 स्थापित कर रहा है...",
"steps": [
{"label": "डाउनलोड करें", "completed": true},
{"label": "निकालें", "completed": true},
{"label": "स्थापित करें", "current": true},
{"label": "कॉन्फ़िगर करें", "completed": false}
]
}render_layout
कई अनुभागों के साथ डैशबोर्ड लेआउट बनाएं।
{
"title": "सिस्टम स्थिति",
"description": "वर्तमान सिस्टम स्वास्थ्य अवलोकन",
"sections": [
{
"title": "सेवाएं",
"type": "stats",
"stats": [
{"label": "API Server", "value": "स्वस्थ", "status": "operational"},
{"label": "Database", "value": "खराब हो गया", "status": "warning"},
{"label": "Cache", "value": "बंद", "status": "error"}
]
},
{
"title": "हाल की त्रुटियाँ",
"type": "table",
"columns": [{"header": "समय", "key": "time"}, {"header": "त्रुटि", "key": "error"}],
"rows": [{"time": "10:30", "error": "कनेक्शन टाइमआउट"}]
}
]
}अनुभाग प्रकार: stats, table, chart, alert, text
render_modal
पुष्टि या केंद्रित इंटरैक्शन के लिए मोडल डायलॉग प्रदर्शित करें।
{
"title": "हटाने की पुष्टि करें",
"message": "क्या आप निश्चित हैं कि आप इस आइटम को हटाना चाहते हैं? इस कार्रवाई को पूर्ववत नहीं किया जा सकता।",
"size": "medium",
"closable": true,
"confirm_label": "हटाएँ",
"cancel_label": "रद्द करें",
"confirm_action": "delete_confirmed"
}आकार: small, medium, large, full
render_toast
स्थिति अपडेट के लिए संक्षिप्त टोस्ट सूचनाएं दिखाएं।
{
"message": "सेटिंग्स सफलतापूर्वक सहेजी गईं",
"variant": "success",
"duration": 5000,
"dismissible": true
}प्रकार: info, success, warning, error
फ़िल्टर किए गए टूल
केवल उन्हीं टूल का चयन करें जिनकी आपके Agent को आवश्यकता है:
let toolset = UiToolset::new()
.without_chart() // चार्ट अक्षम करें
.without_table() // टेबल अक्षम करें
.without_progress() // प्रगति अक्षम करें
.without_modal() // मॉडल अक्षम करें
.without_toast(); // टोस्ट अक्षम करें
// या केवल फ़ॉर्म का उपयोग करें
let forms_only = UiToolset::forms_only();UI इवेंट्स को संभालना
जब उपयोगकर्ता प्रस्तुत UI (फ़ॉर्म सबमिट करते हैं, बटन पर क्लिक करते हैं) के साथ इंटरैक्ट करते हैं, तो इवेंट्स एजेंट को वापस भेजे जाते हैं:
use adk_ui::{UiEvent, UiEventType};
// UiEvent संरचना
pub struct UiEvent {
pub event_type: UiEventType, // FormSubmit, ButtonClick, InputChange
pub action_id: Option<String>,
pub data: Option<HashMap<String, Value>>,
}
// एजेंट के लिए संदेश में बदलें
let message = ui_event.to_message();UI अपडेट्स को स्ट्रीम करना
रीयल-टाइम UI अपडेट्स के लिए, ID द्वारा कॉम्पोनेन्ट को पैच करने के लिए UiUpdate का उपयोग करें:
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 इम्प्लीमेंटेशन प्रदान किया गया है:
cd official_docs_examples/tools/ui_test
# UI सर्वर शुरू करें
cargo run --bin ui_server
# दूसरे टर्मिनल में, React क्लाइंट शुरू करें
cd ui_react_client
npm install && npm run dev -- --hostReact क्लाइंट में शामिल हैं:
- Rust स्कीमा से मेल खाते TypeScript प्रकार
- सभी 28 प्रकारों के लिए कॉम्पोनेन्ट रेंडरर
- इंटरैक्टिव चार्ट्स के लिए Recharts एकीकरण
- Markdown रेंडरिंग समर्थन
- डार्क मोड समर्थन
- फ़ॉर्म सबमिशन हैंडलिंग
- मॉडल और टोस्ट कॉम्पोनेन्ट
आर्किटेक्चर
┌─────────────┐ ┌─────────────┐
│ Agent │ ──[render_* tool]──│ UiResponse │
│ (LLM) │ │ (JSON) │
└─────────────┘ └──────┬──────┘
▲ │
│ │ SSE
│ ▼
│ ┌─────────────┐
└────── UiEvent ◄───────────│ Client │
(user action) │ (React) │
└─────────────┘उदाहरण
तीन उदाहरण UI टूल प्रदर्शित करते हैं:
| उदाहरण | विवरण | रन कमांड |
|---|---|---|
ui_agent | कंसोल डेमो | cargo run --bin ui_agent |
ui_server | SSE के साथ HTTP सर्वर | cargo run --bin ui_server |
ui_react_client | React फ्रंटएंड | cd ui_react_client && npm run dev |
इसे official_docs_examples/tools/ui_test/ से चलाएँ।
नमूना प्रॉम्प्ट
इन प्रॉम्प्ट का उपयोग करके 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"पिछला: ← ब्राउज़र उपकरण | अगला: MCP उपकरण →