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

Generate UI walkthrough with Alice UK voiceover

Download the narrated walkthrough

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.

Read the video transcript

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.

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:

[
  {"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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:

{
  "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