A chatbot answers. An agent acts: it searches, calls APIs, edits files, sends emails. That changes what the interface has to do. The user is no longer reading a reply; they are supervising a worker they can't see.
After building a lot of agent interfaces, I keep coming back to the same eight patterns. None of them are about looking clever. They are about one thing: letting the user trust what the agent is doing.
1. A thinking state that isn't a spinner
The gap between "send" and the first token is where users decide whether the app is broken. A generic spinner says "loading". A thinking state says "working on your thing".
Keep it calm: slow motion, a short label that can change ("Searching the web…", "Reading 3 files…"), and respect prefers-reduced-motion.
Example: Thinking wave
2. Streaming text without layout shift
Streaming is table stakes, but jumping layouts are not. Reserve space for the message, render markdown incrementally, and don't re-flow code blocks on every token.
3. Tool calls the user can read
When the agent calls a tool, show it: the tool name, the arguments as they stream in, a running state, then the result. Collapse finished calls so a long turn doesn't become a wall.
This is the single biggest trust win. Users stop wondering "what is it doing?" because they can see it.
Example: Tool call. It takes a Vercel AI SDK tool part directly:
{message.parts.map((part, i) =>
part.type.startsWith("tool-") ? <ToolCall key={i} part={part} /> : null
)}
4. Approval before side effects
Anything hard to undo (sending, paying, deleting, publishing) should stop and ask. Show the exact arguments, not a summary: who gets the email, what the subject is, which file is attached. Two buttons, clear outcome.
Example: Tool approval
5. A plan with live progress
For multi-step work, show the plan first, then tick steps off as they finish. It sets expectations ("4 steps") and makes long runs feel shorter.
Example: Task checklist
6. Sources and inline citations
If the agent read something, show where. Inline citation chips next to the claim, and a sources list the user can open. Uncited answers from an agent that clearly browsed feel like it is hiding something.
7. An artifact panel
When the output is a thing (a document, a chart, code), put it in its own panel next to the chat, with versions. Chat is for talking about the artifact, not for scrolling through it.
8. Voice that shows it's listening
Voice agents need a visible state machine: idle, listening, thinking, speaking. One orb or ring that changes motion per state beats four different icons.
Example: Voice agent
The pattern behind the patterns
Every one of these answers a question the user would otherwise ask out loud: Is it working? What is it doing? Is it about to do something I didn't want? Where did that come from? Answer those in the UI and the agent feels trustworthy, even when it is wrong sometimes.
I'm collecting these as copy-paste React + Tailwind components at nextui.dev. The code lands in your repo, no runtime package. I'd love to hear which agent UI pattern you find hardest to get right. Tell me in the comments.
Top comments (0)