Own project · 2026
Agent UI Patterns
Eight working patterns for when and why a person steps into an agent’s work. Every demo runs on a scripted stream you can slow down, break and scrub back.
On this page
Problem
A person using an agent waits for it, checks what it wrote and sometimes steps in. An agent can work through tools for thirty seconds before the answer starts. A sentence the model filled in reads the same as one taken from a source, and a misheard price looks as sure as everything else. These moments show up when the model is slow or wrong, and a static mockup never shows them. I wanted to make them happen on purpose, so I could design for them.
What I built
- While you wait. A lone #, - or | waits until the next characters show what it is, so streamed text doesn’t change shape. In the demo, a regular parser reshaped text already on screen 7 times, and this one never did. One line names the model’s current reasoning step, and a failed tool call stays in place with its retry.
- When you check. Each sentence gets its source number once it’s complete. A sentence without a source is marked, and you can remove it. Only the words below a confidence threshold you set are highlighted, with the alternatives behind them.
- When you step in. The agent suggests edits instead of making them, so you can reject the wrong one and keep the rest, even while later ones are still coming in. After a dropped connection, Resume continues from the last word. Three versions stream side by side, with the model hidden until you pick.
Two decisions
Every frame comes from one time value. Each pattern turns the latency setting into a timeline, and the demo draws one number, t, against it. Nothing is stored between frames, so I can scrub back, replay slower and stop on the worst moment to judge the design there. Your own choices sit on the same timeline. Scrub back past an accepted edit and it’s undone.
The streams are scripted. A real model gives a different run every time, and the hard cases are rare. The script sends text in uneven chunks with pauses, from a seeded generator, so the connection drops halfway through every time.
Result
It’s a static site, live at agent-ui-patterns.netlify.app, and the code is on GitHub. It works by keyboard, respects reduced motion and holds up down to 390 px. No pattern has been tested with a real model yet, and the confidence values are scripted too. I used the same motion and control rules in my Pre-sales Agent prototype.