Agent UI in React: tasks, progress and human control
Agent UI is the interface for delegating work to an AI agent and staying in control while it runs. It shows the task, current progress, tool activity, decisions that need a person and the final result. A chat can start the task; plans, run views and approvals make the work inspectable. affectUI provides React components for these views, connected to your backend through props and callbacks.
Design around a job, not just a conversation
An agent can choose its next steps and tools based on feedback. A predefined workflow follows paths set by application code. Both need a useful interface, but open-ended work especially needs a clear goal, progress and stopping conditions.
- Support: investigate a ticket, show the evidence and request review of a proposed reply.
- Engineering: prepare a patch, surface test results and wait for a person to approve deployment.
- Research: collect findings with sources and deliver a report that distinguishes completed work from unresolved questions.
Before the run: agree on the task
Show the goal, relevant inputs and proposed steps. Let people edit the scope before starting. Treat the plan as a proposal: if the agent later needs broader access or a different action, surface that change for review.
- Agent Plan – An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step
- Permission Request – An agent asks for one specific right – who, why and exactly what will happen – and you allow it once, for an hour or always; then it folds into one line with the time left and Revoke
During the run: show observable progress
Use actual tool events and task status to say what happened and what is next. Waiting for a person, running and failed are different states. Keep detailed traces available for debugging without asking everyone to read them. Show an activity summary rather than presenting private model reasoning as a work log.
- Agent Inbox – All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
- Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
At a decision: preview the exact action
Show who or what will be affected and what will change. Approval Card collects a decision; the backend enforces permission, confirms the action is still current and records its outcome. A rejection or expired request must leave the action unexecuted.
npx shadcn@latest add https://www.affectui.com/r/approval-card.json- Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
- Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away
After the run: make the result checkable
A completed run needs an artifact or a clear outcome, plus evidence such as source passages or test results. Keep unfinished work visible. If the task can be interrupted, connect the stop control to backend cancellation and display whether cancellation actually succeeded.
- Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked
- Agent Findings – A swarm of agents checking something – one calm row per agent with its progress, and their findings sliding into a short feed as they're found
Questions
How is agent UI different from chat UI?
Chat UI centers on messages. Agent UI also tracks delegated work that can outlive a message: task state, tool activity, approvals, recovery and results. A product can use both in the same screen.
Do I need a multi-agent dashboard?
Start with one task and a readable run view. Add a tree or lanes when users need to understand parallel workers or handoffs. Extra agent structure should answer a real question about the work.
Does affectUI run or pause agents?
No. The components display application data and expose interaction callbacks. Your backend runs agents, persists state, enforces approvals and implements cancellation or resume.
Updated 2026-11-05