Agent Action

AI chats

About

A collapsible row that reports one action an AI agent took (a tool call, search, or file read), showing its name, one-line outcome summary, run state and duration, with the full detail collapsed until expanded.

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

Code

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

Usage.tsx

import AgentAction from "@/components/ui/agent-action";

export default function AgentActionDemo() {
  return (
    <div
      className="flex w-full flex-col gap-3 p-6"
      style={{ background: "var(--background)", color: "var(--foreground)" }}
    >
      <AgentAction
        name="verify_credential"
        summary="issuer=DU, type=degree, target=KR"
        state="done"
        duration="1.4s"
        defaultOpen
      >
        {
          '{ "verified": true, "sources": 3, "equivalence": "KR bachelor, engineering" }'
        }
      </AgentAction>
      <AgentAction
        name="send_email"
        summary="to 3 recipients, template=verification_result"
        state="running"
      />
      <AgentAction
        name="ats_sync"
        summary="connection timed out after 30s"
        state="error"
      >
        {"Error: ETIMEDOUT"}
      </AgentAction>
    </div>
  );
}