Agent Activity

Dashboards

About

A React agent activity panel showing tool calls, step progress, inputs, results, and recoverable failures, useful for making AI research and automation workflows transparent to users.

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 * as React from "react";
import AgentActivity from "@/components/ui/agent-activity";

export default function AgentActivityDemo() {
  const [failure, setFailure] = React.useState(false);
  const id = React.useId();
  return <div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-background p-4 text-foreground sm:p-8"><div className="w-full max-w-4xl"><div className="mb-4 flex items-center justify-between gap-3 text-xs text-muted-foreground"><span>Workspace / Research</span><label htmlFor={id} className="flex cursor-pointer items-center gap-2"><input id={id} type="checkbox" checked={failure} onChange={event => setFailure(event.target.checked)} className="h-3.5 w-3.5 accent-primary" /> Simulate a tool error</label></div><AgentActivity key={String(failure)} simulateFailure={failure} /></div></div>;
}