# AgentCard

**Slug:** `agent-card`  
**Import:** `import { AgentCard } from "@p4n/erc8004-ui"`

> **NOTE — unofficial library.** `@p4n/erc8004-ui` is an independent, community-built project. It is not affiliated with, maintained by, or endorsed by the authors of ERC-8004. It reads the standard's on-chain data through public subgraphs; it does not speak for the standard.

## Description

Composed identity card combining avatar, name, description, owner address, and active protocol badges in a single component.

## Usage

```tsx
import { AgentCard } from "@p4n/erc8004-ui"
<AgentCard agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} />
```

## Examples

### Vertical Layout

Stack the avatar above the name, agent id, and description. Ideal for marketplace grids and directory tiles.

```tsx
<AgentCard agentRegistry="eip155:8453:0x8004...a432" agentId={888} layout="vertical" />
```

### Without Description

Hide the description to create a more compact card.

```tsx
<AgentCard agentRegistry="eip155:8453:0x8004...a432" agentId={888} showDescription={false} />
```

### Without Protocol Badges

Hide protocol badges for a cleaner look in contexts where endpoints aren't relevant.

```tsx
<AgentCard agentRegistry="eip155:8453:0x8004...a432" agentId={888} showProtocolBadges={false} />
```

### Minimal

Show only avatar and name by hiding description, owner, and protocol badges.

```tsx
<AgentCard
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  showDescription={false}
  showOwner={false}
  showProtocolBadges={false}
  layout="vertical"
/>
```

## In Context

AgentCard used in a marketplace grid alongside reputation data.

```tsx
<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <div className="w-full max-w-sm space-y-3">
    <AgentCard />
    <div className="flex items-center gap-4 px-1">
      <ReputationScore />
      <LastActivity />
    </div>
  </div>
</AgentProvider>
```

## API Reference

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `agentRegistry` | `string` | no | — | Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>. |
| `agentId` | `number` | no | — | ERC-721 token ID of the agent. Required unless inside an <AgentProvider>. |
| `className` | `string` | no | — | Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind). |
| `layout` | `"horizontal" \| "vertical"` | no | `"horizontal"` | Card layout. "horizontal" places the avatar next to name and description. "vertical" stacks the avatar above name, agent id, and description. |
| `showOwner` | `boolean` | no | `true` | Show the owner wallet address. |
| `showProtocolBadges` | `boolean` | no | `true` | Show protocol badges (MCP, A2A, OASF, Web, Email). |
| `showDescription` | `boolean` | no | `true` | Show the agent's description text. |
| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | no | `2` | Heading level for the agent name. Set this so a card placed in a grid or section doesn't break the surrounding page's heading order. |

## States

This component handles loading, error, empty, and not-found states internally. A skeleton placeholder is shown while fetching, an error message with details appears if the Subgraph is unreachable, and a short message is displayed when no data exists for this agent.

## Reference

- Live preview & full docs: https://erc8004-ui.vercel.app/docs/components/agent-card
- Markdown source: https://erc8004-ui.vercel.app/docs/components/agent-card.md