Skip to main content

Documentation Index

Fetch the complete documentation index at: https://www.truefoundry.com/llms.txt

Use this file to discover all available pages before exploring further.

Most agent responses are plain text or markdown. That works for short answers, but when the agent needs to present a dashboard, a comparison table, a form for the user to fill, or a multi-section report — markdown falls short. Users end up reading walls of text when a chart or a set of cards would communicate the same information in seconds. Generative UI lets the agent respond with structured UI components — charts, tables, cards, forms, tabs, and more — that your client renders as a real interface. The agent writes OpenUI Lang inside its response, and your client’s renderer turns it into interactive React components in real time as the response streams.

​
What is OpenUI?

OpenUI is an open standard for generative UI. It provides:
  • OpenUI Lang — A compact, streaming-first language for describing UI. Up to 67% more token-efficient than equivalent JSON.
  • Component libraries — Built-in charts, tables, forms, layouts, cards, and more — ready to use or extend with your own design system.
  • Streaming renderer — Parses and renders UI progressively in React as tokens arrive.
  • Safe by default — No arbitrary code execution. The agent can only use components you’ve registered.
The TrueFoundry Agent Harness has built-in support for OpenUI. When the capability is enabled, the agent can emit openui fenced blocks inside its normal assistant messages, and your client renders them with the OpenUI React renderer.

​
How it works

Generative UI is not a separate tool call. The agent writes OpenUI Lang directly in the assistant response, and the client detects and renders it. The stream uses normal agent.message events. The only difference is that some message content contains an ```openui fenced block that the client can extract and render.

​
When to use Generative UI

Use Generative UI when the response benefits from visual structure:
  • Dashboards — Metrics, trends, comparisons across models, services, or time periods.
  • Tables — Structured data that users need to scan, sort, or compare quickly.
  • Cards and layouts — Summary panels, KPI highlights, or multi-section reports.
  • Forms — Inputs, dropdowns, or selections that guide the user’s next action.
  • Charts — Bar charts, line charts, or other visualizations that convey patterns faster than numbers in prose.
The agent can still include brief text outside the UI to explain the result, but should avoid repeating values already shown in the rendered components.

​
When not to use Generative UI

Do not use Generative UI for simple answers where markdown is enough — a short explanation, a bullet list, or a code block. The overhead of structured UI is not worth it for small tasks. Generative UI is also not a replacement for server-side actions. If a UI button triggers a follow-up instruction, the client should send that back as a normal user message in the next turn.

​
Available components

The OpenUI built-in library includes components for common patterns:
CategoryComponents
LayoutStack, Card, Tabs, Accordion
TextTextContent, Markdown
DataTable, Col
ChartsBarChart, LineChart, PieChart, Series
InputTextInput, Select, Button, Form
MediaImage, Link
You can also register your own components using defineComponent and createLibrary from @openuidev/react-lang. The agent will only use components that are registered in the library — 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 would turn the above into a full dashboard with summary cards at the top, a grouped bar chart in the middle, and a sortable data table at the bottom — all rendered as real React components, not markdown.

​
Client usage

For the streaming event format and a full working client example, see Using API — Generative UI.