@zavora-ai/adk-ui-react

@zavora-ai/adk-ui-react is the official React renderer for ADK-Rust - the high-performance Agent Development Kit for building AI agents in Rust.

Enable your AI agents to render rich, interactive user interfaces instead of plain text responses. Forms, tables, charts, modals, and more - all controlled by your agent.

✨ Features

• 🎨 28 Component Types - Text, buttons, forms, tables, charts, modals, toasts, and more
• 🌙 Dark Mode - Built-in dark theme support
• 📤 Bidirectional Events - Forms and buttons emit events back to your agent
• 📦 TypeScript First - Full type definitions included
• ⚡ Lightweight - Only 14KB gzipped

📦 Installation

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

🚀 Quick Start

import { Renderer } from '@zavora-ai/adk-ui-react';
import type { UiResponse, UiEvent } from '@zavora-ai/adk-ui-react';

function AgentUI({ response }: { response: UiResponse }) {
  const handleAction = (event: UiEvent) => {
    // Send event back to your agent/server
    console.log('User action:', event);
  };

  return (
    <div>
      {response.components.map((component, i) => (
        <Renderer 
          key={i} 
          component={component} 
          onAction={handleAction}
          theme={response.theme}  // 'light' | 'dark' | 'system'
        />
      ))}
    </div>
  );
}

🧩 Available Components

| Category | Components | |----------|------------| | Atoms | Text, Button, Icon, Image, Badge | | Inputs | TextInput, NumberInput, Select, MultiSelect, Switch, DateInput, Slider, Textarea | | Layouts | Stack, Grid, Card, Container, Divider, Tabs | | Data Display | Table (sortable, paginated), List, KeyValue, CodeBlock | | Visualization | Chart (bar, line, area, pie) | | Feedback | Alert, Progress, Toast, Modal, Spinner, Skeleton |

🔗 Integration with ADK-Rust

This package is designed to work with ADK-Rust, the Agent Development Kit for building AI agents in Rust.

use adk_ui::UiToolset;

// Add UI rendering tools to your agent
let agent = LlmAgentBuilder::new("assistant")
    .tools(UiToolset::all_tools())
    .build()?;

Your agent can then call render_form, render_table, render_chart, and other tools to generate UI that this package renders.

📚 Learn More

• 🌐 Website: adk-rust.com
• 📖 Documentation: adk-rust.com/docs
• 💻 GitHub: github.com/zavora-ai/adk-rust
• 📦 Rust Crate: crates.io/crates/adk-ui

📋 Requirements

• React 17.0.0 or higher
• react-dom 17.0.0 or higher

📄 License

Apache-2.0 - See LICENSE for details.