Agent Activity

AI chats

About

A collapsible timeline that shows an AI agent's run step by step, with streaming labels, source chips, expandable details, and inline images.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Agent Activity to your project and fits it to your theme.

Code

How Agent Activity is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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: ["+ [email protected]", "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 />;
}