BEG
Nov 25Plan
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
ToolLoopAgentcreateUIMessageStreamcreateUIMessageStreamResponseconvertToModelMessagesvalidateUIMessagesstreamTexttoolgateway
Tags
aiplanai-sdkstreamingcollapsibletool-loop
Requirements
- Node.js
- 18+
- 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 PatternView Pattern on DesktopRelated Patterns
Tool Approval
Demonstrate tool execution with user confirmation. Includes approval workflows, confirmation UI, and state management for safe AI operations.
Basic Chat Interface
Chat interface with streaming responses and message history. Includes typing indicators and message status tracking.
Sources & Citations
Chat with source citations using Perplexity's Sonar model. Answers include clickable links for fact-checking.
Queue
Queue management assistant using AI agents. Generate structured queues with messages, todos, and attachments through conversation.
End of Pattern