Skip to main content
Plain text and markdown work for short answers, but they fall flat the moment an agent needs to show a dashboard, compare metrics across models, render a sortable table, or guide a user through a form. Users end up squinting at walls of numbers when a single chart would have told the story in seconds. Generative UI lets your agent respond with real, interactive components — charts, tables, cards, forms, layouts — that your client renders as actual React UI. The agent decides what to show; the harness ships it in a standard format your renderer turns into pixels.
TrueFoundry Agent Playground showing a Requests by Model pie chart titled 'Last 1 Day — 439 total requests' with a legend listing 14 models (claude-sonnet-4-6, claude-opus-4-7, gpt-5.5, ai21-jamba-large-1.7, etc.) and percentages, followed by a Model/Requests table

​
Why it matters

A few patterns where Generative UI changes the experience dramatically:
  • Analytics & dashboards — “Show me request volume by model” returns a chart with a sortable table, not a paragraph of numbers.
  • Comparisons — “Compare cost across my last 3 deployments” returns a bar chart and a side-by-side table.
  • Reports & summaries — Multi-section results with KPI cards, charts, and supporting data laid out cleanly.
  • Forms & guided actions — The agent gathers structured input from the user — dropdowns, toggles, text fields — instead of asking question after question in chat.
  • Browsable results — Search results, log entries, or resources rendered as cards or tables the user can scan.
The result: users get to the answer faster, and the agent stops repeating data the UI already shows.

​
Enabling Generative UI

Set config.generative_ui.enabled: true in your agent configuration. The harness will automatically inject the OpenUI component library and rendering instructions into the agent’s system prompt — you do not need to write any prompt logic yourself. 
config:
  generative_ui:
    enabled: true
The TrueFoundry Agent Playground renders OpenUI out of the box. If you are building your own client, see Client usage for the renderer setup. The next time the agent answers a question where a chart or table makes the response clearer, it will return one — automatically.

​
How it works

Generative UI is not a separate tool call. The agent simply writes a small, streaming-friendly snippet inside its normal assistant message, and the client renders it on the fly as tokens arrive. Under the hood, this uses OpenUI — an open standard for agent-generated UI:
  • OpenUI Lang — A compact, streaming-first language for describing UI. ~67% more token-efficient than equivalent JSON, so charts and tables stream in fast.
  • Component library — Built-in charts, tables, forms, cards, layouts, and more — ready to use or extend with your own design system.
  • Streaming renderer — Parses and renders UI progressively in React as the response streams in.
  • Safe by default — No arbitrary code execution. The agent can only emit components you’ve registered.
The stream uses normal agent.message events. The only difference is that some message content contains an ```openui fenced block that the client extracts and renders as React components.

​
When to use Generative UI

Turn it on whenever your agent’s answers benefit from visual structure:
Use caseWhat the agent renders
DashboardsKPI cards, charts, and tables for metrics, trends, and comparisons
TablesSortable structured data — logs, resources, results to scan
ChartsBar, line, and pie charts that show patterns faster than prose
Cards & layoutsSummary panels, multi-section reports, side-by-side comparisons
FormsInputs, dropdowns, and selections that guide the user’s next action
The agent can still include brief text alongside the UI to explain the result — it just stops repeating values that the components already show.
Skip Generative UI for simple answers where markdown is enough — a short explanation, a bullet list, or a code block. The overhead of structured components is not worth it for small tasks. Generative UI is also not a replacement for server-side actions: if a UI button needs to trigger a follow-up, the client sends that back as a normal user message in the next turn.

​
Available components

The OpenUI built-in library covers the patterns most agents need out of the box:
CategoryComponents
LayoutStack, Card, Tabs, Accordion
TextTextContent, Markdown
DataTable, Col
ChartsBarChart, LineChart, PieChart, Series
InputTextInput, Select, Button, Form
MediaImage, Link
Need something custom? Register your own components using defineComponent and createLibrary from @openuidev/react-lang. The agent will only ever emit components that are registered — it cannot generate arbitrary HTML or code.

​
Example

User

Show me a dashboard comparing request volume and error rate across my three production models.

Assistant

I will summarize the model traffic visually.
root = Stack([title, cards, chart, table])
title = TextContent("Production Model Health", "large-heavy")
cards = Stack([totalCard, errorCard], "row", "m", "stretch")
totalCard = Card([TextContent("Total requests", "small"), TextContent("2,630", "large-heavy")])
errorCard = Card([TextContent("Average error rate", "small"), TextContent("1.8%", "large-heavy")])
chart = BarChart(models, [requests], "grouped", "Model", "Requests")
table = Table([Col("Model", models), Col("Requests", requestValues, "number"), Col("Error rate", errorRates)])
models = ["gpt-4.1", "claude-sonnet", "llama-3.1"]
requestValues = [1240, 980, 410]
errorRates = ["1.2%", "2.1%", "2.5%"]
requests = Series("Requests", requestValues)
The highest traffic is on gpt-4.1, while llama-3.1 has the highest error rate despite lower volume.
The client’s OpenUI renderer turns the snippet above into a full dashboard — summary cards on top, a grouped bar chart in the middle, and a sortable data table at the bottom — all real React components, not markdown.

​
Client usage

For the streaming event format and a full working client example, see SDK Usage and Reference — Complete usage example.