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.

1// The component map
2const componentMap = {
3  stock_chart: (data) => <StockChart data={data} />,
4  flight_card: (info) => <FlightCard info={info} />
5};

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.