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 { useEffect, useState } from "react";

import AgentActivity, {
  type AgentActivityEntry,
} from "@/components/ui/agent-activity";
import { StreamingDescription } from "@/components/ui/agent-activity-utils/streaming-description";

const text =
  "Searching recent releases, comparing changelogs, and summarizing the notable breaking changes.";

export default function AgentActivityDemo() {
  const [complete, setComplete] = useState(false);

  useEffect(() => {
    const timer = window.setTimeout(
      () => setComplete(true),
      text.length * 6 + 800,
    );
    return () => window.clearTimeout(timer);
  }, []);

  const entries: AgentActivityEntry[] = [
    {
      id: "reasoning",
      label: "Reasoned about the request",
      status: "complete",
      icon: "reasoning",
    },
    {
      id: "search",
      label: "Searched the web",
      activeLabel: "Searching the web",
      status: complete ? "complete" : "active",
      icon: "search",
      isStreamingText: true,
      description: (
        <StreamingDescription
          text={text}
          active={!complete}
          complete={complete}
        />
      ),
    },
  ];

  return <AgentActivity title="Thinking" entries={entries} defaultOpen />;
}