> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qredence.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Generative UI with inline OpenUI Lang components

> Stream generative UI inline in Fleet Pi chat using OpenUI Lang — cards, badges, charts, tables, progress bars, and safe conversational buttons.

Fleet Pi can stream **generative UI** directly into chat messages. The agent emits a compact, line-oriented language called **OpenUI Lang** inside a fenced `openui` block, and Fleet Pi parses and renders it progressively as tokens arrive.

Use generative UI when a card, table, chart, metric, or action row communicates more clearly than prose — for example, dashboards, status summaries, comparisons, or "what would you like to do next?" prompts that route back into the conversation.

## When it applies

Generative UI is on by default in **Agent** and **Plan** modes. The system prompt for each mode includes the OpenUI component contract, so any Pi chat response can return inline UI without extra configuration.

| Mode    | OpenUI available       | Typical use                                                       |
| ------- | ---------------------- | ----------------------------------------------------------------- |
| Agent   | Yes                    | Dashboards, status cards, metrics, tables, conversational actions |
| Plan    | Yes (visual aids only) | Optional summary cards alongside the Markdown numbered plan       |
| Harness | No                     | Workspace-architecture work stays in Markdown                     |

In Plan mode the numbered plan stays in Markdown — OpenUI is reserved for compact visual summaries and decision aids, and `Button` actions are disabled.

## How it works

OpenUI Lang is a declarative DSL designed for LLMs. Each line assigns to an identifier, and the first line must assign to `root`. The renderer parses lines as they stream and shows skeletons for any forward references until they arrive.

```
Component library  →  System prompt  →  LLM stream  →  Parser  →  Inline renderer
```

Fleet Pi defines a fixed component library (the contract between the app and the model). The agent can only emit components from that library, with positional arguments. Anything the agent generates outside the contract is rejected and surfaced as a render error inline.

## Available components

The Fleet Pi component library covers layout, content, status, data, and one safe interactive primitive.

| Category | Components                                        |
| -------- | ------------------------------------------------- |
| Layout   | `Root`, `Stack`, `Group`, `Grid`, `Divider`       |
| Content  | `Heading`, `Text`, `CodeBlock`, `List`            |
| Status   | `Badge`, `Callout`, `Metric`, `ProgressBar`       |
| Data     | `Card`, `KeyValue`, `Table`, `BarChart`           |
| Input    | `Input` (display-only), `Button` (conversational) |

`Button` is the only action primitive. Clicking a button sends its `message` (or its label) back into the chat as a new user turn — there are no destructive actions, URL opens, network requests, or tool calls. Buttons are disabled in Plan mode.

## Example

A status summary the agent might stream:

````markdown theme={null}
Here's where we are:

```openui
root = Root([summary])
summary = Card("OpenUI status", Stack([ok, next]))
ok = Badge("Renderer wired", "success")
next = Text("Next: validate streamed fenced blocks.", "muted")
```
````

A conversational action row that routes the user's choice back into chat:

````markdown theme={null}
```openui
root = Root([card])
card = Card("Continue?", Stack([body, actions]))
body = Text("I can explain the implementation or run validation next.")
actions = Group([explain, validate])
explain = Button("Explain implementation", "Tell me how this OpenUI integration works", "outline")
validate = Button("Run validation", "Run the OpenUI validation checks", "default")
```
````

When the user clicks **Run validation**, Fleet Pi sends `"Run the OpenUI validation checks"` as a normal chat message.

## Authoring rules the agent follows

Fleet Pi's system prompt enforces these constraints on every response:

* Wrap each program in a fenced ` ```openui ` block. The rest of the response stays in Markdown.
* Every program starts with `root = Root(...)`.
* Use only components from the library — invented names or named arguments are rejected.
* Arguments are positional. Write `Card("Title", child)`, not `Card(title: "Title", content: child)`.
* Keep blocks chat-sized; prefer Markdown for long prose, explanations, or raw code.
* In Plan mode, never emit `Button` components.

## Error handling

If the model emits invalid OpenUI Lang — unknown components, unresolved references, or schema violations — Fleet Pi renders an inline diagnostic panel under the message with the parser errors and the raw output, so you can see exactly what the model produced and why it failed. Streaming responses suppress unresolved-reference errors until the stream completes.

## Related

<CardGroup cols={2}>
  <Card title="Chat modes" icon="comments" href="/fleet-pi/chat-modes">
    How Agent, Plan, and Harness modes change tool allowlists and OpenUI rules.
  </Card>

  <Card title="OpenUI Lang reference" icon="book" href="https://www.openui.com/docs/openui-lang/specification">
    Full OpenUI Lang language specification from Thesys.
  </Card>
</CardGroup>