Confirmations & Plans

Pattern

Plan

A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.

BeginnerNov 2025View the full pattern on desktop
Plan preview

Problems solved

  • Stream AI-generated execution plans into a collapsible plan UI
  • Convert plan data parts back into model-visible text for edits
  • Generate structured plan updates through a dedicated tool
  • Show shimmer loading while plan steps arrive

Use cases

  • Project planning copilots
  • Marketing campaign plan builders
  • Technical migration checklists
  • Task breakdown assistants

AI SDK APIs

ToolLoopAgentcreateUIMessageStreamcreateUIMessageStreamResponseconvertToModelMessagesvalidateUIMessagesstreamTexttoolgateway

Tags

aiplanai-sdkstreamingcollapsibletool-loop

Requirements

Node.js
24+
Memory
512MB
Other
  • OpenAI API key

Environment variables

External services

openai

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View the pattern on desktop

Related patterns

Tool Approval preview

Tool Approval

Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.

aitool-approval+6
View pattern →
Agent Sheet Artifact preview

Agent Sheet Artifact

Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.

aispreadsheet+5
View pattern →
Agent XLSX Artifact preview

Agent XLSX Artifact

Download-first Excel artifact pattern. The agent streams CSV through a tool call, renders a spreadsheet preview, and exports a real .xlsx file with SheetJS.

aiexcel+6
View pattern →
Agent DOCX Artifact preview

Agent DOCX Artifact

Download-first Word artifact pattern. The agent streams Markdown through a tool call, renders a document preview, and exports a real .docx file.

aiword+6
View pattern →