8 Agent UI Patterns

khiem nguyen — Sat, 31 Oct 2026 14:44:26 +0000

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.

Hook NextUI Into Your Stack: The Modern Way to Build AI Interfaces

khiem nguyen — Thu, 29 Oct 2026 04:22:48 +0000

1. Why Modern UI Blocks Change the Game

When building AI-native apps, chat interfaces, and modern dashboards with React, Tailwind CSS, and TypeScript, traditional monolithic UI libraries slow you down. They lock you into rigid designs, inflate bundle sizes, and fight your custom themes.

NextUI (nextui.dev) takes a pragmatic, developer-first approach: clean component architecture, copy-paste registry blocks, and zero runtime overhead built for modern web and AI applications. When you hook NextUI into your workflow, you stop rebuilding basic primitives and focus entirely on your core product logic.

2. Quick Setup & Integration

Unlike traditional npm libraries, nextui.dev focuses on direct component integration and modular blocks that live right inside your codebase.
1. Set up nextui

 npx create nextui

2. Install and use a component

 npx shadcn@latest add @nextui/icon-buttons

It is now your own file, so import it like any local component and edit it freely:

import Button01 from "@/components/nextui/icon-buttons";

export default function Page() {
  return <Button01 />;
}

Check out nextui.dev for the full component registry and docs.

Try it in your next build and feel the difference.

DEV Community: khiem nguyen