Elements

46 / 59 · Generative

Ride status

A live ride card with a big ETA and pick-up/driver facts.

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

Travel
{
  "$type": "Card",
  "children": [
    {
      "$type": "Header",
      "$key": "eta",
      "text": "Arriving in 4 min",
      "size": "3xl"
    },
    {
      "$type": "Text",
      "$key": "car",
      "value": "Toyota Camry · ABC 1234",
      "color": "secondary"
    },
    {
      "$type": "Divider",
      "$key": "divider"
    },
    {
      "$type": "Row",
      "$key": "facts",
      "gap": 6,
      "children": [
        {
          "$type": "Row",
          "$key": "pickup",
          "align": "start",
          "children": [
            {
              "$type": "Icon",
              "$key": "icon",
              "name": "map-pin",
              "size": "sm"
            },
            {
              "$type": "Fact",
              "$key": "fact",
              "label": "Pick up",
              "value": "123 Market St"
            }
          ]
        },
        {
          "$type": "Fact",
          "$key": "driver",
          "label": "Driver",
          "value": "Alex · 4.98 ★"
        }
      ]
    }
  ]
}

Component vocabulary →