React AI Plan

When an AI agent is figuring out how to tackle a complex task, it's nice to show users the plan. This component gives you a collapsible card where you can display the AI's thinking—title, description, and a list of steps. The cool part is the streaming support: while the AI is still generating the plan, the text gets that shimmer effect so users know it's still thinking. Once streaming stops, it becomes static. We use this for agentic workflows where the AI breaks down a big task into steps before executing. Users can collapse it if they don't care about the details.

Plan preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/plan.json

npx shadcn@latest add https://www.shadcn.io/registry/plan.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/plan.json

bunx shadcn@latest add https://www.shadcn.io/registry/plan.json

Related Components

FAQ