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
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
OPENAI_API_KEYGet key
External services
openai
Ready to use?
View the full interactive pattern with live preview and copy the source code.
View the pattern on desktop
