46 / 59 · Generative
Ride status
A live ride card with a big ETA and pick-up/driver facts.
Arriving in 4 min
Toyota Camry · ABC 1234- Pick up
- 123 Market St
- Driver
- Alex · 4.98 ★
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 ★"
}
]
}
]
}