43 / 59 · Generative
Create event
A calendar day summary with three upcoming events and confirm/cancel actions to add it to the calendar.
24
July
Friday
Design review
Work9:00 to 9:30 AM
Lunch with Sam
Personal12:30 to 1:30 PM
Flight to Tokyo
Travel6:45 PM
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
Scheduling{
"$type": "Card",
"confirm": {
"label": "Add to calendar",
"$action": {
"type": "add_to_calendar"
}
},
"cancel": {
"label": "Discard"
},
"children": [
{
"$type": "Row",
"$key": "date-header",
"gap": 3,
"align": "center",
"children": [
{
"$type": "Text",
"$key": "day",
"value": "24",
"size": "3xl",
"weight": "bold"
},
{
"$type": "Col",
"$key": "date-meta",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "month",
"value": "July",
"weight": "semibold"
},
{
"$type": "Caption",
"$key": "weekday",
"value": "Friday"
}
]
}
]
},
{
"$type": "Divider",
"$key": "divider"
},
{
"$type": "Col",
"$key": "events",
"gap": 3,
"children": [
{
"$type": "Row",
"$key": "event-1",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Box",
"$key": "accent",
"width": 3,
"height": 32,
"radius": "full",
"background": "color-mix(in oklab, var(--foreground) 80%, transparent)"
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Design review",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "time",
"value": "9:00 to 9:30 AM"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Badge",
"$key": "tag",
"value": "Work",
"variant": "info"
}
]
},
{
"$type": "Row",
"$key": "event-2",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Box",
"$key": "accent",
"width": 3,
"height": 32,
"radius": "full",
"background": "color-mix(in oklab, var(--foreground) 45%, transparent)"
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Lunch with Sam",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "time",
"value": "12:30 to 1:30 PM"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Badge",
"$key": "tag",
"value": "Personal",
"variant": "warning"
}
]
},
{
"$type": "Row",
"$key": "event-3",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Box",
"$key": "accent",
"width": 3,
"height": 32,
"radius": "full",
"background": "color-mix(in oklab, var(--foreground) 25%, transparent)"
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Flight to Tokyo",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "time",
"value": "6:45 PM"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Badge",
"$key": "tag",
"value": "Travel",
"variant": "success"
}
]
}
]
}
]
}