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 { useReducedMotion } from "motion/react";

import AgentActivity, {
  type AgentActivityEntry,
} from "@/components/ui/agent-activity";
import { DemoPlaybackProvider } from "@/components/ui/agent-activity-utils/demo-playback";
import { useDemoSequence } from "@/components/ui/agent-activity-utils/use-demo-sequence";
import { StreamingDescription } from "@/components/ui/agent-activity-utils/streaming-description";

const timings = [
  { hold: 900 },
  { hold: 1600, reveals: [300, 900] },
  { hold: 1200 },
];

const sources = ["docs.stripe.com", "github.com/vercel"];

function StreamingDemoInner() {
  const reduceMotion = useReducedMotion();
  const { visible } = useDemoSequence(timings, reduceMotion);

  const entries: AgentActivityEntry[] = [
    {
      id: "search",
      label: "Searched the web",
      activeLabel: "Searching the web",
      status: visible > 0 ? (visible === 1 ? "active" : "complete") : "pending",
      icon: "search",
      sources,
    },
    {
      id: "read",
      label: "Read documentation",
      activeLabel: "Reading documentation",
      status: visible > 1 ? (visible === 2 ? "active" : "complete") : "pending",
      icon: "reasoning",
      isStreamingText: true,
      description: (
        <StreamingDescription
          text="Found the webhook signature verification steps and the retry backoff policy for failed events."
          active={visible === 2}
          complete={visible > 2}
        />
      ),
    },
    {
      id: "respond",
      label: "Drafted a response",
      activeLabel: "Drafting a response",
      status: visible > 2 ? "complete" : visible === 3 ? "active" : "pending",
      icon: "tool",
    },
  ];

  return <AgentActivity entries={entries} />;
}

export default function Demo() {
  return (
    <DemoPlaybackProvider isPlaying={true}>
      <div className="flex w-full items-center justify-center p-8">
        <StreamingDemoInner />
      </div>
    </DemoPlaybackProvider>
  );
}