50 / 59 · Generative
Channel message
A chat message card with a channel/timestamp row, an author row with a round avatar, and a Markdown body.
#product-updates
Today at 2:14 PM
Shipping three things this week:
- Faster search across the whole workspace
- Dark mode for the mobile app
- A refreshed onboarding flow
Let us know what you think!
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",
"children": [
{
"$type": "Row",
"$key": "meta",
"justify": "between",
"children": [
{
"$type": "Caption",
"$key": "channel",
"value": "#product-updates"
},
{
"$type": "Caption",
"$key": "timestamp",
"value": "Today at 2:14 PM"
}
]
},
{
"$type": "Row",
"$key": "author-row",
"align": "center",
"children": [
{
"$type": "Image",
"$key": "avatar",
"src": "https://i.pravatar.cc/150?img=12",
"alt": "Jordan Lee",
"size": "sm",
"round": true
},
{
"$type": "Text",
"$key": "author",
"value": "Jordan Lee",
"weight": "semibold"
}
]
},
{
"$type": "Markdown",
"$key": "body",
"value": "Shipping three things this week:\n\n1. **Faster search** across the whole workspace\n2. **Dark mode** for the mobile app\n3. A refreshed **onboarding flow**\n\nLet us know what you think!"
}
]
}