Plan
Numbered steps the agent proposes before it starts, each with details, and buttons to approve or edit.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/plan-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/plan-default.json
Connect an agent plan to live task progress in React →
Usage & API
Example
import { Plan } from "@/components/ai/plan-default"
<Plan
title="…"
steps={[]}
state="proposed"
/>Props Plan
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
steps | PlanStep[] | Required |
state | "proposed" | "approved" | Required |
onApprove | () => void | Optional |
onEdit | () => void | Optional |
defaultOpenId | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Each step is a button showing its index, the title, and a chevron. defaultOpenId opens that step on first render. The open panel shows detail, then files as a wrapping row of monospace paths. Only one id stays open. The proposed footer has Approve, which calls onApprove, and Edit plan, which calls onEdit. Neither button is hidden if the callback is missing, so pass both if the buttons should do something. The approved footer replaces them with a check and the line Approved, starting on step 1. There is no text field on this layout. Editing is entirely your screen, opened from onEdit.
Example
import { PhasePlan } from "@/components/ai/plan-phases"
<PhasePlan
title="…"
phases={[]}
approved={true}
onApprove={() => {}}
onRevise={() => {}}
/>Props PhasePlan
| Prop | Type & description | Required |
|---|---|---|
title | string | Required |
phases | PlanPhase[] | Required |
approved | boolean | Required |
onApprove | () => void | Required |
onRevise | (feedback: string) => void | Required |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
The eyebrow reads Proposed approach, or Plan approved when approved is true. Phases are numbered in a vertical list, with scope beside the title and detail under it. Until approved, the footer offers Start, which calls onApprove, and Request changes, which opens the feedback form. The form's submit is disabled while the field is empty or only whitespace. A successful submit calls onRevise with the trimmed string. The component does not rewrite the phases from that string. When approved is true and the form is closed, both buttons disappear and the footer reads Starting the plan. If the form is already open, it stays until Send feedback or Cancel, because the form takes the footer's place.
Choosing a layout
Use a plan when the agent is about to do work the person should accept first, and the interesting object is the sequence, not a single command. A tool approval asks about one shell command or one tool call. A question asks for a choice among options. A plan asks for a yes on several steps, with enough detail that the yes is informed. Put it in the reply after the agent has said it has not changed anything yet. Approving does not start the run. You start it when onApprove fires, or when you set state to approved and act on that.
Use the step list when each step may name files and the reader will open one step at a time. Use phases when the work splits into larger stages and a revision is a sentence of feedback, which onRevise receives, rather than a jump back into an editor. A todo list is the later view, the same work being ticked off. A step timeline is the run log after the work has started, with durations. Leaving the plan on screen after approval is reasonable. The approved footer is designed to stay in the thread as the record of the yes.
Does Approve start the agent?
Approve does not start the agent. It calls onApprove and, once you pass state approved, the step plan only changes its footer. Start on the phase plan does the same with the approved boolean. The files in a step are labels, not a patch, and onRevise receives feedback text without applying it. The run begins in your own code.
Can more than one step be expanded?
Not on the step plan. It keeps a single open id, seeded from defaultOpenId, and opening another step closes the first. Phase rows are not collapsible at all. Title, scope and detail are visible together for every phase.