# AI Agent UI Patterns: 9 Screens for Control | Gr8r Studio > AI agent UI patterns: nine screens that show what an agent plans, does and did, matched to autonomy levels, with a design review checklist. Source: https://gr8rstudio.com/blog/ai-agent-ui-patterns [AI Agents](https://gr8rstudio.com/blog) # AI Agent UI Patterns That Keep Users in Control Tanjim Islam Founder & CEO · 26 Oct 26 · 6 min read Summarise with AI [Summarise with AI: ChatGPT](https://chatgpt.com/?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-agent-ui-patterns)[Summarise with AI: Claude](https://claude.ai/new?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-agent-ui-patterns)[Summarise with AI: Perplexity](https://www.perplexity.ai/search?q=Summarise%20the%20key%20points%20of%20this%20article%20from%20Gr8r%20Studio%2C%20then%20tell%20me%20how%20they%20apply%20to%20my%20product%20or%20workflow%3A%20https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-agent-ui-patterns) On this page 1. [ 01Why do AI agents need different UI from chat?](#why-do-ai-agents-need-different-ui-from-chat) 2. [ 02Which pattern fits which level of autonomy?](#which-pattern-fits-which-level-of-autonomy) 3. [ 03What are the nine AI agent UI patterns?](#what-are-the-nine-ai-agent-ui-patterns) 4. [ 04What does a full agent screen look like?](#what-does-a-full-agent-screen-look-like) 5. [ 05Where does the approval step go?](#where-does-the-approval-step-go) 6. [ 06What should you check in a design review?](#what-should-you-check-in-a-design-review) 7. [ 07Frequently asked questions](#frequently-asked-questions) 8. [ 08Next step](#next-step) 9. [ 09Related reading](#related-reading) This article supports [AI Integrations & Agents](https://gr8rstudio.com/services/ai-workflow-automation)[Discuss your agent](https://cal.com/tanjim-38/30min) ## TL;DR - AI agent UI patterns are the screens that show people what an agent plans, what it is doing, what it did, and how to step in. - Nine patterns cover most products: plan preview, live step log, tool call cards, diff review, pause and take over, undo, activity log, handoff and run summary. - The right set depends on the agent's autonomy. ## Why do AI agents need different UI from chat? A chatbot answers. An agent acts. Once software can search, edit records and send messages on its own, people need to see what it is doing and stop it when it goes wrong. Microsoft's Fluent 2 guidance says an agent should "express its autonomy level by communicating its triggers, access permissions, and action rights" ([Microsoft Fluent 2, Responsible AI](https://fluent2.microsoft.design/responsible-AI/)). Most agent screens skip this. They show a chat bubble that says "Working on it" and then a result. The person has no idea what happened in between, so they either trust it blindly or not at all. The fix is a small set of patterns, matched to how much freedom the agent has. ## Which pattern fits which level of autonomy? Agents work at four levels: suggest, draft, act with approval, and act and report. The more the agent does alone, the more patterns you need around it. The full trust ladder is in [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide). | Pattern | Suggest | Draft | Act with approval | Act and report | | ------------------- | ------- | ----- | ----------------- | -------------- | | Plan preview | | ✓ | ✓ | ✓ | | Live step log | | ✓ | ✓ | ✓ | | Tool call cards | | | ✓ | ✓ | | Diff review | | ✓ | ✓ | | | Pause and take over | | | ✓ | ✓ | | Undo | ✓ | ✓ | ✓ | ✓ | | Activity log | | | ✓ | ✓ | | Handoff | | | ✓ | ✓ | | Run summary | | | | ✓ | ## What are the nine AI agent UI patterns? ### 1\. Plan preview Illustrative diagram based on this article. Not product UI, not real data. Before the agent starts, show its plan as a short list: "Find unpaid invoices over 30 days. Draft a reminder for each. Wait for your approval." Let people edit or remove steps. A plan they can read is the cheapest moment to catch a misunderstanding. ### 2\. Live step log During the run, show each step in plain words as it happens, with the active one highlighted. "Reading 14 invoices" tells people far more than a spinner, and it shows where things went wrong if they do. ### 3\. Tool call cards When the agent uses a tool, such as searching your CRM or calling an API, show a compact card: which tool, what it asked, what came back. Keep the details folded by default. Power users open them; everyone else sees that something real happened. ### 4\. Diff review When the agent changes something that already exists, show before and after side by side, with the changes highlighted. People review a diff far faster than they reread a whole document. ### 5\. Pause and take over Give every run a visible stop button, and let people take over halfway: edit the draft, finish the step by hand, then hand back. An agent you cannot interrupt feels unsafe even when it works. ### 6\. Undo Group everything one run changed into a single action people can reverse. Show what undo will change before they confirm. Even the lowest autonomy level needs this. ### 7\. Activity log Keep a record of what the agent did, when, with which inputs, and who approved it. This is the screen people open when something looks off a week later, and the one auditors ask for. ### 8\. Handoff When the agent cannot finish, it should hand over cleanly: what it did, what it could not do, why, and what the person needs to decide. Then the person picks up from that point instead of starting over. ### 9\. Run summary For agents that act and report, end each run with a short summary: what changed, what needs attention, and a link to the full log. This is what people read over coffee instead of watching the agent work. ## What does a full agent screen look like? Most good agent screens have three zones: a place to ask, a place to watch, and a place to review. Ask is a chat box or command bar. Watch is the plan and step log. Review is the canvas with the diff, the approval buttons and the undo. You can see this layout in [Aurora](https://orbit-agent-workspace.vercel.app/), an AI agent web app built around a workspace where the agent's steps sit beside the work. Built by Gr8r for its own portfolio. Not client work. Aurora, built by Gr8r for its own portfolio. Not client work. Demo data. Screenshot from 6 Nov 2026 checks. The first screen matters too: what the agent shows before anyone has asked it anything. That. ## Where does the approval step go? Put approval in front of anything that costs money, cannot be undone, or goes out under someone's name. Where exactly, and how to stop people approving on autopilot, is in [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent). ## What should you check in a design review? Check that people can see the agent's autonomy level and plan, follow its steps, stop or undo a run, review diffs and an activity log, and get a clear handoff or summary at the end. - The agent's current autonomy level is visible. - The plan shows before the run, and can be edited. - Steps show in plain words while it runs. - There is a stop button on every run. - Changes to existing work show as a diff. - One undo reverses a whole run. - An activity log records actions and approvals. - Failed runs hand off with a clear next step. - Agents that act alone end with a summary. We design these screens as part of our [AI product design](https://gr8rstudio.com/services/product-design) work. If the agent behind them still needs building, see [AI agent development](https://gr8rstudio.com/services/ai-workflow-automation). ## Frequently asked questions ### What is agentic UI? Agentic UI is the interface for AI that takes steps on its own, such as searching, editing records or sending messages. It shows the person what the agent plans to do, what it is doing now, what it did, and where they can step in. ### Should an AI agent live in a chat or a canvas? Use chat for open questions and quick requests. Use a canvas or workspace when the agent produces something people need to review, edit or compare, such as a document, a table or a plan. Many products combine both: chat to ask, canvas to work. ### How do you show an AI agent's plan? Show the plan as a short list of steps in plain words before the agent starts, and let the person edit or remove steps. During the run, tick steps off and show which one is active. ### When should an AI agent ask for approval? Ask before anything that costs money, cannot be undone, or goes out under someone's name. Let the agent act alone on cheap, reversible, visible work, with an undo and a log. ### How do you design undo for an AI agent? Group everything one run changed into a single action people can reverse, show what will be undone before they confirm, and keep the window long enough for someone to notice a mistake. For actions that cannot be reversed, ask for approval first instead. ## Next step [LedgerOS](https://ledger-os-v2.vercel.app), a finance operations app Gr8r built, uses the status pattern in its sidebar: five agents, each with a label such as Monitoring, Forecasting or Active. Built by Gr8r for its own portfolio. Not client work. It runs on demo data, so it shows the screens, not results. If you want help with this, [book a 30 minute call](https://cal.com/tanjim-38/30min). ## Related reading - [AI product design](https://gr8rstudio.com/services/product-design) - [AI agent development](https://gr8rstudio.com/services/ai-workflow-automation) - [designing the review step before an AI agent acts](https://gr8rstudio.com/blog/design-review-step-ai-agent) - [AI UX design: the seven screen states](https://gr8rstudio.com/blog/ai-product-design-guide) - [how to build AI agents for business](https://gr8rstudio.com/blog/build-ai-agents-for-business) - [MVP examples from five builds you can open](https://gr8rstudio.com/blog/mvp-examples-in-house-builds) _Tanjim Islam is the founder of Gr8r Studio, a digital product and AI engineering partner for scaleups and enterprise teams, founded in 2023._ Written by Tanjim Islam Founder & CEO Share [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-agent-ui-patterns)[X](https://x.com/intent/post?url=https%3A%2F%2Fgr8rstudio.com%2Fblog%2Fai-agent-ui-patterns&text=AI%20Agent%20UI%20Patterns%20That%20Keep%20Users%20in%20Control) This article supports [AI Integrations & Agents](https://gr8rstudio.com/services/ai-workflow-automation)[Discuss your agent](https://cal.com/tanjim-38/30min) ## Keep reading - [ AI Agents 26 Oct 26 7 min read How to Build AI Agents for Business WorkflowsHow to build AI agents for business: pick one task, write a one page spec, limit the tools, build a test set, design the screens and run it with a plan.By Tanjim Islam](https://gr8rstudio.com/blog/build-ai-agents-for-business) - [ AI Agents 26 Oct 26 7 min read AI Agent, Chatbot or Workflow: Which Do You Need?AI agent vs chatbot vs workflow: ask who decides the next step and who starts the work, then use the decision grid and ten classified examples to pick one.By Tanjim Islam](https://gr8rstudio.com/blog/ai-agent-vs-chatbot) - [ AI Agents 26 Oct 26 7 min read What Drives the Cost of AI Agent DevelopmentWhat drives AI agent development cost? The seven drivers behind any agent quote and timeline, why published ranges disagree, and what to ask.By Tanjim Islam](https://gr8rstudio.com/blog/ai-agent-development-cost) ## Book a call with our CEO. Pick a time that suits you. A product idea or a workflow that slows your team down: a clear problem is enough, no full specification needed. 5.0 [11 verified reviews Read them on Contra ](https://contra.com/tanjimislam/reviews) - Tanjim is a great designer without any doubt. I love the way he heard my project details and created the better design I was looking for. I highly recommend Tanjim to other Business owners. Thanks Tanjim 🫶 Muhammad Talha · Founder, SetFrame - Amazing work as always! Md Nomail Hossain Samir · Co-founder, Remarked Design - It was really amazing to work with Tanjim, superfast delivery and amazing work Dhruval Golakiya · Founder, Ryplix - It was really amazing to work with Tanjim, Superfast delivery and amazing work, highly recommended for any website design and development Dhruval Golakiya · Founder, Ryplix - Tanjim and his team did a great job on the hero section I needed in Framer. Super easy to work with and delivered exactly what I had in mind. Highly recommeded! Muhammad Talha · Founder, SetFrame - Tanjim is very good at what he does & super easy to work with. He is a genuinely good guy. I highly recommend him! Md Nomail Hossain Samir · Co-founder, Remarked Design - Tanjim is a very talented designer who delivers high-quality work with precision. I hired him to handle client projects for my agency & he exceeded expectations every time. If you need an efficient designer, he is the one to go for! Md Nomail Hossain Samir · Co-founder, Remarked Design - Every project I’ve entrusted to Tanjim has exceeded expectations. If you're looking for a top-tier designer who consistently delivers exceptional work, Tanjim is the one. Looking forward to working together on more projects 🤝 Md Nomail Hossain Samir · Co-founder, Remarked Design - Tanjim is an excellent guy. He is super professional in his work and always goes the extra mile. If you're looking for any UI or Framer work, I highly recommend him! Md Nomail Hossain Samir · Co-founder, Remarked Design - Tanjim is the founder of Gr8r studio and his Framer expertise is exactly what you need if you are looking for design and development work. Tanjim goes the extra mile on his projects and his attention to detail makes every website stand out I collaborated with Tanjim on a project and he is my main choice for a design partnership. Miguel Queirós · Collaborator Your call is with Tanjim Islam, our CEO A free 30-minute conversation about your problem, not a sales pitch. Calendar not loading? [Open the booking page](https://cal.com/tanjim-38/30min) Ask Ali