UI टूल्स

adk-ui क्रेट AI एजेंट्स को टूल कॉल्स के माध्यम से समृद्ध यूज़र इंटरफ़ेस गतिशील रूप से जनरेट करने में सक्षम बनाता है। एजेंट फ़ॉर्म, कार्ड, अलर्ट, टेबल, चार्ट और अन्य चीज़ें रेंडर कर सकते हैं — यह सब एक प्रकार-सुरक्षित Rust API के माध्यम से, जो फ्रंटएंड उपयोग के लिए JSON में सीरियलाइज़ होता है।

आप क्या बनाएँगे

मुख्य अवधारणाएँ:

• फ़ॉर्म - विभिन्न फ़ील्ड प्रकारों के साथ उपयोगकर्ता इनपुट एकत्र करें
• कार्ड - एक्शन बटन के साथ जानकारी प्रदर्शित करें
• टेबल - पंक्तियों/कॉलम में संरचित डेटा प्रस्तुत करें
• चार्ट - बार, लाइन, एरिया और पाई चार्ट के साथ डेटा का दृश्यांकन करें
• अलर्ट - सूचनाएँ और स्थिति संदेश दिखाएँ
• मॉडल - पुष्टिकरण डायलॉग और केंद्रित इंटरैक्शन
• टोस्ट - संक्षिप्त स्थिति सूचनाएँ
• प्रोटोकॉल इंटरऑप - UI को A2UI, AG-UI या MCP Apps पेलोड के रूप में उत्सर्जित करें

उदाहरण: एनालिटिक्स डैशबोर्ड

उदाहरण: पंजीकरण फ़ॉर्म

---

यह कैसे काम करता है

┌─────────────────────────────────────────────────────────────────────────────┐
│ 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.1.0"
adk-model = "2.1.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-3.7-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 v0.9 JSONL उत्सर्जित करते हैं, ताकि A2UI रेंडरर्स के साथ संगतता बनी रहे।

render_screen (एकल सतह)

{
  "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 (बहु-अनुभाग पृष्ठ)

{
  "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 (कैटलॉग + टोकन + टेम्पलेट)

{
  "name": "Fintech Pro",
  "version": "0.1.0",
  "brand": { "vibe": "trustworthy", "industry": "fintech" },
  "colors": { "primary": "#2F6BFF" },
  "typography": { "family": "Source Sans 3" },
  "templates": ["auth_login", "dashboard"]
}

A2UI JSONL का उपयोग करने के लिए React renderer का उपयोग करें:

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

फ़िल्टर किए गए टूल

केवल वे टूल चुनें जिनकी आपके agent को आवश्यकता है:

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 के साथ इंटरैक्ट करते हैं (फ़ॉर्म सबमिट करते हैं, बटन क्लिक करते हैं), तो इवेंट agent को वापस भेजे जाते हैं:

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 अपडेट के लिए, 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 (Recharts के माध्यम से bar, line, area, pie)
फ़ीडबैक: Alert, Progress, Toast, Modal, Spinner, Skeleton

React क्लाइंट

एक संदर्भ React कार्यान्वयन स्वतंत्र adk-ui रिपॉज़िटरी में उपलब्ध है:

npm install @zavora-ai/adk-ui-react

React क्लाइंट में शामिल हैं:

• Rust स्कीमा से मेल खाते TypeScript प्रकार
• सभी 28 प्रकारों के लिए कंपोनेंट रेंडरर
• इंटरैक्टिव चार्ट्स के लिए Recharts एकीकरण
• Markdown रेंडरिंग समर्थन
• डार्क मोड समर्थन
• फ़ॉर्म सबमिशन हैंडलिंग
• Modal और toast कंपोनेंट्स

आर्किटेक्चर

Agent ──[render_* tool]──> UiResponse (JSON)
                              │
                              │ SSE
                              ▼
                         Client (React)
                              │
                              └──> UiEvent (user action) ──> Agent

प्रोटोकॉल इंटरऑप

सभी 13 रेंडर टूल्स protocol आर्ग्युमेंट के माध्यम से प्रोटोकॉल-जागरूक आउटपुट का समर्थन करते हैं:

जब protocol छोड़ा जाता है, तो टूल अपने डिफ़ॉल्ट आउटपुट प्रारूप का उपयोग करते हैं (अधिकांश टूल के लिए legacy UiResponse JSON, और render_screen/render_page/render_kit के लिए A2UI)।

प्रोटोकॉल चयन का उदाहरण:

{
  "protocol": "mcp_apps",
  "mcp_apps": {
    "resource_uri": "ui://demo/surface"
  }
}

इंटरऑप एडेप्टर

adk-ui प्रोटोकॉल रूपांतरण के लिए एडेप्टर प्रिमिटिव प्रदान करता है:

• A2uiAdapter — canonical surfaces को A2UI JSONL में परिवर्तित करता है
• AgUiAdapter — AG-UI event payloads में परिवर्तित करता है
• McpAppsAdapter — MCP Apps resource payloads में परिवर्तित करता है

ये सभी टूल में सुसंगत रूपांतरण के लिए एक साझा UiProtocolAdapter trait लागू करते हैं।

बहिष्करण की समय-सीमा

legacy adk_ui runtime profile में बहिष्करण संबंधी मेटाडेटा शामिल होता है:

प्रतिस्थापन: a2ui, ag_ui, mcp_apps

यह मेटाडेटा UI_PROTOCOL_CAPABILITIES constants के माध्यम से प्रकट होता है और /api/ui/capabilities पर adk-server द्वारा उपलब्ध कराया जाता है।
capability response implementationTier, specTrack, summary और limitations की भी रिपोर्ट करता है, ताकि clients hybrid या compatibility subsets को पूरी तरह native protocol support से अलग पहचान सकें।

जब adk-server host-facing boundary होता है, तो यह /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 पर additive MCP Apps bridge helpers भी उपलब्ध कराता है। ये endpoints मौजूदा ADK runtime contracts को बनाए रखते हैं और direct request bodies या ui/... methods वाले JSON-RPC-जैसे envelopes में से किसी एक को स्वीकार करते हैं।

runtime consumers के लिए, adk-server निम्नलिखित का भी समर्थन करता है:

• AG-UI-native SSE serialization के लिए x-adk-ui-transport: protocol_native या uiTransport: "protocol_native"
• मौजूदा newMessage के साथ input / agUiInput के माध्यम से AG-UI dual-path request inputs
• mcpAppsInitialize, mcpAppsRequest और mcpAppsInitialized के माध्यम से /api/run_sse के भीतर MCP Apps bridge envelopes

ये additions opt-in हैं। मौजूदा /api/run और /api/run_sse consumers को generic ADK wrapper मिलता रहेगा, जब तक कि वे native AG-UI transport mode का स्पष्ट रूप से अनुरोध न करें।

framework-owned MCP Apps tool responses के लिए, adk-server::ui_types अब निम्नलिखित उपलब्ध कराता है:

• typed host/app bridge state के लिए McpUiBridgeSnapshot
• additive response envelope के लिए McpUiToolResult
• bridge metadata (protocolVersion, structuredContent, hostInfo, hostCapabilities, hostContext, appInfo, appCapabilities, initialized) के लिए McpUiToolResultBridge

bridge/session state को tool response में promote करते समय McpUiBridgeSnapshot::build_tool_result(...) को प्राथमिकता दें। यह tool-result shape को standardize करता है, जबकि compatibility-oriented hosts के लिए resourceUri और inline html fallbacks को बनाए रखता है।

एम्बेडेड या ब्राउज़र-होस्ट मैपिंग के लिए, अतिरिक्त HTTP ब्रिज होस्ट/ऐप प्रवाहों से इस प्रकार संबंधित है:

• ui/initialize -> /api/ui/initialize
• ui/message -> /api/ui/message
• ui/update-model-context -> /api/ui/update-model-context
• notifications/resources/list_changed -> /api/ui/notifications/resources-list-changed
• notifications/tools/list_changed -> /api/ui/notifications/tools-list-changed
• कतारबद्ध होस्ट सूचनाएँ -> /api/ui/notifications/poll

प्रत्यक्ष /api/ui/* ब्रिज एंडपॉइंट, MCP Apps होस्ट के लिए पसंदीदा लाइफ़साइकल पथ हैं। रनटाइम-साइड MCP Apps अनुरोध फ़ील्ड, मिश्रित या लेगेसी क्लाइंट के लिए अतिरिक्त संगतता पथ के रूप में उपलब्ध रहते हैं।

उदाहरण

स्वतंत्र adk-ui रिपॉज़िटरी में चलाए जा सकने वाले UI उदाहरण शामिल हैं:

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"

---

पिछला: ← ब्राउज़र टूल्स | अगला: MCP टूल्स →