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.

AgentName

Fetches and renders the agent's registered name from the identity registry. Falls back to a truncated agent ID if no name is registered.

Preview

import { AgentName } from "@p4n/erc8004-ui"
<AgentName agentRegistry="eip155:8453:0x8004...a432" agentId={888} />

Usage

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

Examples

Inside AgentProvider

Use AgentProvider to avoid repeating props when rendering multiple components for the same agent.

<AgentProvider agentRegistry="eip155:8453:0x8004...a432" agentId={888}>
  <AgentName />
</AgentProvider>

With Custom Styling

Pass className to override typography. Useful for heading-level displays.

<AgentName
  agentRegistry="eip155:8453:0x8004...a432"
  agentId={888}
  className="text-2xl font-semibold tracking-tight"
/>

In Context

AgentName used in a profile header alongside the agent's image, description, and verification status.

Loading…
<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).

States

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