agent-card

A collection of polished React cards for AI agent chat interfaces.

Install

npm install agent-card react lucide-react

Available Cards

ShellCommandCard

A polished shell command execution card for displaying command status and output.

import { ShellCommandCard } from "agent-card";
import "agent-card/style.css";

export function Example() {
  return (
    <ShellCommandCard
      id="job-001"
      title="安装项目依赖"
      command="npm install"
      cwd="/home/ubuntu/my-app"
      status="running"
      output="added 23 packages..."
      onCancel={() => console.log("cancel")}
    />
  );
}

Props

type ShellCommandStatus =
  | "pending"
  | "running"
  | "finished"
  | "cancelled";

interface ShellCommandCardProps {
  id: string;
  title: string;
  command: string;
  cwd: string;
  status: ShellCommandStatus;
  durationMs?: number;
  output?: string;
  startedAt?: string;
  endedAt?: string;
  onCancel?: () => void;
  className?: string;
  style?: React.CSSProperties;
  classNames?: ShellCommandCardClassNames;
}

interface ShellCommandCardClassNames {
  root?: string;
  actions?: string;
  actionButton?: string;
  header?: string;
  statusIcon?: string;
  title?: string;
  command?: string;
  cwd?: string;
  details?: string;
  tabList?: string;
  tab?: string;
  tabPanel?: string;
  logContainer?: string;
  log?: string;
  metadata?: string;
  metadataRow?: string;
  metadataLabel?: string;
  metadataValue?: string;
}

Styling Overrides

The card is transparent by default and inherits text color from the host application. It also exposes style escape hatches for deeper theme alignment.

<ShellCommandCard
  id="job-001"
  title="安装项目依赖"
  command="npm install"
  cwd="/home/ubuntu/my-app"
  status="running"
  className="shadow-none border-white/10"
  classNames={{
    actions: "border-white/10",
    header: "text-inherit",
    title: "text-inherit",
    command: "text-current/70",
    cwd: "text-current/50",
    details: "border-white/10",
    tabList: "border-white/10",
    logContainer: "bg-current/5",
    log: "text-current/80",
  }}
/>

• className and style apply to the root card.
• classNames lets you override specific parts of the card while keeping the default behavior.

Notes

• This is a display component, not an interactive terminal emulator.
• The card initially shows command metadata only; command output is shown after expanding details.
• Long output is shown inside an internal scroll area.
• onCancel is shown only for running commands.

More Cards Coming Soon

This library is designed to be extended with more card components for AI agent interfaces. Stay tuned!