Flight tracker

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

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

{
  "$type": "Card",
  "children": [
    {
      "$type": "Row",
      "$key": "airline-row",
      "justify": "between",
      "children": [
        {
          "$type": "Caption",
          "$key": "airline",
          "value": "United · UA 872"
        },
        {
          "$type": "Caption",
          "$key": "status",
          "value": "On time"
        }
      ]
    },
    {
      "$type": "Row",
      "$key": "cities",
      "justify": "between",
      "align": "center",
      "children": [
        {
          "$type": "Text",
          "$key": "origin",
          "value": "SFO",
          "size": "3xl",
          "weight": "bold"
        },
        {
          "$type": "Text",
          "$key": "arrow",
          "value": "",
          "color": "secondary",
          "children": {
            "$type": "Icon",
            "name": "plane",
            "size": "md"
          }
        },
        {
          "$type": "Text",
          "$key": "dest",
          "value": "NRT",
          "size": "3xl",
          "weight": "bold"
        }
      ]
    },
    {
      "$type": "Box",
      "$key": "track",
      "width": "100%",
      "height": 6,
      "radius": "full",
      "background": "color-mix(in oklab, var(--foreground) 8%, transparent)",
      "children": {
        "$type": "Box",
        "width": "62%",
        "height": 6,
        "radius": "full",
        "background": "var(--aui-live, #3b82f6)"
      }
    },
    {
      "$type": "Row",
      "$key": "meta",
      "justify": "between",
      "children": [
        {
          "$type": "Caption",
          "$key": "elapsed",
          "value": "6h 40m elapsed"
        },
        {
          "$type": "Caption",
          "$key": "remaining",
          "value": "4h 10m remaining"
        }
      ]
    }
  ]
}