An adaptive activity stream that shows an AI agent's reasoning, tool calls, web searches, or execution steps as a collapsible, animated timeline.
"use client";
import AgentActivity, {
type AgentActivityItem,
} from "@/components/ui/agent-activity";
const STEPS: AgentActivityItem[] = [
{
id: "brief",
type: "step",
label: "Reading the product brief",
status: "complete",
},
{
id: "patterns",
type: "step",
label: "Mapping the interaction patterns",
status: "complete",
},
{
id: "states",
type: "step",
label: "Connecting the loading and completion states",
status: "complete",
meta: "3 states",
},
{
id: "verify",
type: "step",
label: "Verifying the final behavior",
status: "active",
},
];
export default function AgentActivityDemo() {
return (
<div className="w-full max-w-lg">
<AgentActivity
items={STEPS}
status="working"
contentType="step"
duration={4.2}
maxHeight={220}
/>
</div>
);
}