47 / 59 · Generative
Draft email
A composer Form with from/to/subject/body fields, submitting the collected values on send.
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
Content{
"$type": "Card",
"title": "New message",
"children": {
"$type": "Form",
"$action": {
"type": "send_email"
},
"children": [
{
"$type": "Row",
"$key": "from-row",
"align": "center",
"children": [
{
"$type": "Caption",
"$key": "from-label",
"value": "From"
},
{
"$type": "Text",
"$key": "from-value",
"value": "[email protected]",
"size": "sm"
}
]
},
{
"$type": "Row",
"$key": "to-row",
"align": "center",
"children": [
{
"$type": "Caption",
"$key": "to-label",
"value": "To"
},
{
"$type": "Input",
"$key": "to-input",
"name": "to",
"placeholder": "[email protected]"
}
]
},
{
"$type": "Input",
"$key": "subject",
"name": "subject",
"label": "Subject",
"placeholder": "Subject"
},
{
"$type": "Input",
"$key": "body",
"name": "body",
"label": "Message",
"multiline": true,
"placeholder": "Write your message..."
},
{
"$type": "Row",
"$key": "actions",
"justify": "end",
"children": [
{
"$type": "Button",
"$key": "discard",
"label": "Discard",
"buttonStyle": "ghost",
"$action": {
"type": "discard_email"
}
},
{
"$type": "Button",
"$key": "send",
"label": "Send email",
"buttonStyle": "primary",
"submit": true
}
]
}
]
}
}