For the complete documentation index, see /llms.txt. A single-fetch full bundle is at /llms-full.txt. Every docs page is also available as Markdown by appending .md to its URL, or by requesting it with Accept: text/markdown.

AgentCard

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

Preview

Usage

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.

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

Without Description

Hide the description to create a more compact card.

<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.

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

Minimal

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

<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.

<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

agentRegistryoptional

type: string

Agent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>.

agentIdoptional

type: number

ERC-721 token ID of the agent. Required unless inside an <AgentProvider>.

classNameoptional

type: string

Optional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind).

layoutoptional

type: "horizontal" | "vertical"default: "horizontal"

Card layout. "horizontal" places the avatar next to name and description. "vertical" stacks the avatar above name, agent id, and description.

showOwneroptional

type: booleandefault: true

Show the owner wallet address.

showProtocolBadgesoptional

type: booleandefault: true

Show protocol badges (MCP, A2A, OASF, Web, Email).

showDescriptionoptional

type: booleandefault: true

Show the agent's description text.

headingLeveloptional

type: 1 | 2 | 3 | 4 | 5 | 6default: 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.

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.

←AgentDescription EndpointStatus→