AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Collab

Human in the loop

Require a person to approve, edit, or reject before the model sends, buys, deploys, or otherwise does something hard to undo. The model drafts. The human decides. Use it when a wrong action costs real money, trust, or safety.

Interactive demo

Agent

I drafted a follow-up for trial customers. Approve before I send it.

Needs your approval

Send this email to 127 recipients?

SubjectTrial ends in 7 days

Hi {{first_name}}, your trial ends in 7 days. Renew now to keep your workspace and data.

Confirmation is required for audiences over 25 people.

Overview

How might we preserve useful autonomy while keeping consequential actions inspectable, editable, and attributable?

When to use

  • Essential for email clients, code generation tools, and applications where human oversight of AI actions prevents errors and builds trust.

When to skip

  • Low-stakes, easily reversible suggestions where approval friction slows the user more than it protects them.
  • Fully autonomous monitoring or batch jobs where the product already has hard budgets, rollback, and clear failure alerts.
  • Every micro-edit in a creative canvas; prefer selective gates on publish, send, or spend instead.

States

Design the whole control model, not only the confirmation dialog.

  1. 01

    Proposed

    The AI has staged an action. Nothing consequential has run yet. The proposal is waiting for a human decision.

  2. 02

    Under review

    The full payload is visible and inspectable: action, target, content, and impact before any side effect.

  3. 03

    Editing

    The person changes the proposal in place. Consent will apply to the edited payload, not the original draft.

  4. 04

    Approved

    Explicit confirm authorizes execution. Only after this step may the product send, apply, spend, or deploy.

  5. 05

    Rejected

    Deny or discard stops the action. No side effect runs, and control stays with the human.

  6. 06

    Executed

    The approved action has completed (or failed after approval). Outcome is separate from the decision itself.

Key UX elements

The parts that must be present for this pattern to work.

Action

Say exactly what will happen.

Use an active verb and a specific object so people know exactly what they are authorizing.

Scope

Expose the target, quantity, and boundaries.

Summarize what is included and give a path to inspect or edit the underlying items before approval.

Impact

Describe who and what will change.

Use plain language for cost, visibility, permanence, and affected people or systems. Do not rely on a risk color alone.

Reason

Explain why approval is required now.

Connect the interruption to a rule, threshold, or risk class so the pause feels predictable rather than arbitrary.

Alternatives

Keep edit and deny paths first-class.

Approval is meaningful only when someone can change the scope or stop the action without pressure or penalty.

Recovery

Set expectations before execution.

State whether the action can be cancelled, undone, or only remediated after it begins.

Rules

  • Silent auto-send or auto-apply with only a buried undo.

  • Approval UI that does not show the exact payload (email body, diff, amount) being approved.

  • One global “always allow” that never re-prompts for higher-risk actions.

  • Approval after the side effect already happened.

Evidence

ProductImplementation
GitHub CopilotSuggests code in-editor; human accepts, rejects, or edits before commit.
Gmail Smart ComposeInline completions stay draft until the user sends the message.
ChatGPTAgent and connector flows ask before sending email or taking external actions.
GeminiApproval cards and send gates for actions that leave the chat surface.

Real-world examples

See all

FAQ

What is human-in-the-loop AI UX?

Human-in-the-loop UX means the AI proposes or stages an action and a person must review and approve before it executes. It is the primary control pattern for email send, purchases, code apply, and other irreversible or high-cost outcomes.

When should I require human approval for AI actions?

Require approval when the action is hard to reverse, spends money, contacts other people, changes production systems, or carries compliance risk. Skip or lighten approval for low-stakes, local, easily undone edits.

How is human-in-the-loop different from autonomy budgets?

Human-in-the-loop gates a specific action with an explicit review. Autonomy budgets bound how long or how many steps an agent may run unattended before pausing. Many agent products need both: budgets for the run, approval for high-impact steps.

What should an approval card show?

Show the exact action, target, and content (recipient, diff, amount, tool) plus clear Confirm and Cancel. Hide nothing the user is authorizing. Optional edit-in-place beats approve-then-fix.

Are approval workflows a separate pattern?

No. Single confirm cards and multi-step reviewer queues are variants of Human in the Loop. Use a simple confirm for solo consumer tools; use formal approval steps when teams need who-approved-what, reject with feedback, or escalation.