Launch priceOne payment

AI Agent UI Components for React

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.

15 components, 1 free. React, TypeScript and Tailwind CSS, light and dark.

All AI UI components

Agent Workspace

BlockPaid

A whole agent screen: task in, plan, tool calls, approval and a summary out.

Included with lifetime access

Agent Run Status

Paid

The top of a run: state, current step, a live clock, and Pause and Stop.

Included with lifetime access

Task Plan

Paid

The agent's plan as steps that tick off live, with the risky one flagged ahead.

Included with lifetime access

Tool Call

Free

One tool the agent used: what it sent, what came back, how long it took.

Approval Request

Paid

The agent stops and asks first, showing the exact thing it wants to do.

Included with lifetime access

Agent Timeline

Paid

Everything a run did, in order: follow it live, or inspect it step by step.

Included with lifetime access

Run History

Paid

Every past run: how it ended, how long it took, what it cost.

Included with lifetime access

Run Summary

Paid

The receipt at the end: the outcome, what changed, what it made, the cost.

Included with lifetime access

Agent Settings

Paid

Set up an agent: model, instructions, limits, and what each tool may do.

Included with lifetime access

Failure Recovery

Paid

What failed in a run, every attempt so far, and only the safe ways out.

Included with lifetime access

Agent Execution Graph

Paid

A run drawn as a graph: dependencies, parallel branches and the path it took.

Included with lifetime access

Trace Waterfall

Paid

Every call in a run on one time axis, with the slowest path marked.

Included with lifetime access

Run Replay

Paid

Step through a recorded run: input, output and state at every event.

Included with lifetime access

Agent Permissions

Paid

What an agent asked for, what it is allowed, and the change before you save.

Included with lifetime access

Dry-Run Preview

Paid

Everything an agent would change, field by field, before any of it happens.

Included with lifetime access