Build an AI assistant
The screens an agent product is made of, in the order a user meets them. The first half is the conversation; the second half is everything that stops a confident-sounding model from doing damage — which is the half most AI products skip and then retrofit after the first incident.
Take all 10 at once
npx hoverlab add chat-empty-state chat-prompt-bar chat-thread-panel chat-streaming-answer agent-working-indicator agent-thinking-trace source-citation-list retrieval-empty-state approval-request-card agent-diff-reviewOr through the shadcn CLI, with nothing installed first:
npx shadcn@latest add https://hoverlab5.netlify.app/r/path-ai-assistant.jsonThis path is a published registry item — one name that pulls in all 10 blocks. Or work down the list and copy each one from its page; the order is what matters, not how the files get there.
- 1
The first screen, and the one that decides whether anyone types anything. A user who does not know what the thing can be asked will ask nothing, so this is where you spend your specificity.
- 2
The composer, before the thread. Everything downstream is shaped by what a user can express here — @ for sources and / for commands are the difference between a search box and an interface.
- 3
The conversation itself. Take the live-region and scroll handling from this one verbatim: polite-with-additions and only-pin-when-at-the-bottom are both invisible until they are wrong.
- 4
The reply. Citations belong in the answer rather than under it, and the streaming here is deliberately outside every live region — the usual mistake is a paragraph re-read on every token.
- 5
The gap before that first token. Fifteen silent seconds is indistinguishable from a dropped request, and an elapsed counter is the only honest answer to "is it stuck".
- 6
Show the working. This is what converts a plausible answer into a checkable one, and it costs nothing to collapse by default.
Or: Tool Call Chips
- 7
Where the claims came from. Add it the moment the assistant states a number — an uncited figure is the fastest way to lose a user permanently.
- 8
Before you ship: what it says when it found nothing. A model with no honest refusal path will fill the gap with something plausible, and this screen is the alternative.
- 9
The first time the agent can change something, it has to ask. State the effect before the verb, default to the smallest blast radius, and never pre-focus Approve.
- 10
For bulk edits, one approval is not consent. Make the row the unit of review and show a running count of what will actually be written.
When you are done
The AI Assistant Screen page ships these already composed — transcript down the middle, permissions and insights in the rail. After that: `agent-task-list` if runs outlive the request, and `selection-ai-toolbar` if you have a document surface, since inline actions convert far better than sending people to a chat panel.