48 / 59 · Generative
Shopping cart
A cart summary: line items, a Divider, subtotal/tax/total facts, and purchase actions.
- Wireless Headphones
$79.00
- USB-C Cable (2m)
$12.00
- Phone Case
$18.00
- Subtotal
- $109.00
- Tax
- $9.81
- Total
- $118.81
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
Commerce{
"$type": "Card",
"title": "Your cart",
"children": [
{
"$type": "ListView",
"$key": "items",
"children": [
{
"$type": "ListViewItem",
"$key": "item-1",
"children": {
"$type": "Row",
"justify": "between",
"children": [
{
"$type": "Text",
"$key": "name",
"value": "Wireless Headphones"
},
{
"$type": "Caption",
"$key": "price",
"value": "$79.00"
}
]
}
},
{
"$type": "ListViewItem",
"$key": "item-2",
"children": {
"$type": "Row",
"justify": "between",
"children": [
{
"$type": "Text",
"$key": "name",
"value": "USB-C Cable (2m)"
},
{
"$type": "Caption",
"$key": "price",
"value": "$12.00"
}
]
}
},
{
"$type": "ListViewItem",
"$key": "item-3",
"children": {
"$type": "Row",
"justify": "between",
"children": [
{
"$type": "Text",
"$key": "name",
"value": "Phone Case"
},
{
"$type": "Caption",
"$key": "price",
"value": "$18.00"
}
]
}
}
]
},
{
"$type": "Divider",
"$key": "divider"
},
{
"$type": "Row",
"$key": "totals",
"justify": "between",
"children": [
{
"$type": "Fact",
"$key": "subtotal",
"label": "Subtotal",
"value": "$109.00"
},
{
"$type": "Fact",
"$key": "tax",
"label": "Tax",
"value": "$9.81"
},
{
"$type": "Fact",
"$key": "total",
"label": "Total",
"value": "$118.81"
}
]
},
{
"$type": "Row",
"$key": "actions",
"justify": "end",
"children": [
{
"$type": "Button",
"$key": "add",
"label": "Add to cart",
"buttonStyle": "outline",
"$action": {
"type": "add_to_cart"
}
},
{
"$type": "Button",
"$key": "purchase",
"label": "Purchase",
"buttonStyle": "primary",
"$action": {
"type": "purchase_cart"
}
}
]
}
]
}