Context

Agents no longer just answer questions. They post to Slack, refund customers and send reports — and the moment software acts on someone's behalf, the design problem changes from "show the answer" to "earn the trust". Most chat kits stop at the message bubble. AI Agent UI is built around one rule instead: the agent stops before anything risky and shows exactly what will happen, to whom, and how long it can be undone. I designed it, built it and sell it — $39 on Gumroad.

Approvals queue — the agent asks before it acts, with an undo window and slide to approve
One system on two platforms — 60 web screens and 24 iOS screens
The core flow on iOS — tap the card, slide to approve, confirm with Face ID, undo for five minutes
Approve from the lock screen — notifications, Live Activity, Dynamic Island and widgets
Inside the product

The web app is a working agent workspace, not a set of marketing frames: start a chat, watch the agent work step by step, open its draft in a side panel, follow a paused run to the exact step waiting for a person, and see what every agent costs. Each screen carries the same approval card, so the rule is visible wherever the agent wants to act.

New chat — the agent says what it can do and that it asks before sending anything
Chat — three visible steps, a plain answer, and an approval card before anything goes to Slack
Draft panel — the agent's note opens beside the conversation, ready to review before approval
Run detail — the run is paused at the step waiting for a person, and nothing is sent if it times out
Costs — spend per day stacked by agent, budget and the most expensive runs
Usage — credits per day with a month-end pace and per-person limits
How it is built

Everything sits on 140 variables with Light and Dark modes, so a theme switch never means a second set of screens. Forty-eight components carry 303 variants. A contrast audit of Dark mode found 106 failing text pairs; I retuned the text tokens and added two neutral steps until both themes passed WCAG AA.

The same run in Light and Dark — one token set, two modes
Foundations — 140 variables, 27 text styles in Geist, 110 icons, spacing and radius
Components — agent steps in every state, buttons, chips and avatars
What makes it different

My first mobile version was competent and forgettable, so I threw it away and rebuilt it from two directions — action-first and dark-bold — merged into one system. That is where the Approval Card, Slide to approve and the undo countdown came from: a single deliberate gesture for anything that leaves the app. The kit also draws the unhappy paths — a step that times out, a run that fails, a retry — because that is where trust is actually decided.

Every state, not just the happy path — chat, runs, costs, approvals, integrations, usage
84 screens, 48 components, 303 variants, 12 prototype flows, documentation on every page
Results
  • 84screens for web and iOS
  • 303variants across 48 components
  • 12clickable prototype flows
Tashkent, Uzbekistan A'zamjon Ismoilov — 2026