How to Design Human-in-the-Loop UX

Agents that only answer can hide behind a shrug. Agents that act cannot. The moment your product can send mail, spend money, write to a calendar, or change production state, the design question shifts from "is this response helpful?" to "who owns the final click?"

Human-in-the-loop checkpoints are that click. Not a disclaimer. Not a buried undo. A visible gate where a person reviews the exact action before it becomes irreversible.

This guide is a binder for that job. It stitches the Trust Scaffolding and Agentic UX frameworks, the core human-in-the-loop patterns, and the live ChatGPT vs Gemini vs Perplexity comparison into one build playbook. Each pattern below shows a shipped product shot, then a referral to try the interactive demo on the pattern page.

What human-in-the-loop actually means

Human-in-the-loop is an AI UX pattern where the model proposes or stages an action, and a person must review and approve before it executes. The AI can draft, plan, and prepare. The human owns send, purchase, deploy, or any other irreversible effect.

Two frameworks own different halves of this problem. Trust Scaffolding treats checkpoints as pre-commit control: visible evidence, reversible actions, and calibrated uncertainty before side effects leave the product. Agentic UX treats them as an autonomy gradient: suggest, confirm, then execute, with consent scoped by action risk, not by a single global toggle.

If you only read one distinction: HITL gates a specific action with explicit review. Autonomy budgets bound how long or how many steps an agent may run unattended. Most agent products need both.

The core pattern: require approval before the model acts

Start with the plain checkpoint. AI prepares the work. A person confirms, edits, or rejects. This is table stakes for email clients, code tools, and anything where auto-apply feels like a betrayal. Gemini's Gmail card is the clearest shipped version: Cancel and Send as co-equal choices over a real draft.

Real-world example

Gemini · Native draft card. Cancel beside Send. Edit in Gmail as the escape hatch. Full teardown

Pattern: Human in the loop, try the interactive demo on the pattern page.

The presence of an override changes the relationship even when users rarely click it. Design the gate so the payload is inspectable. Empty confirm dialogs do not count.

Pattern spine: gates, consent, and escalation

One confirm button is not a system. Shipped products usually compose HITL with three siblings. Each block below shows the product evidence, then a pattern referral for the matching demo.

1. Approval workflows

Formalize who approves, what is shown, and what happens on reject. Gemini keeps a compact final gate after drafting so Send stays one deliberate click.

Real-world example

Gemini · A short summary card keeps the last human gate obvious after the draft is ready. Full teardown

Pattern: Approval Workflows, formalize who approves, what is shown, and what happens on reject.

2. Granular consent

Split tools into risk buckets (read-only vs write/delete) with per-tool Allow controls. Perplexity front-loads this before any agent run starts.

Real-world example

Perplexity · Read vs write buckets with per-tool Allow. Consent before the run, not after the mess. Full teardown

Pattern: Granular Consent, split read vs write risk with per-tool Allow before any agent run.

3. Suggest / confirm / execute

Stage autonomy as a ladder, not a switch. ChatGPT clarifies first, then stages an editable email card before any send handoff.

Real-world example

ChatGPT · Suggest and stage in an editable card. Confirm only when the payload is visible. Full teardown

Pattern: Suggest / Confirm / Execute, stage autonomy as suggest, confirm, then execute once the payload is clear.

4. Human handoff when the agent is out of depth

Approval keeps humans in the loop for actions the agent can still stage. Handoff transfers the whole job when the agent cannot continue. ChatGPT states the limit, asks a tight questionnaire, then hands execution back to the user.

Real-world example

ChatGPT · Say the limit in line one, then replace the missing action with a concrete questionnaire. Full teardown

Pattern: Human Handoff, transfer the whole job when the agent cannot or should not continue.

Three product bets: when consent happens

The same trust job produces three different interfaces. Steal the gate that matches how often, and how deeply, your agent touches sensitive tools. Full table and steal rules live in the human-in-the-loop comparison.

ChatGPT: clarify conversationally, then hand off

When ChatGPT cannot complete an action, it states the limit, asks structured questions, and hands the final step to a trusted external surface. When it can draft email, Send routes through Gmail, Outlook, or the user's default mail app. It never pretends the reservation is done.

Real-world example

ChatGPT · Useful partial value, then a real handoff. No fake booking confirmation. Full teardown

Steal this when you cannot complete the action yet but still need to keep the user moving.

Gemini: draft in the destination UI, one deliberate Send

Gemini clarifies recipient, purpose, and tone up front, then drafts inside a native Gmail card. The product bet is ecosystem depth: approval feels native because it reuses the app users already trust.

Real-world example

Gemini · Clarify before draft. Destination app language after. Never auto-send. Full teardown

Steal this when you can draft into a real destination app the user already knows.

Perplexity: permissions before the agent runs

Perplexity surfaces connector chips in the composer when a query touches personal data. Once tools are allowed, the agent acts without a second per-message gate. Consent is a matrix, not a chat confirmation.

Real-world example

Perplexity · Surface connectors in context when the query implies personal data. Full teardown

Steal this when agents need standing access to sensitive tools like email.

Gate before the run or after the draft?

This is the highest-leverage product decision in the whole pattern family.

• Gate before the run when the agent needs standing access to sensitive tools. Perplexity's matrix is the reference.
• Gate after the draft when each action is a one-off with a clear preview. Gemini's Send and ChatGPT's draft card are the reference.
• Use both when long agent runs touch tools and still produce consequential artifacts. Budget the run. Approve the blast radius.

If you ship only a global "always allow," you are buying convenience with silent risk drift. Re-prompt when the action class gets more dangerous.

Decision checklist

Prefer selective gates on publish, send, or spend over constant confirm spam. Friction that protects trust is good. Friction that teaches users to click Approve blind is not.

Anti-patterns to refuse

• Silent auto-send or auto-apply with only a buried undo
• Approval UI that does not show the exact payload
• One global "always allow" that never re-prompts for higher-risk actions
• Approval after the side effect already happened
• Fake completion when the agent cannot act (implying a booking is done)
• Cheerful failure copy that hides missing permissions or failed tool calls

These show up as Trust Scaffolding failure modes under names like opaque automation, trust theater, and bundled consent. If your gate cannot explain what changes, it is not a gate.

What to ship next

Pick a posture from the comparison, then wire the pattern spine into your agent flow. Start with one irreversible action (send, spend, or write), show the full payload, and measure how often users edit before confirming. That edit rate is your trust signal.

1. Read the HITL comparison and steal one rule that matches your agent's access model.
2. Spec the primary checkpoint with the human-in-the-loop demo as the interaction reference.
3. Add consent granularity or approval process only if standing tools or multi-step review demand it.
4. Cross-check against Trust Scaffolding and Agentic UX so checkpoints sit inside a wider autonomy and provenance story.

Explore related reference

• Human-in-the-loop UX compared
• ChatGPT HITL teardown
• Gemini HITL teardown
• Perplexity HITL teardown
• Human in the loop pattern
• Approval workflows pattern
• Granular consent pattern
• The Trust Stack
• Designing for AI Agents