Guides
Build a Real Flow
A practical product-search flow using ToonUI, React, and AI SDK.
A real ToonUI flow has four stages:
- user asks for something
- model returns markdown plus ToonUI
- user clicks or submits UI
- app decides what happens next
Server catalog
const toon = createToonProtocol({
components: ['text', 'card', 'list', 'item', 'badge', 'button', 'form', 'field', 'table'],
});Because list requires item and form requires field + button, include those dependencies in the active catalog.
Example assistant output
I found three products with low stock.
```txt
list "Low stock products":
item "Coca-Cola 400ml" description="3 units left":
badge "Low stock" warning
button primary "Restock" reply="restock Coca-Cola 400ml"
```Interaction handling
<ToonMessage
content={content}
runtime={toon}
renderMarkdown={(markdown) => <MessageResponse>{markdown}</MessageResponse>}
onReply={(payload) => {
if (payload.value.startsWith('restock ')) {
openRestockFlow(payload.value);
return;
}
append(toon.messages.toUIMessage(payload));
}}
/>The button expresses intent. Your app still owns the action.