AI Chat
The two screens of an AI product: the conversation, and the empty screen you start it from.
Both are built from the Sidebar parts and the AI components: AiMessage with the Chat Orb, ReasoningTrace, ToolCall, ThinkingLoader, SuggestionChip and PromptComposer. Nothing is wired to a model.
AI Chat
It is live: send a message and it plays a reply in real time. The orb looks up while it thinks, the reasoning streams in word by word, a tool call runs, then the answer arrives and the orb glances at it. Replace the demo reply with your own stream.
{
"query": "Acme Corp",
"limit": 5
}{
"results": 3,
"top": "Acme Corp (Enterprise, $48,000)",
"lastContact": "9 days ago"
}Your pipeline looks healthy. Three deals moved forward this week, and two of them are worth a closer look before Friday:
1. Acme Corp, silent since the proposal went out on Monday.
2. Globex, asked for a revised quote on the annual plan.
I can draft a follow-up for each one if you’d like.
Sakani AI can make mistakes. Check important information.
AI Welcome
The empty screen: a greeting beside the Chat Orb (it follows your pointer), the prompt box with its options row, and three recent-work cards.
Good afternoon, Samuel
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.