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. When no image is registered — or when the registered one fails to load — it falls back to an initials avatar in a colour derived from the agent's identity, and to the deterministic FingerprintBadge when the agent has no name either.

Preview

Usage

import { AgentImage } from "@p4n/erc8004-ui"

<AgentImage agentRegistry="eip155:8453:0x8004A169FB4a3325136EB29fA0ceB6D2e539a432" agentId={888} />

Examples

Fallbacks

With no registered image, AgentImage renders the agent's initials on a colour derived from its registry and id — the same colour on every page and every reload. A registered image that fails to load (dead host, unreachable IPFS gateway, 404) falls through to the same chain rather than leaving a broken image in place. An agent with no registered name lands on the deterministic FingerprintBadge instead.

// No usable image: initials avatar. No image and no name: FingerprintBadge.
<AgentImage agentRegistry="eip155:8453:0x8004...a432" agentId={888} />

Circular Avatar

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

<AgentImage
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  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={888}>
  <div className="flex flex-col items-start gap-4 p-4 bg-neutral-900 border border-white/20 rounded-lg sm:flex-row sm:items-center">
    <AgentImage className="min-h-24 min-w-24" />
    <div className="flex min-w-0 flex-col gap-2">
      <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
        <AgentName />
        <VerificationBadge />
      </div>
      <AgentDescription />
    </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).

sizeoptional

type: numberdefault: 64

Rendered width and height in pixels. Also sets the size of the initials avatar or FingerprintBadge fallback.

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).
`size`	`number`	No	64	Rendered width and height in pixels. Also sets the size of the initials avatar or FingerprintBadge fallback.

States

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

←AgentName AgentDescription→