Confirmations & Plans
Pattern
BEG·Nov 25

Plan

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

View Full Pattern on Desktop
Plan preview

Problems Solved

  • AI-generated execution plans
  • Structured planning interfaces
  • Streaming plan visualization
  • Multi-step plan execution
  • Tool-based plan management

Use Cases

  • Project planning and execution
  • Marketing campaign planning
  • Technical migration strategies
  • Process documentation
  • Task breakdown and implementation guides

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 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 →
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 →
Agent Slides Artifact preview

Agent Slides Artifact

Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.

aislides+5
View →
Agent Text Artifact preview

Agent Text Artifact

Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.

aimarkdown+4
View →
End of Pattern