Agent Activity

AI chats 26

About

An adaptive activity stream that shows an AI agent's reasoning, tool calls, web searches, or execution steps as a collapsible, animated timeline.

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 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>
  );
}