Plan & Execute

Plan & Execute is an AI agent UX pattern where the agent first breaks a complex goal into an explicit, ordered list of steps, then works through that plan sequentially while showing progress. Users can review, edit, or approve the plan before execution starts, which improves reliability and gives visibility into a multi-step task before any action runs.

Share

Interactive demo

Prep Friday customer demo

I broke your goal into 4 steps. Review the plan, then run when ready.

Plan ready

Friday customer demo


1Pull latest product slides from Drive
2Draft demo script with key talking points
3Schedule dry run with sales team
4Send calendar invite to customer

Overview

The design problem

How might we show what an agent will do before it acts, so people can catch a wrong approach early and follow progress through a multi-step goal?

Use this pattern

When a goal needs ordered steps with review before run

  • Multi-step agent tasks where users benefit from seeing intent before side effects start.
  • Long-running workflows (research, prep, ops) where progress must stay legible step by step.
  • Products where catching a wrong plan early saves time, cost, or trust.
  • Agents paired with tools or writes where "what will happen" should be inspectable first.

Avoid this pattern

When a plan adds friction without real visibility

  • Single-step requests where a plan adds a review step with nothing to actually review.
  • Latency-sensitive interactions where users want an immediate answer, not a proposal to approve first.
  • Highly exploratory tasks where the right steps only emerge as the agent learns from early results.

States

Design the plan lifecycle, not only a todo list that appears after work has already started.

Plan and execute lifecycle

Loading diagram…

  1. 01

    Goal received

    The user states a complex goal. The agent acknowledges scope before proposing steps.

  2. 02

    Planning

    The agent decomposes the goal into an ordered list. Nothing consequential runs yet.

  3. 03

    Proposed

    The full plan is visible: numbered steps, scope title, and a clear path to start or edit.

  4. 04

    Editing

    The person adjusts, reorders, or removes steps. Execution will follow the edited plan.

  5. 05

    Running

    Steps execute one at a time. Current step and completed count stay visible in the same view.

  6. 06

    Complete

    All planned steps finish. Outcome is summarized; the executed plan remains inspectable.

Key UX elements

The parts that must be present for plan-then-execute to feel trustworthy.

Goal

Anchor the plan to the user ask.

Show the original goal near the plan so people can verify the breakdown matches what they wanted.

Steps

List ordered steps with clear labels.

Numbered, scannable steps beat a paragraph of intent. Each line should name one concrete action.

Review

Pause before execution starts.

The plan stays editable or approvable until the user explicitly starts the run.

Start

Make run explicit and primary.

One clear CTA ("Run plan", "Start") commits to the visible sequence. Do not auto-run without consent.

Progress

Check steps off in place.

The same list updates as work proceeds: active step, done count, no silent deviation from the plan.

Outcome

Close with what finished.

Summarize results when the plan completes. Keep the step history available for audit.

Anti-patterns to avoid

  • Showing a plan once and then silently deviating from it during execution with no updated view.

  • Plans so granular they bury the real decision points under dozens of trivial sub-steps.

  • No way to edit or reject individual steps, only accept-all or cancel-all.

  • Re-planning from scratch on every minor failure instead of adjusting the remaining steps.

How products use it

ProductImplementation
AutoGPTGenerates a task list from a goal and executes items sequentially with visible state.
CrewAIAssigns planned sub-tasks across role-based agents with a defined execution order.
LangChain (plan-and-execute agents)Separates a planner step from an executor loop that carries out each planned action.
Cursor AgentDrafts a todo-style plan for multi-file tasks before making edits.

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 "Plan & Execute" AI interface design pattern.

Pattern Definition:

Frequently asked questions

What is the Plan & Execute pattern in AI agents?

Plan & Execute means the agent first produces a visible, ordered breakdown of a goal into steps, then works through those steps one at a time, updating status as it goes. It separates "what will happen" from "doing it" so users can review intent before commitment.

Why show the plan instead of just running the task?

Showing the plan lets users catch a wrong approach before any side effects occur, and it gives a legible progress model during long-running tasks. It also makes failures easier to diagnose since users can see which step broke.

Should users be able to edit the plan before execution?

Yes, for anything consequential. Letting users reorder, remove, or edit individual steps before execution turns the plan into a real checkpoint rather than a formality, and reduces wasted runs on the wrong approach.

Weekly AI UX in your inbox

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

Subscribe on Substack