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 "@erc8004/ui"

<AgentCard agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={2290} />

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={2290} layout="vertical" />

Without Description

Hide the description to create a more compact card.

<AgentCard agentRegistry="eip155:8453:0x8004...a432" agentId={2290} 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={2290} showProtocolBadges={false} />

Minimal

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

<AgentCard
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={2290}
  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={2290}>
  <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.

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→