Source: https://ai-sdk.dev/elements/components/plan

Vercel

Slash Forward

Sparkles

AI SDK

Docs Cookbook Providers Playground AI ElementsAI ElementsLeft sparkleRight sparkle AI GatewayGateway

Search...⌘KFeedback GitHub Vercel LogoSign in with Vercel

Chatbot

Plan

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

The Plan component provides a flexible system for displaying AI-generated execution plans with collapsible content. Perfect for showing multi-step workflows, task breakdowns, and implementation strategies with support for streaming content and loading states.

Preview

Code

Rewrite AI Elements to SolidJS

Rewrite the AI Elements component library from React to SolidJS while maintaining compatibility with existing React-based shadcn/ui components using solid-js/compat, updating all 29 components and their test suite.

Toggle plan

Build ⌘↩

Installation

---

AI Elements

shadcn CLI

Manual

npx ai-elements@latest add plan

Features

---

• Collapsible content with smooth animations
• Streaming support with shimmer loading states
• Built on shadcn/ui Card and Collapsible components
• TypeScript support with comprehensive type definitions
• Customizable styling with Tailwind CSS
• Responsive design with mobile-friendly interactions
• Keyboard navigation and accessibility support
• Theme-aware with automatic dark mode support
• Context-based state management for streaming

Props

---

<Plan />

Prop

Type

isStreaming?boolean

defaultOpen?boolean

...props?React.ComponentProps<typeof Collapsible>

<PlanHeader />

Prop

Type

...props?React.ComponentProps<typeof CardHeader>

<PlanTitle />

Prop

Type

children?string

...props?Omit<React.ComponentProps<typeof CardTitle>, "children">

<PlanDescription />

Prop

Type

children?string

...props?Omit<React.ComponentProps<typeof CardDescription>, "children">

<PlanTrigger />

Prop

Type

...props?React.ComponentProps<typeof CollapsibleTrigger>

<PlanContent />

Prop

Type

...props?React.ComponentProps<typeof CardContent>

<PlanFooter />

Prop

Type

...props?React.ComponentProps<"div">

<PlanAction />

Prop

Type

...props?React.ComponentProps<typeof CardAction>

Model Selector

A searchable command palette for selecting AI models in your chat interface. Prompt Input

Allows a user to send a message with file attachments to a large language model. It includes a textarea, file upload capabilities, a submit button, and a dropdown for selecting the model.

On this page

Installation Features Props <Plan /> <PlanHeader /> <PlanTitle /> <PlanDescription /> <PlanTrigger /> <PlanContent /> <PlanFooter /> <PlanAction />

GitHubEdit this page on GitHub Scroll to topCopy pageOpen in chat