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.

AgentImage

Renders the agent's registered image. Supports IPFS, HTTPS, and base64 sources. Falls back to the deterministic FingerprintBadge when no image is registered.

Preview

Usage

import { AgentImage } from "@erc8004/ui"
<AgentImage agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={2290} />

Examples

With FingerprintBadge Fallback

When no image is registered, AgentImage automatically renders the deterministic FingerprintBadge as a fallback.

// If the agent has no registered image, a FingerprintBadge is shown:
<AgentImage agentRegistry="eip155:8453:0x8004...a432" agentId={2290} />

Circular Avatar

Use className to render as a circular avatar at a fixed size.

<AgentImage
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={2290}
  className="h-16 w-16 rounded-full overflow-hidden"
/>

In Context

AgentImage in a profile header alongside name and verification badge.

<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={2290}>
  <div className="flex items-center gap-4 p-4 bg-neutral-900 border border-white/20 rounded-lg">
    <AgentImage className="min-h-24 min-w-24" />
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-4">
        <AgentName />
        <VerificationBadge />
      </div>
      <AgentDescription />
    </div>
  </div>
</AgentProvider>

API Reference

PropTypeRequiredDefaultDescription
agentRegistrystringNoAgent registry in the format "eip155:{chainId}:{contractAddress}". Required unless inside an <AgentProvider>.
agentIdnumberNoERC-721 token ID of the agent. Required unless inside an <AgentProvider>.
classNamestringNoOptional CSS classes merged onto the component root for layout, spacing, or custom styling (e.g. Tailwind).

States

This component handles loading and error states internally with inline placeholders. No configuration needed.