Agent Steps

Vertical agent plan with done, active, and pending states indicated by check, spinner, and dot icons.

Parse user intent
Search knowledge base
Draft response
Format citations

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Ai23 } from "@/components/beste/piece/ai23";

<Ai23
  steps={[
    {
      "label": "Parse user intent",
      "status": "done"
    },
    {
      "label": "Search knowledge base",
      "status": "done"
    },
    {
      "label": "Draft response",
      "status": "active"
    },
    {
      "label": "Format citations",
      "status": "pending"
    }
  ]}
/>