Elements

54 / 59 · Generative

Conference session

A conference session card with a kicker, title, description, and two speaker rows with a View action.

Installation

npm install @assistant-ui/react-generative-ui

Usage

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

Spec

Content
{
  "$type": "Card",
  "children": [
    {
      "$type": "Caption",
      "$key": "kicker",
      "value": "TRACK 2 · AI ENGINEERING"
    },
    {
      "$type": "Header",
      "$key": "title",
      "text": "Building Reliable Agent Loops",
      "size": "md"
    },
    {
      "$type": "Text",
      "$key": "description",
      "value": "A practical look at retries, tool-call verification, and human-in-the-loop patterns for production agents.",
      "size": "sm",
      "color": "secondary"
    },
    {
      "$type": "Row",
      "$key": "meta",
      "gap": 3,
      "children": [
        {
          "$type": "Caption",
          "$key": "location",
          "value": "Hall B"
        },
        {
          "$type": "Caption",
          "$key": "time",
          "value": "2:30 PM to 3:15 PM"
        }
      ]
    },
    {
      "$type": "Divider",
      "$key": "divider"
    },
    {
      "$type": "Row",
      "$key": "speaker-1",
      "justify": "between",
      "align": "center",
      "children": [
        {
          "$type": "Row",
          "$key": "info",
          "align": "center",
          "children": [
            {
              "$type": "Image",
              "$key": "avatar",
              "src": "https://i.pravatar.cc/150?img=47",
              "alt": "Priya Nair",
              "size": "sm",
              "round": true
            },
            {
              "$type": "Col",
              "$key": "text",
              "gap": 0,
              "children": [
                {
                  "$type": "Text",
                  "$key": "name",
                  "value": "Priya Nair",
                  "weight": "medium"
                },
                {
                  "$type": "Caption",
                  "$key": "title",
                  "value": "Staff Engineer, Agentbase"
                }
              ]
            }
          ]
        },
        {
          "$type": "Button",
          "$key": "view",
          "label": "View",
          "buttonStyle": "outline",
          "$action": {
            "type": "view_speaker",
            "speakerId": "priya-nair"
          }
        }
      ]
    },
    {
      "$type": "Row",
      "$key": "speaker-2",
      "justify": "between",
      "align": "center",
      "children": [
        {
          "$type": "Row",
          "$key": "info",
          "align": "center",
          "children": [
            {
              "$type": "Image",
              "$key": "avatar",
              "src": "https://i.pravatar.cc/150?img=33",
              "alt": "Devon Brooks",
              "size": "sm",
              "round": true
            },
            {
              "$type": "Col",
              "$key": "text",
              "gap": 0,
              "children": [
                {
                  "$type": "Text",
                  "$key": "name",
                  "value": "Devon Brooks",
                  "weight": "medium"
                },
                {
                  "$type": "Caption",
                  "$key": "title",
                  "value": "Founding Engineer, Agentbase"
                }
              ]
            }
          ]
        },
        {
          "$type": "Button",
          "$key": "view",
          "label": "View",
          "buttonStyle": "outline",
          "$action": {
            "type": "view_speaker",
            "speakerId": "devon-brooks"
          }
        }
      ]
    }
  ]
}

Component vocabulary →