AI Agent UI Components for React
38 components · React, TypeScript and Tailwind CSS, light and dark
An agent works for minutes, calls tools and sometimes needs permission. These components show that work as it happens: the plan with each step ticking off, every tool call with what went in and what came back, and a clear stop when the agent wants to do something risky.
Use the Agent Workspace for a complete screen, or compose run status, task plan, tool call and approval request into your own layout. Run history and run summary cover what happened afterwards, including duration and cost.
All AI UI components
NewProPlan vs Actual
An agent's plan and its real run as two lanes on one clock, with a pace dial and a finish time that rolls over.
NewProFallback Chain
A request passed from model to model like a relay, with why each one failed and a receipt for the detour.
NewProConflict Radar
Parallel agents drawn as a minimap of each file, with the lines where their changes collide marked before merge.
NewProDecision Tree
An agent stuck at a fork lays the whole decision out as a tree: options, the follow-up each one leads to, and the path you pick lit end to end.
NewProScheduled Runs
Agent work packed into usage windows: each day a track as long as its limit, big tasks torn across days, rearranged by dragging.
NewProAgent Ledger
Everything an agent changed, each change with its before, after and an undo.
NewProFan-out Grid
One job split across many workers, every task a cell on a live grid.
NewProAgent Queue
The work waiting for your agents: worker slots, the line behind them and the backlog.
NewProWorkflow Builder
A node canvas for agent workflows that refuses broken wiring as you draw it.
ProAgent Inbox
Inbox of background agent tasks awaiting you.
ProAgent Steering
Send corrections to an agent while it runs.
ProAutonomy Dial
Control how much an AI agent may do alone.
ProScoped Permission Grant
Allow an agent action once, for an hour or always.
ProModel Picker
AI model selector with cost per reply.
ProPrompt Library
Saved prompt templates with fill-in blanks.
ProInline Diff
Accept or reject AI text edits inline.
ProSub-agent Tree
Live tree of an orchestrator and its sub-agents.
ProDelegate Board
Drag tasks onto AI agents to assign them.
ProAgent Lanes
Multi-agent timeline with one lane per agent.
ProAgent Email Draft
AI-written email to review, retone and send.
ProFailure Recovery
Failed agent run with retry and recovery options.
ProAgent Execution Graph
Graph view of an agent run and its branches.
ProTrace Waterfall
Waterfall trace of every call in an agent run.
ProRun Replay
Replay a recorded agent run step by step.
