Designing Interfaces That Act: The Agentic UI Guide

In March 2025 I rebuilt the booking helper for a home services company in Porto. The team ran 60 staff and handled 400 booking requests per week. The old chat answered questions about hours and prices. The new agent acted on requests. It checked the calendar, held slots, sent SMS confirmations, and issued refunds under 50 euro with approval. Phone load at reception dropped by half in six weeks. Slot fill rose from 78 to 94 percent. The model stayed the same. I changed the interface around it.

I design agent interfaces that take action and report back. Visitors grant permission, watch work land step by step, and correct the agent midstream. Progress states show work in flight. Confirmations gate money and messages. Undo reverses misclicks. Fallbacks rescue typos and dead ends. The sections below show each piece with screens, code shapes, and checks I run before I ship.

From chatbots to actors: what changed

Chatbots read and reply. Agents read, plan, call tools, and report. I watched the gap on the Porto build. The old bot answered "Do you have Friday slots" with a price list. The visitor still called reception to book. The new agent checked three calendars, held one slot for 10 minutes, and asked for approval to confirm.

Three shifts drive the design. First, initiative moves. The agent starts work after one short prompt. It asks one follow up at most, then proceeds. I give it three tools on day one: read schedule, hold slot, send confirmation. I add tools after the first three run clean. Second, time stretches. A chat reply takes two seconds. An agent run takes 20 seconds to three minutes. Visitors wait when they see steps land. They leave when they see dots. I show each tool call as a small card with a plain label and a timestamp. Third, failure costs money. A wrong sentence wastes attention. A wrong booking wastes a chair and a refund. I gate every costly call behind a human tap and log actor name with time.

I size the job before I draw screens. I list the five actions visitors request most. I mark which actions read data and which actions change data. Read actions run freely. Change actions need confirmation or undo.

The pattern library: progress, confirmation, undo, fallback

I detailed three conversion patterns with live numbers from a dental chain in my post Agentic UI Patterns That Actually Convert. That post covers progressive disclosure, visible tool calls, and graceful fallback with screens and metrics I measured. This guide builds on that base and adds the two pieces an acting interface needs: explicit confirmation and true undo.

Progress tells visitors what runs now. I stream server sent events from a Next.js route. Each event carries a short label I wrote by hand. "Checking Friday slots." "Holding 10:30 for 10 minutes." "Sending SMS confirmation." I cap visible steps at four per turn. Deeper work collapses into one card. Tool call abandonment on the Porto build fell from 41 to 9 percent after I added these cards.

Confirmation gates change. I open a sheet for every booking, payment, refund, and outbound message. The sheet names recipient, amount, time, and source. It offers three buttons: Approve, Edit, Cancel. Approve runs the tool. Edit returns focus. Cancel drops the hold. I require confirmation for any action above zero cost. I log actor, timestamp, and rule id with each approval.

Undo reverses the misclick. I keep a 10 second undo toast after every reversible action. "Booked Friday 10:30. Undo." The toast holds focus for keyboard users and announces through a live region for screen reader users. I keep a history list with one tap revert for bookings and holds. I mark irreversible actions in plain words before they run. "This refund sends money. You cannot undo it."

Fallback rescues the miss. I run a three step ladder. Step one matches typos with fuzzy search and asks "Did you mean ClinicPlus" with two chips. Step two offers the three most common actions as chips. Step three names a human and a time. "Marta from reception calls back within one working hour." Level one misses resolve inside chat 80 percent of the time on my builds. Level three callbacks convert at 55 percent the same day.

Trust mechanics: glass box over black box

Agents earn trust when visitors see sources, steps, and limits. I show where each answer came from, what the agent did, and what it cannot do. "Matched from rate card dated March 2025." "Calendar read 20 seconds ago." I avoid scores without sources. I list limits on the start screen. "I book visits and answer price questions. I pass medical questions to staff."

I explored confidence display, undo trails, and intent forks in depth in my post Glass-Box AI: Showing Model Confidence So People Trust It. That post holds my full argument on why visible reasoning beats hidden reasoning. I apply its rules here without repeating them.

Accessibility pass for agent UI

I run an access pass on every agent screen before I ship. Agent UI fails access users first because work happens over time and across cards. I fix time, focus, and announcements.

I announce progress through an aria live polite region. The region speaks short updates. "Checking calendar." "Slot held." "Message sent." I keep announcements under 12 words. I move focus into the confirmation sheet when it opens and return focus to the trigger when it closes. I trap focus inside the sheet while it stays open. Keyboard users approve with Enter and cancel with Escape.

I size targets at 44 pixels minimum and keep contrast at 4.5 to 1 for body text. I pair every color signal with words. A green check also says "Held." A red flag also says "Failed. Retry or ask Marta." I honor reduced motion and replace animated progress with static text updates when users ask for less motion. I label every icon button by name. I give each card a heading so screen reader users jump by headings. I log access gaps as defects in the same table as agent misses.

Figma to ship workflow with v0 and decision trees

I start in Figma with a decision tree, not with screens. I draw five node types: trigger, read, check, act, report. Each act node names its confirmation rule. Each check node names its fallback branch. The Porto tree held 14 nodes. I walk the tree with the owner. We cut two acts the owner did not want the agent to touch.

I draw five states for every act: idle, working, waiting for approval, done, failed. Working shows progress cards. Waiting shows the confirmation sheet. Done shows receipt with time, reference, and undo. Failed shows cause in plain words plus the next offer. "Calendar timed out. Retry or ask Marta to call back." I prototype the loop with clickable chips before I write code.

I generate the first UI pass with v0 from the Figma frames. I prompt with component names, state list, and copy samples. I keep the output tight: chat thread, progress card, confirmation sheet, toast, history row. I paste the output into a Next.js branch and wire it to routes. Server sent events drive progress cards. A Postgres table named agent audit logs every tool call with session id, actor, tool name, and policy decision. A flag gates the flow to 5 percent of traffic for one day. I watch error rate in Sentry, failed payments in Stripe webhooks, and new support threads. I open to full traffic after a clean day. I read 20 transcripts weekly and fix the top miss tag. That cadence lifted task completion on the Porto build from 8 to 24 percent in eight weeks.

Closing

I shipped the Porto agent with this library. Progress cards show work. Confirmations gate money. Undo reverses misclicks. Fallbacks hand visitors a smaller working offer. Access checks keep the flow open to keyboard and screen reader users. Trees keep scope honest. If your agent acts without clear UI, request an AI UX audit and I will map every action to a visible pattern with screens and checks.