A collapsible timeline that shows an AI agent's run step by step, with streaming labels, source chips, expandable details, and inline images.
"use client";
import AgentActivity, {
type AgentActivityEntry,
} from "@/components/ui/agent-activity";
const entries: AgentActivityEntry[] = [
{
id: "reasoning",
label: "Reasoned about the request",
status: "complete",
icon: "reasoning",
},
{
id: "search",
label: "Searched the web",
status: "complete",
icon: "search",
sources: ["wikipedia.org", "docs.example.com", "news.example.com"],
},
{
id: "tool",
label: "Ran a command",
status: "complete",
icon: "tool",
description: "npm install shadcn-ui",
details: {
summary: "View output",
items: ["+ shadcn-ui@0.9.5", "added 3 packages in 1.2s"],
},
},
{
id: "image",
label: "Generated a preview",
status: "complete",
icon: "image",
image: {
src: "https://cdn.21st.dev/assets/stock/photo/1015.jpg",
alt: "Generated preview artifact",
caption: "Preview render",
},
},
];
export default function AgentActivityDemo() {
return <AgentActivity title="Thinking" entries={entries} defaultOpen />;
}
