Generative UI

Text is great, but sometimes you need a button. Or a chart. Or a map.

Generative UI allows our agents to render native React components inside the chat interface.

How It Works

1. Agent Logic: The agent decides it needs to show a stock chart.
2. Tool Call: It calls the render_chart tool with JSON data.
3. Client Hydration: The frontend receives the JSON and maps it to a Recharts component.

jsx
// The component map
const componentMap = {
  stock_chart: (data) => <StockChart data={data} />,
  flight_card: (info) => <FlightCard info={info} />
};

Why It Matters

This moves the chat interface from "Q&A" to "Dashboard." The chat becomes a dynamic canvas that adapts to the task at hand.

See our GenUI Gallery for examples.