Agent card
One agent shown where people find and run it: a card in their agents grid, a row in a list, a listing in a shared directory, and the header at the top of its chat.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/agent-card-card.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/agent-card-card.json
Usage & API
Example
import { AppMark } from "@/components/ai/agent-card-card"
<AppMark
app={app}
/>Props AppMark
| Prop | Type & description | Required |
|---|---|---|
app | AppId | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Card renders one article. Compact is the default. Large raises the icon, prints the schedule under the name, the purpose as its own paragraph, tool chips with names, and a history of up to 14 runs as thin bars, with a count of failures. Both sizes share the menu: Edit turns the name into a field that commits on Enter or blur and cancels on Escape, Duplicate and Archive call the matching callbacks, and Archive is styled as the danger item. The status line is polite live text. Run is disabled while running is true, the label switches to Running, and a bar travels along the bottom edge. Hover lifts the card slightly.
Example
import { Checkbox } from "@/components/ai/agent-card-row"
<Checkbox
checked={checked}
onChange={() => {}}
label="…"
/>Props Checkbox
| Prop | Type & description | Required |
|---|---|---|
checked | boolean | "mixed" | Required |
onChange | (next: boolean) => void | Required |
label | string | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
List row is a grid line. A checkbox selects it. The name and purpose sit beside an icon, then the owner's initials, the trigger, the last run, a sparkline of the week array with the week's total, and an enable switch. A schedule trigger prints the label you pass. A webhook prints Webhook and the source. Manual prints Manual. Last run is Running with a spinner, Failed plus the time in red, or a green dot and the time. Turning the agent off fades the row. On a narrow screen the trigger and last run fold under the name, and the owner, sparkline and middle columns hide. Clicking the row toggles selection. The checkbox and the switch stop that click.
Example
import { AppMark } from "@/components/ai/agent-card-directory"
<AppMark
app={app}
/>Props AppMark
| Prop | Type & description | Required |
|---|---|---|
app | AppId | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Directory listing is a row: icon, name as the button that opens details, author, the word Public when the source is public, a two-line purpose, and a footer. Team listings show overlapping initials and a count of people. Public listings show a star rating and an installs figure. Needs lists the apps it depends on. Add toggles through onToggleAdd and reads Added once added is true. The detail panel in the same preview docks beside the list on a wide window and slides over it otherwise. It repeats Add, then a numbered What it does list, Runs when, Model, and Permissions it asks for, each marked Read or Write. A line under the permissions says they can be narrowed after adding, in the agent's settings. Close details dismisses the panel.
Example
import { AgentChatHeader } from "@/components/ai/agent-card-header"
<AgentChatHeader
agent={agent}
tools={[]}
onReconnect={() => {}}
onSaveSummary={() => {}}
onClear={() => {}}
canClear={true}
/>Props AgentChatHeader
| Prop | Type & description | Required |
|---|---|---|
agent | ChatAgent | Required |
tools | ConnectedTool[] | Required |
onReconnect | (name: string) => void | Required |
onSaveSummary | (summary: string) => void | Required |
onClear | () => void | Required |
canClear | boolean | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Chat header shows the agent icon, name, a model badge, and a byline with the author. The summary is one truncated line until More, which reveals the longer instructions and a Show less control. Edit agent, in the options menu, replaces the summary with a description field, Cancel, and Save. Enter with Command or Ctrl saves. Escape cancels. Share copies a link and shows Link copied. Clear chat is the danger item and stays disabled while canClear is false. Connected tools render as chips. A connected tool is a quiet chip with a green dot. An expired one is an amber button labelled Reconnect, which calls onReconnect with the tool name. A connecting tool shows a spinner.
Choosing a layout
Use the card on a home grid of agents one person owns. The large size fits a featured agent: schedule line, full purpose, labelled tool chips, and a strip of recent runs. Compact cards are the rest of the grid, with the purpose clamped and tools as marks only. Use the row when an admin needs to scan many agents, see who owns each one, and turn a batch off. The preview page around the rows adds All, On and Off counts, a search field, and a bulk bar with Run now, Turn off or Turn on, and Archive once any row is selected.
Use the directory when people browse agents shared by a team or published more widely, and they should read the permissions before adding one. Use the chat header once they are inside a thread with that agent, not on the index. The header is the wrong place for temperature or tool allow-lists. Those belong on model settings and the tool picker. The card is also the wrong place for a workflow. It can show a schedule string, but it does not edit one.
Does Run or Add actually start or install the agent?
No. Run calls onRun, and the card shows Running now only while you pass running. Add calls onToggleAdd and flips its label from the added boolean you pass. Rename, duplicate, archive, enable, reconnect, save and clear work the same way. The components draw the control and leave the effect to you.
Which variant should list a whole team of agents?
Use the list row, not the card. The row already has selection, an owner, a trigger, a seven-day sparkline and an enable switch, and the surrounding page filters All, On and Off and acts on the selection. The card is a tile for a personal grid. The directory is for browsing a catalog before an agent is added.