affectUI › Illustrations › Product scenes

Inspect Agent Card

An agent card seen like a selection in a design tool – tilted back, with a blue frame, spacing numbers and a red guide walking through its rows.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/inspect-agent-card.json · Import from @/components/ui/inspect-agent-card

When to use

Hero or feature section of a UI kit, design tool or developer product – it shows that the interface is built with care, down to the pixel
Beside a headline, one on each side: use mirror for the left one and give them different delays, so they take turns
Launch posts and OG images – a still frame with playing={false} reads well small

When not to use

As the real interface – it's a picture of one; nothing in it can be clicked
In tight spaces – it needs about 400 × 330px, and its fades want room around it

Usage

import { InspectAgentCard } from "@/components/ui/inspect-agent-card";

export function Hero() {
  return (
    <section className="relative">
      <h1>UI for AI agents</h1>
      <InspectAgentCard className="absolute right-0 top-24" />
    </section>
  );
}

Props

Name	Type	Default	Description
`agent`	`InspectAgent`		The card: name, model, avatar, tools, task, status ("running" \| "done"), cost and time
`above`	`InspectAgent \| null`		The card faded out above it – null leaves it out
`playing`	`boolean`	`true`	Walks the selection through the rows – false holds it on the header
`hold`	`number`	`1600`	How long the selection stays on a row, in ms
`delay`	`number`	`600`	Wait before the first selection, in ms – e.g. until the section around it has come in
`mirror`	`boolean`	`false`	Tilted the other way and fading out to the left, the edge marks on the right – for the left side of a layout
`flat`	`boolean`	`false`	No tilt
`className`	`string`		Extra class on the root

Accessibility

Decorative: the whole illustration is hidden from screen readers and takes no clicks
With prefers-reduced-motion nothing moves: the selection stands still on the header

Responsive

Fixed size, about 400 × 330px with its fades – scale it with zoom or a transform for smaller screens
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
Inspect Composer – A chat composer seen like a selection in a design tool – tilted back, with a blue frame, spacing numbers and a red guide walking through its rows
Agent Team – A prompt types itself and branches out into three agents, each with a role and overlapping tool logos