Plan
A collapsible plan component for displaying AI-generated execution plans with streaming support and shimmer animations.
View Full Pattern on Desktop
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
Tags
Requirements
- Node.js
- 24+
- Memory
- 512MB
- Other
- OpenAI API key
Environment Variables
OPENAI_API_KEYGet key →
External Services
Ready to use?
View the full interactive pattern with live preview and copy the source code.
Open Live PreviewView Pattern on DesktopRelated Patterns
Tool Approval
Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.
Agent Sheet Artifact
Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.
Agent Text Artifact
Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.
Agent Code Artifact
Template-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, in-memory versions, and quick prompts — no database persistence.