Sandbox Preview

Sandbox preview is an AI agent UX pattern that dry-runs a plan (showing intended side effects, diffs, or receipts) before execution. Users inspect what would change in a safe staging context, then approve, edit, or cancel the real run.

Share

Interactive demo

Agents

Acme renewal

Ready to run. Review what will happen first.

3 steps planned

Calendar, CRM update, and optional email draft.

Overview

The design problem

How might we design sandbox preview so people can trust and act on AI output?

Use this pattern

When this pattern fits

  • Essential for agentic automation, bulk admin tools, and cross-app workflows where users need to trust a manifest of effects before granting execution rights.

Avoid this pattern

When to skip or lighten it

  • Read-only assistants with no side effects to preview.
  • Trivial single-line edits where a full sandbox is slower than an inline diff.
  • When the sandbox cannot faithfully mirror production permissions, false previews are worse than none.

States

State model coming soon

Key UX elements

Key UX elements coming soon

Anti-patterns to avoid

  • Previews that omit irreversible effects present in the real plan.

  • Execute buttons that skip sandbox after the first approval forever.

  • Sandboxes that mutate production data “just a little.”

  • Walls of logs with no human-readable summary of blast radius.

How products use it

ProductImplementation
Terraform planInfrastructure dry-run listing creates/updates/destroys before apply.
CI dry runsPipeline simulation or plan jobs before merging agent changes.
Email merge previewsSample personalized messages before bulk send.
Agent plan-then-act modesVisible plan and file diffs prior to apply in coding agents.

Implementation

Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.

Generate a production-ready implementation of the "Sandbox Preview" AI interface design pattern.

Pattern Definition:

Frequently asked questions

What is sandbox preview for AI agents?

Sandbox preview is a dry-run of the agent’s plan that shows intended side effects (diffs, recipients, resources) before anything irreversible runs in production.

How does it differ from suggest / confirm / execute?

Suggest/confirm/execute is the autonomy policy. Sandbox preview is the artifact users review during confirm, what would happen if they approve.

What should a preview always include?

Targets, actions, reversible vs irreversible flags, and estimated cost or blast radius. Link to the exact payload when possible.

Is a diff enough?

For code, often yes. For email, purchases, or infra, show the semantic receipt (who/what/how much) not only raw blobs.

Weekly AI UX in your inbox

Weekly AI interface UX notes and resources on Substack, no spam, unsubscribe anytime.

Subscribe on Substack