Agent Steps

Plan and progress for a multi-step run: what's done, what's running, what's next.

Read the brief
Search competitor pricing
Draft the comparison table
Write the summary

Installation

pnpm dlx shadcn@latest add @jds/agent-steps

Usage

import { AgentSteps } from "@/components/ai/agent-steps"

<AgentSteps
  steps={[
    { id: "1", label: "Look up order", status: "complete" },
    { id: "2", label: "Check eligibility", status: "active" },
    { id: "3", label: "Issue refund", status: "pending" },
  ]}
/>

API Reference

AgentSteps

Prop	Type	Default
`steps` status: "pending" \| "active" \| "complete" \| "error"	{ id, label, detail?, status }[]	–

Agent Panel Approval