SakaniUI

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.

Which deals need a follow-up this week?

Looking at which deals changed stage in the last seven days.

Three moved forward. Acme went quiet after the proposal and Globex asked for a quote.

Checking when each of them was last contacted.

Drafting a short follow-up for each one.

Input
{
  "query": "Acme Corp",
  "limit": 5
}
Output
{
  "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

Recent work

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.