49 / 59 · Generative
Playlist
A media card with a cover image and a numbered track list, each row playable on its own.
Focus Flow
- 1Morning Light
Aria Sol
- 2Slow Static
Field Notes
- 3Amber Hours
Aria Sol
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
Media{
"$type": "Card",
"children": [
{
"$type": "Image",
"$key": "cover",
"src": "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=640&q=80",
"alt": "Recording studio with guitars on the wall and a mixing console lit in warm neon"
},
{
"$type": "Divider",
"$key": "divider"
},
{
"$type": "Header",
"$key": "title",
"text": "Focus Flow",
"size": "md"
},
{
"$type": "ListView",
"$key": "tracks",
"children": [
{
"$type": "ListViewItem",
"$key": "t1",
"$action": {
"type": "play_track",
"trackId": "t1"
},
"children": {
"$type": "Row",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Text",
"$key": "n",
"value": "1",
"size": "sm",
"color": "secondary"
},
{
"$type": "Image",
"$key": "thumb",
"src": "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=640&q=80",
"alt": "",
"size": "sm",
"round": true
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Morning Light",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "artist",
"value": "Aria Sol"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Button",
"$key": "play",
"label": "Play",
"buttonStyle": "ghost",
"$action": {
"type": "play_track",
"trackId": "t1"
},
"children": {
"$type": "Icon",
"name": "play",
"size": "sm"
}
}
]
}
},
{
"$type": "ListViewItem",
"$key": "t2",
"$action": {
"type": "play_track",
"trackId": "t2"
},
"children": {
"$type": "Row",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Text",
"$key": "n",
"value": "2",
"size": "sm",
"color": "secondary"
},
{
"$type": "Image",
"$key": "thumb",
"src": "https://images.unsplash.com/photo-1471478331149-c72f17e33c73?w=640&q=80",
"alt": "",
"size": "sm",
"round": true
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Slow Static",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "artist",
"value": "Field Notes"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Button",
"$key": "play",
"label": "Play",
"buttonStyle": "ghost",
"$action": {
"type": "play_track",
"trackId": "t2"
},
"children": {
"$type": "Icon",
"name": "play",
"size": "sm"
}
}
]
}
},
{
"$type": "ListViewItem",
"$key": "t3",
"$action": {
"type": "play_track",
"trackId": "t3"
},
"children": {
"$type": "Row",
"align": "center",
"gap": 3,
"children": [
{
"$type": "Text",
"$key": "n",
"value": "3",
"size": "sm",
"color": "secondary"
},
{
"$type": "Image",
"$key": "thumb",
"src": "https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=640&q=80",
"alt": "",
"size": "sm",
"round": true
},
{
"$type": "Col",
"$key": "info",
"gap": 0,
"children": [
{
"$type": "Text",
"$key": "title",
"value": "Amber Hours",
"weight": "medium"
},
{
"$type": "Caption",
"$key": "artist",
"value": "Aria Sol"
}
]
},
{
"$type": "Spacer",
"$key": "spacer"
},
{
"$type": "Button",
"$key": "play",
"label": "Play",
"buttonStyle": "ghost",
"$action": {
"type": "play_track",
"trackId": "t3"
},
"children": {
"$type": "Icon",
"name": "play",
"size": "sm"
}
}
]
}
}
]
},
{
"$type": "Button",
"$key": "view-all",
"label": "View playlist",
"buttonStyle": "outline",
"block": true,
"$action": {
"type": "view_playlist"
}
}
]
}