BlogRoundup
UI components for AI interfaces: chat, thinking states and approvals
The parts an AI product needs that a normal kit lacks: streaming chat, thinking indicators, approval steps, animated numbers. Eight sources on the board.
· updated Sep 7, 2026 · 3 min read · 8 products
The short answer
Beautiful UI is the shelf: copy and paste components for chat, thinking states and approvals, free. Thinking Orbs covers the one animated indicator every agent product needs, and Dot Matrix covers loaders you own. Toolcraft is the starter kit when the whole app is an AI design tool. For the Figma side, Koala UI is a design system built for chat, agents and dashboards. NumberFlow animates the numbers.
An AI product has three screens a normal kit skips: a chat that streams, a state that says the model is thinking, and a step where a human approves what the agent wants to do. Building those from a generic component set takes a week and looks like it. The board has eight sources that already did the week.
Where do the chat components come from?
Beautiful UI. It is copy and paste components for AI interfaces: chat, thinking states, approvals, free. The approval step is the one to look at first, because it is the screen every agent product gets wrong on the first try. Toolcraft is the wider answer: an open source starter kit and UI library for AI design apps, the pick when the product is a canvas rather than a chat.
What does a thinking state look like?
An orb, in 2026. Thinking Orbs is an animated thinking orb component for AI and agent interfaces, and it reads as alive rather than as a spinner. Dot Matrix is the alternative: dot matrix loaders as React components you own, for products with a more technical voice.
How do numbers move?
NumberFlow. It is an animated number component for React, dependency free and accessible, and it is what a token counter, a cost estimate or a progress percentage should use. A number that ticks up reads as work happening. A number that jumps reads as a bug.
What about the design file?
Koala UI is a Figma design system for AI products: chat, agents and dashboards. It is the fastest way to a shared vocabulary with a designer, because the states already have names.
Feedback loops for the agent itself
Agentation is a visual feedback tool for coding agents, and MagicPath is a shared workspace for humans and agents on one canvas. Both are interfaces, and both are worth a look for how they draw the human in the loop before you design your own.
The hub is dev tools on the board, the AI shelf is AI on the board, and the wider component pick is in shadcn add-ons that stay after the demo.
Chat, thinking states and approvals, copy and paste
The shelf for the three screens a normal kit lacks. The approval component alone saves the week.
Pros
- Free
- Built for streaming chat
- Approval pattern included
Cons
- Opinionated look, restyle for a strong brand
The animated thinking indicator every agent product needs
An orb that reads as alive. Drop it in, toggle it from the request state, move on.
Pros
- Free
- One component
- Reads as thinking rather than loading
Cons
- An orb is a style, and it is everywhere in 2026
Loaders you own, with a technical voice
For products where an orb reads wrong. Dot matrix loaders as React components, yours to edit.
Pros
- Free
- Editable source
- Fits a developer tool
Cons
- Loaders only
Animated numbers, dependency free and accessible
Token counts, cost estimates, progress. A number that ticks reads as work happening.
Pros
- Free
- Zero dependencies
- Accessible by default
Cons
- Numbers only, by design
A starter kit for AI design apps
When the product is a canvas rather than a chat. Open source, a UI library and a starter in one.
Pros
- Free and open source
- Whole app starter
- Built for AI design tools
Cons
- A starter means their structure, and swapping it later costs
The Figma design system for chat, agents and dashboards
The shared vocabulary with a designer. The states already have names.
Pros
- Screens for chat, agents and dashboards
- One time purchase
- Ready for handoff
Cons
- Paid
- Figma only, code is your job
A visual feedback tool for coding agents, worth studying as an interface
Point at the interface, tell the agent. The human in the loop drawn well.
Pros
- A clear model for feedback
- Free tier
Cons
- A product to use, less a component to install
Humans and agents on one canvas
A shared workspace where the agent is a participant. The canvas model is one to borrow.
Pros
- Shows the collaborative pattern
- Free tier
Cons
- Reference more than component
Questions
Do these components handle streaming?
Beautiful UI's chat components are built for streamed responses, with the message growing as tokens arrive. The thinking state components are pure animation and stay blind to your model, so you toggle them from the same state that starts and ends the request.
Is there a Figma kit for AI interfaces?
Koala UI is the one on the board: a Figma design system for AI products with chat, agent and dashboard screens. It is a one time purchase. Beautiful UI and Toolcraft are code first, so for a designer and developer pair, Koala for the file and Beautiful UI for the code is the practical combination.
What should an approval step show?
The action in plain words, what it touches, and two buttons with different weights. The pattern to copy is a diff with approve and reject, which is what Beautiful UI ships. The mistake to avoid is a modal that hides the context the human needs to decide.
