Generative UI

Generative UI lets agents render rich interactive components. Instead of plain text, users see charts, email cards, event cards, forms, and more — the kind of interface you'd expect from a native app, not a chatbot.

The goal: users should feel like they're using a native app, not chatting with a bot.

You can browse all available components with live previews and code examples.

UI components are declared in agent.yaml as a map (not a list):

ui_components:
  email_card: {}
  event_card: {}
  survey: {}

Here's the wrong vs right:

# WRONG - silently ignored
ui:
  email_card: {}

# WRONG - YAML parse error
ui_components:
  - email_card
  - event_card

# CORRECT
ui_components:
  email_card: {}
  event_card: {}

Use the corresponding render_* tool to display a component:

render_email_card(
  from: "[email protected]",
  subject: "Meeting tomorrow",
  preview: "Let's sync on the project status..."
)

render_event_card(
  title: "Team Standup",
  date: "2025-03-15",
  time: "10:00 AM",
  location: "Zoom"
)

The agent decides when to render based on context. You don't need to tell it explicitly in the prompt — declaring ui_components is enough.

Components can have actions (buttons) that users can trigger. When clicked, the framework routes the action back to the agent.

For example, an email card might have “Reply”, “Archive”, and “Forward” actions.

Actions are defined in the component schema (in harness-ui), not in agent.yaml. You can customize action labels in ux.yaml:

ui_components:
  email_card:
    actions:
      archive:
        labels:
          running: "Archiving email"
          finished: "Email archived"

Buttons that appear on agent-generated artifacts (files). These turn generated content into one-click workflows:

artifact_actions:
  - tool: twitter_post
    label: Post to X
    matches:
      - "*single*.md"
      - twitter
    input:
      content: "{{artifact.content}}"

Components span a wide range of categories — from core primitives to domain-specific UI: