> For the complete documentation index, see [llms.txt](https://docs.stackai.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stackai.com/stackai-tools/content-and-interface-generation/generate-ui.md).

# Generate UI

Show charts, cards, tables, and interactive controls directly in an agent's chat response. Generate UI returns a structured component specification that a supported StackAI chat interface renders.

## Watch the walkthrough

{% embed url="<https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fxs0hQPdrYI9kBp2Yq12D%2Fgenerate-ui-alice-uk.mp4?alt=media>" %}
Generate UI walkthrough with Alice UK voiceover
{% endembed %}

[Download the narrated walkthrough](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fxs0hQPdrYI9kBp2Yq12D%2Fgenerate-ui-alice-uk.mp4?alt=media)

**Chapters:** 0:00 — Introduction; 0:07 — Request a chart; 0:44 — Choose a chart type; 1:21 — Compose an account overview; 1:54 — Use interactive controls; 2:30 — Next steps.

The walkthrough covers chart prompts, all five chart types, a composed account overview, and a form with local state. It uses the actual StackAI frontend and its component library styles with fictional Acme data and simulated tool responses. It illustrates supported rendering and interactions; it is not a live model reliability test. Your layout can vary by model and interface.

<details>

<summary>Read the video transcript</summary>

**Request a chart**

Generate UI lets your Stack AI agent show structured, interactive content directly in chat. First, add the Generate UI tool to your agent, then open a supported chat interface. In this demo, the tool is already configured. Ask for the component by name and include the data. Here, we request a bar chart with revenue for January, February, and March. The chart appears inside the response. Hover over a bar to inspect its value. This recording uses the real Stack AI interface with fictional data and simulated responses.

**Choose a chart type**

Choose the chart type that matches your question. Bar charts compare categories. Line charts show trends over time. Area charts emphasize changing volume. Pie and donut charts show how a total is divided. Ask the agent to use Generate UI, name the chart type, and provide labels and numeric values. For multiple series, include a category on every data point. The guide below includes a separate example and screenshot for all five chart types.

**Compose an account overview**

You can combine components into one useful response. Ask for an account overview with a card, status badge, initials avatar, project table, and expandable next steps. The agent composes those components inside the conversation. Click an accordion heading to reveal the details. For a predictable result, name the components you want and describe the content each should contain. The guide includes prompts and screenshots for every supported component.

**Use interactive controls**

Generate UI also supports inputs, selectors, switches, sliders, and other controls. Here, we ask for a project preferences form. Enter a project name, choose a team, turn on weekly updates, and adjust the priority. State bindings let these controls update the current interface. They do not automatically save to a database, submit a workflow, or send an approval. Use a separate workflow action when you need those effects, and use Ask Human when the agent needs a reply to continue. Start with a specific component, clear data, and an explicit instruction to use Generate UI.

</details>

## Enable Generate UI and trigger a component

1. Add **Generate UI** to the agent's tools.
2. In the agent instructions, describe when to use it. For example: “Use Generate UI when a chart, table, card, or interactive control makes the answer easier to understand. Use the available data and the supported component catalog.”
3. Open a chat interface that supports generated UI. An API response contains component data; the API alone does not display the component.
4. Name the component in your prompt, provide its content or data, and describe any interaction or initial value. Start with **Use Generate UI to…**. The examples below are prompts to adapt, not special commands with guaranteed output.
5. Inspect the rendered result and confirm that labels, values, and interactions match your request.

**Prompt template**

> Use Generate UI to show a \[component or chart type] using \[data]. Include \[labels and content]. Initialize \[control] to \[value], and bind it to local state. When \[event] happens, \[describe the local UI change].

For a combined response, name each component and its role:

> Use Generate UI for an account overview with a Card, an On track Badge, an initials Avatar for Maya Chen, a project Table, and an Accordion with next steps. Use fictional sample data.

## Chart types

The **Chart** component supports five types: `bar`, `line`, `area`, `pie`, and `donut`. Supply data as labels and numeric values. Currency symbols belong in titles or axis labels, not in numeric values.

For multiple series, include a `category` on every data point. Use consistent labels and series names. For example:

```json
[
  {"label": "January", "value": 12000, "category": "Product"},
  {"label": "January", "value": 4000, "category": "Services"},
  {"label": "February", "value": 15000, "category": "Product"},
  {"label": "February", "value": 5000, "category": "Services"}
]
```

The gallery contains **39 screenshots**: five chart types and the other 34 supported components. Each screenshot shows an illustrative rendered example. Copy the accompanying prompt and replace the sample data with your own.

### Bar chart

Use bars to compare categories or periods. Supply numeric values, not currency strings.

**Example prompt**

> Use Generate UI to show a bar chart of revenue: January 12000, February 15000, March 18000. Label the axes Month and Revenue ($).

![Bar chart rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fs91xKKo3hkWt68pYtZCx%2Fgenerate-ui-Chart-bar-corrected.png?alt=media)

### Line chart

Use a line for trends. Order the data points before passing them to the chart.

**Example prompt**

> Use Generate UI to show a line chart of revenue: January 12000, February 15000, March 18000. Keep the months in chronological order.

![Line chart rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FG0fgDnEoulqGHFGRKXU2%2Fgenerate-ui-Chart-line-corrected.png?alt=media)

### Area chart

Use an area chart when the filled region helps communicate changing volume.

**Example prompt**

> Use Generate UI to show an area chart of revenue: January 12000, February 15000, March 18000.

![Area chart rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F9107BT5eHJyiAiXigKF4%2Fgenerate-ui-Chart-area-corrected.png?alt=media)

### Pie chart

Each label names a slice and each value determines its size. Use non-negative values with a positive total.

**Example prompt**

> Use Generate UI to show a pie chart of revenue mix: Product 60, Services 25, Support 15. Show the legend.

![Pie chart rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FJJtfZZw4ZoHBtVeAiMnm%2Fgenerate-ui-Chart-pie-corrected.png?alt=media)

### Donut chart

A donut is the same part-to-whole comparison with a center opening. Do not request unsupported gauge or scatter chart types.

**Example prompt**

> Use Generate UI to show a donut chart of revenue mix: Product 60, Services 25, Support 15. Show the legend.

![Donut chart rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FMKBgGH4K0KisYxJlQlQk%2Fgenerate-ui-Chart-donut-corrected.png?alt=media)

## Layout and navigation

### Card

Cards group related content. Put the content inside the card's children.

**Example prompt**

> Use Generate UI to create a Card titled Launch checklist, with a short description and the next three steps.

![Card rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FGLIX9TM1qKzTJujErmiD%2Fgenerate-ui-Card-corrected.png?alt=media)

### Stack

Use Stack for a horizontal or vertical layout. Specify direction, spacing, and alignment.

**Example prompt**

> Use Generate UI to arrange Plan, Build, and Launch badges in a horizontal Stack with medium spacing.

![Stack rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fim34D6bC7pOlenkDFIYw%2Fgenerate-ui-Stack-corrected.png?alt=media)

### Grid

Use Grid for 1–6 columns. Put each item in the grid's children.

**Example prompt**

> Use Generate UI to show a three-column Grid of cards: 12 projects, 8 owners, and 95% on track.

![Grid rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FymywNJZMaIeg40WjdAZo%2Fgenerate-ui-Grid-corrected.png?alt=media)

### Separator

Specify horizontal or vertical orientation to divide sections.

**Example prompt**

> Use Generate UI to show Account details, a horizontal Separator, and Next steps.

![Separator rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FwQ4hdP6oV3rYSR8d4mpY%2Fgenerate-ui-Separator-corrected.png?alt=media)

### Tabs

Define tab labels and values, initialize the selected value, and use visibility conditions on the content. Tabs alone do not create separate content panels.

**Example prompt**

> Use Generate UI to create Overview and Details Tabs. Bind the active tab to local state and show only the content for the selected tab.

![Tabs rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F6thUhLrbU1poEiMnIOzl%2Fgenerate-ui-Tabs-corrected.png?alt=media)

### Accordion

Supply title/content pairs. Click a heading to expand it. Request single or multiple open sections.

**Example prompt**

> Use Generate UI to create an Accordion with What is included? and Who owns the rollout? sections, each with a short answer.

![Accordion rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FjTPYGPBUwzPEZpsJWd3x%2Fgenerate-ui-Accordion-corrected.png?alt=media)

### Collapsible

Use one collapsible section with child content; defaultOpen controls its initial state.

**Example prompt**

> Use Generate UI to put rollout details in a Collapsible section titled Show rollout details. Start it expanded.

![Collapsible rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fofhxs6fOM3CnvDcJOx9Q%2Fgenerate-ui-Collapsible-corrected.png?alt=media)

### Pagination

The control changes the selected page number. It does not fetch or paginate data automatically; connect local visibility or a separate data-loading workflow.

**Example prompt**

> Use Generate UI to show Pagination with five pages and page two selected. Bind the page number to local state.

![Pagination rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FBRz3vpGSJvKatA0DtePO%2Fgenerate-ui-Pagination-corrected.png?alt=media)

## Overlays and contextual help

### Dialog

Set openPath to an initialized boolean state path. Bind the button's press event to setState with true. The screenshot shows the open dialog.

**Example prompt**

> Use Generate UI to add a Review details button that opens a Dialog with the project name, owner, and status. Use local boolean state to control whether it is open.

![Dialog rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FnXeaIRIHgytKXTEPiyno%2Fgenerate-ui-Dialog-corrected.png?alt=media)

### Drawer

Drawer uses openPath like Dialog and opens as a bottom sheet. The screenshot shows its open state.

**Example prompt**

> Use Generate UI to add a Project details button that opens a Drawer showing the owner and rollout status. Control it with local boolean state.

![Drawer rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F42Ej63zQr5CFEACVquE9%2Fgenerate-ui-Drawer-corrected.png?alt=media)

### Tooltip

Supply the visible text and tooltip content. Hover over the text to reveal the explanation.

**Example prompt**

> Use Generate UI to show Monthly recurring revenue with a Tooltip explaining that it means recurring subscription revenue for this month.

![Tooltip rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FnO4qCMFBFxgag8nmCgOS%2Fgenerate-ui-Tooltip-corrected.png?alt=media)

### Popover

Supply trigger text and content. Click the trigger to open the popover.

**Example prompt**

> Use Generate UI to create a Popover labeled View revenue definition that explains which revenue is included.

![Popover rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FE8pxVVgRdTz1WFLhktXG%2Fgenerate-ui-Popover-corrected.png?alt=media)

### DropdownMenu

Define label/value pairs. Menu selection is local; it does not run an external action.

**Example prompt**

> Use Generate UI to create a DropdownMenu labeled Choose view with Summary and Detailed options. Bind the selection to local state.

![DropdownMenu rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FWE4H23coJuFHzhXqC0Ev%2Fgenerate-ui-DropdownMenu-corrected.png?alt=media)

## Text and data display

### Heading

Set the heading text and choose a level from h1 through h4.

**Example prompt**

> Use Generate UI to show Quarterly account review as an h2 Heading.

![Heading rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F9oXGQMHTDRDLJqa2lCUb%2Fgenerate-ui-Heading-corrected.png?alt=media)

### Text

Choose body, caption, muted, lead, or code text styling.

**Example prompt**

> Use Generate UI to show a Text paragraph explaining that revenue increased 50% across the quarter.

![Text rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FWgOB6N0AkY4aCZ474xBw%2Fgenerate-ui-Text-corrected.png?alt=media)

### Badge

Use a short status label. Available variants are default, secondary, destructive, and outline.

**Example prompt**

> Use Generate UI to show an On track Badge with the secondary style.

![Badge rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fk9tCutAKmrxyq50jYlwi%2Fgenerate-ui-Badge-corrected.png?alt=media)

### Alert

Choose info, success, warning, or error. An alert displays a message; it does not create a notification or approval.

**Example prompt**

> Use Generate UI to show a warning Alert titled Review required, asking the reader to confirm the source data before sharing.

![Alert rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FPP8hf6B9nfaxVWARQQxz%2Fgenerate-ui-Alert-corrected.png?alt=media)

### Carousel

Supply item titles and descriptions. Use the carousel controls to move between items. Remote images are not supported.

**Example prompt**

> Use Generate UI to create a Carousel with Plan, Build, and Launch cards, each with a short description.

![Carousel rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FVV7x53z6OLeeBu14UhmT%2Fgenerate-ui-Carousel-corrected.png?alt=media)

### Table

Columns are header strings; rows are arrays of cell strings. Do not assume automatic sorting, filtering, or server pagination.

**Example prompt**

> Use Generate UI to show a Table with Project, Owner, and Status columns for Onboarding/Maya/Complete, Training/Jordan/In progress, and Launch/Riley/Planned.

![Table rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FBh48eaHdgy2hMnt9mVGS%2Fgenerate-ui-Table-corrected.png?alt=media)

### Progress

The value is supplied by the agent or state. It is not automatically connected to workflow execution progress.

**Example prompt**

> Use Generate UI to show a Progress bar labeled Rollout checklist: 75% complete, with value 75 and maximum 100.

![Progress rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FDZG6G1LWox5KmLGxDkdx%2Fgenerate-ui-Progress-corrected.png?alt=media)

### Skeleton

A skeleton is a visual placeholder. It does not load data or replace itself with the finished result.

**Example prompt**

> Use Generate UI to show a rounded Skeleton placeholder, full width and 100 pixels high, for a report preview.

![Skeleton rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FG3N6BwWE8uALLH090j3b%2Fgenerate-ui-Skeleton-corrected.png?alt=media)

### Spinner

A spinner is a visual indicator. Connect its visibility to state if it should disappear; it does not track a job automatically.

**Example prompt**

> Use Generate UI to show a large Spinner labeled Preparing your report.

![Spinner rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FyiUmU60ec7xyZchdk2Wr%2Fgenerate-ui-Spinner-corrected.png?alt=media)

## Buttons and form controls

### Button

A button needs an on.press binding. Built-in local actions include setState, pushState, removeState, and validateForm. No backend action is implied.

**Example prompt**

> Use Generate UI to create a Show confirmation Button. On press, set local confirmed state to true and show Confirmed in this UI only.

![Button rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FUcPki5TwLTL1RroFgU3Y%2Fgenerate-ui-Button-corrected.png?alt=media)

### Input

Bind value using $bindState. Supported input types are text, email, password, and number. Use sample values in demos.

**Example prompt**

> Use Generate UI to create an Input labeled Project name, initialized to Acme launch and bound to local state.

![Input rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FAlXvXi8z6nM7VNIrFJep%2Fgenerate-ui-Input-corrected.png?alt=media)

### Textarea

Use Textarea for multiline input. Optional checks and validateOn control field validation.

**Example prompt**

> Use Generate UI to create a four-row Textarea labeled Project brief with a sample pilot brief, bound to local state.

![Textarea rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FUZX7b1B324l4qp26W3dI%2Fgenerate-ui-Textarea-corrected.png?alt=media)

### Select

Options are strings. Click the control to choose a value. Initialize the bound state to a valid option.

**Example prompt**

> Use Generate UI to create a Select labeled Team with Engineering, Sales, and Support options. Select Support initially and bind it to local state.

![Select rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F0t7LQVPSCbPIkHlt8Kqc%2Fgenerate-ui-Select-corrected.png?alt=media)

### Checkbox

Bind checked to a boolean state path.

**Example prompt**

> Use Generate UI to create a checked Checkbox labeled Include a summary, bound to local state.

![Checkbox rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FJ9m5vETkLy0dk7kX4qkG%2Fgenerate-ui-Checkbox-corrected.png?alt=media)

### Radio

Use Radio for one visible choice from a short list. Bind value to the selected option.

**Example prompt**

> Use Generate UI to create a Radio group labeled Report frequency with Daily, Weekly, and Monthly options. Select Weekly initially.

![Radio rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FBGxgS6MD7k48wBLecpQG%2Fgenerate-ui-Radio-corrected.png?alt=media)

### Switch

Bind checked to boolean state. Turning it on changes the UI state; it does not subscribe the user to notifications.

**Example prompt**

> Use Generate UI to create an enabled Switch labeled Show weekly updates, bound to local state.

![Switch rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2F0JtRYPRmCrSfeUqLEEpu%2Fgenerate-ui-Switch-corrected.png?alt=media)

### Slider

Bind value to numeric state. Specify min, max, and step; users can drag or use arrow keys.

**Example prompt**

> Use Generate UI to create a Priority Slider from zero to 100, in steps of ten, starting at 70.

![Slider rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FxvYp9VBwh8Xjcx5aF2ZU%2Fgenerate-ui-Slider-corrected.png?alt=media)

### Toggle

Bind pressed to boolean state. Describe any content whose appearance should depend on it.

**Example prompt**

> Use Generate UI to create an outlined Toggle labeled Highlight totals, initially pressed and bound to local state.

![Toggle rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FFqfLl0e3MVS0EPp10Mak%2Fgenerate-ui-Toggle-corrected.png?alt=media)

### ToggleGroup

Define label/value pairs. The catalog also exposes multiple-selection mode; verify the selection behavior in your target interface before relying on it.

**Example prompt**

> Use Generate UI to create a single-selection ToggleGroup with Day, Week, and Month. Select Week initially and bind it to local state.

![ToggleGroup rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2Fm0ffzuBHQDgArOfgNNBj%2Fgenerate-ui-ToggleGroup-corrected.png?alt=media)

### ButtonGroup

Use a segmented group for related choices. Add visibility conditions if the choice should change the displayed content.

**Example prompt**

> Use Generate UI to create a ButtonGroup with Summary and Details options. Select Summary initially and bind the selected value to local state.

![ButtonGroup rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FBCpP2LV2LGiH90Wn3iRA%2Fgenerate-ui-ButtonGroup-corrected.png?alt=media)

## Identity

### Avatar

Avatar renders initials from the name. It does not load profile photos or remote image URLs.

**Example prompt**

> Use Generate UI to show a large Avatar for Maya Chen.

![Avatar rendered in StackAI Generate UI](https://1957915746-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSQ1Sgy933krTyK0S4JpP%2Fuploads%2FuPPWaHprkCosARWXbHMl%2Fgenerate-ui-Avatar-corrected.png?alt=media)

## State and interaction

Inputs and selection controls can update local UI state. Initialize the relevant paths in `state` and bind component props with `$bindState`. A button needs an event binding such as `on.press`. Dialog and Drawer use `openPath` to point to a boolean in state.

For example, this minimal specification renders an editable project name:

```json
{
  "root": "projectName",
  "state": {"projectName": "Acme launch"},
  "elements": {
    "projectName": {
      "type": "Input",
      "props": {
        "label": "Project name",
        "name": "projectName",
        "value": {"$bindState": "/projectName"}
      },
      "children": []
    }
  }
}
```

Changing local state does not automatically save records, run a workflow, send a notification, or approve a request. Use a separate workflow action for those effects. Use **Ask Human** when the agent needs a human reply to continue.

## Behavior and troubleshooting

* **The agent returns plain text:** confirm Generate UI is available as a tool, tell the agent when to use it, and explicitly name a supported component in the prompt.
* **The API returns JSON:** render the specification in a supported chat interface. An API response is not itself an interactive UI.
* **The component does not render:** check that `root` matches an element key, child references exist, component names and props are supported, and bound state values have the expected types.
* **A control appears but changes nothing:** initialize its state, add the relevant binding or event, and make dependent content read that state. Tabs, pagination, and selection controls do not automatically create content panels or load records.
* **A chart is misleading:** check numeric values, labels, ordering, series categories, and the chosen chart type against the underlying data.

Generate UI does not publish a website or application. The current catalog does not include standalone Image or Link components; Avatar uses initials. Only the five chart types listed above are supported.

## Inputs

| Field                   | Parameter  | Description                                                                   |
| ----------------------- | ---------- | ----------------------------------------------------------------------------- |
| Root Element (required) | `root`     | Root element key for the generated UI specification.                          |
| Elements (required)     | `elements` | Flat map of element definitions with `type`, `props`, and child element keys. |
| State                   | `state`    | Optional initial UI state for bound values and local interactions.            |

## Outputs

| Field        | Parameter  | Description              |
| ------------ | ---------- | ------------------------ |
| Root Element | `root`     | Key of the root element. |
| Elements     | `elements` | UI element definitions.  |
| State        | `state`    | Initial UI state.        |

## Related guidance

[Interface Inputs and Output Mapping](/technical-reference/interfaces-and-conversations/interface-inputs-and-output-mapping.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.stackai.com/stackai-tools/content-and-interface-generation/generate-ui.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.