Multi-agent UI in React: orchestrators, sub-agents and hand-offs
A multi-agent UI has to show structure, time and flow: a tree for who started whom, lanes for who is busy when, hand-offs for what moved between agents, and a grid or queue when one job fans out to many workers. Put cost and status on every agent, add costs up per branch, and show conflicts between agents before they collide.
Why one chat isn't enough
With one agent, a conversation and a list of tool calls tell the whole story. With an orchestrator and five sub-agents, the same log interleaves everyone's steps and nobody can follow it. Multi-agent work needs views that separate the agents and show how they relate.
Structure: who started whom
A tree from the orchestrator down to its sub-agents answers the first question. Each card carries the agent's task, status, time and cost, and costs add up per branch, so an expensive sub-agent stands out. A graph works better when agents call each other and shared tools in all directions.
- Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
- Agent Graph – Agents and the tools they call as a living network – a pulse along the link for every call and its answer, busy links growing thicker, agents that breathe while they work and turn amber when they need you
Time: who is busy when
Lanes put each agent on its own row of a shared timeline. Tasks grow into "now" while they run, idle gaps are visible, and hand-offs are drawn between lanes – the view for spotting the agent everyone is waiting on.
- Agent Lanes – Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block
Hand-offs: what moved along
When work passes from agent to agent, the risky part is what gets lost on the way. Show each hand-off with what went along – the brief, the files, the findings – and what was dropped, so a weak result can be traced to where context went missing.
- Agent Handoff – A task passed from agent to agent like a relay – at every handoff what went along to the next one, and what got lost on the way
Fan-out and parallel attempts
Some jobs split into many small tasks for many workers; a grid where every task is a cell that fills in shows progress at a glance. Other jobs run the same task several ways at once and keep the best result – show the attempts side by side and mark the winner.
- Fan-out Grid – One agent hands a big job to many workers – every task a cell on a live grid that fills in as they get through it, with retries, failures, cost and the time left, and the details of any task on hover
- Parallel Attempts – An agent tries the same task several ways at once and the best one wins – every attempt races as a row with its model, approach and live bar, then gets a score; the best is marked and picked, and you can switch to another
- 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
Queue and assignment
When there's more work than agents, show the queue: what's waiting, which worker picks up what, and how fast it moves. Letting people drag work onto an agent – with a preview of when it'll be done – turns the queue into a planning tool.
- Agent Queue – The work waiting for your agents, and how fast it moves – jobs drop into a live queue, glide into free worker slots as growing bars and land in Done or Failed, while a depth chart shows the backlog build up when a rate limit pauses the workers and drain when they resume
- Delegate Board – Hand work to your agents by dragging it onto them – each agent previews its new “busy until” time, or switch to Auto and every new task goes to whoever is free first
Conflicts
Agents working on the same code or document can overwrite each other. Show who is touching which file and where their changes overlap before they merge, and show agents working in a shared document the way a multiplayer editor shows teammates.
- Conflict Radar – Agents working on their own branches at once, and where they get in each other's way – a row per file and a column per agent, a line between the agents that changed the same lines, each agent's way in one sentence to pick from, and Merge once all are settled
- Agent Cursors – Agents working in a document like teammates in a multiplayer editor – live pointers with names, suggestions typed letter by letter, images they resize, code they fix and comments beside the page
Talking to the team
People still talk to the orchestrator, not to every agent. A chat with the orchestrator next to a live view of the agents at work keeps the conversation simple and the work visible.
- Agent Chat – Chat with an orchestrating agent, the agents at work, and a brief to fill in beside it
Questions
Do these work with LangGraph, CrewAI or the OpenAI Agents SDK?
Yes. The components take plain data – agents with an id, a parent, a task, a status, times and costs – which you map from your framework's run events.
How many agents can a tree or lane view show?
A tree stays readable with a few dozen agents if branches fold; lanes work best with up to about ten at once. For hundreds of small tasks, use a fan-out grid instead.
Should end users see every sub-agent?
Usually not by default. Show the orchestrator's progress and a summary, and let people open the tree or lanes when they want to know more.
Updated 2026-10-29