# @erc8004/ui

> Drop-in React components for displaying verified ERC-8004 AI agent identity, reputation, and validation data. Self-contained, trustless, and designed to be consumed by AI coding agents.

**NOTE — provisional package name.** This library is not yet published to npm. `@erc8004/ui` is a placeholder used in code examples — the final package name has not been chosen and will likely differ. Until publication, install directly from GitHub: https://github.com/p4nthera115/erc8004-ui. Once published, this notice will disappear and all code examples will reflect the real package name.

## Setup

- [Introduction](https://erc8004-ui.vercel.app/docs/introduction.md): Why this library exists and what problems it solves.
- [Installation](https://erc8004-ui.vercel.app/docs/installation.md): Install the package, set up the provider, write your first component.
- [Concepts](https://erc8004-ui.vercel.app/docs/concepts.md): Core concepts: registries, agentRegistry/agentId, trustless data, supported chains.
- [API Keys](https://erc8004-ui.vercel.app/docs/api-keys.md): How to get a Graph API key and why it's safe to use in frontend code.
- [Components](https://erc8004-ui.vercel.app/docs/components.md): All components in the library, grouped by registry.
- [Theming](https://erc8004-ui.vercel.app/docs/theming.md): Styling, dark mode, and customisation patterns.

## Components

### Providers

- [ERC8004Provider](https://erc8004-ui.vercel.app/docs/components/erc8004-provider.md): Root context provider that holds infrastructure config — your Graph API key and optional subgraph URL overrides.
- [AgentProvider](https://erc8004-ui.vercel.app/docs/components/agent-provider.md): Optional convenience wrapper that sets a default agentRegistry and agentId for all child components.

### Identity

- [AgentName](https://erc8004-ui.vercel.app/docs/components/agent-name.md): Fetches and renders the agent's registered name from the identity registry.
- [AgentImage](https://erc8004-ui.vercel.app/docs/components/agent-image.md): Renders the agent's registered image.
- [AgentDescription](https://erc8004-ui.vercel.app/docs/components/agent-description.md): Renders the agent's registered description text from the identity registry.
- [AgentCard](https://erc8004-ui.vercel.app/docs/components/agent-card.md): Composed identity card combining avatar, name, description, owner address, and active protocol badges in a single component.
- [EndpointStatus](https://erc8004-ui.vercel.app/docs/components/endpoint-status.md): Lists all registered service endpoints (MCP, A2A, OASF, web, email) with protocol labels and optional live health check indicators.

### Reputation

- [ReputationScore](https://erc8004-ui.vercel.app/docs/components/reputation-score.md): Compact inline badge showing the agent's average feedback score and total review count.
- [ReputationTimeline](https://erc8004-ui.vercel.app/docs/components/reputation-timeline.md): Sparkline chart showing how the agent's feedback scores have trended over time.
- [ReputationDistribution](https://erc8004-ui.vercel.app/docs/components/reputation-distribution.md): Score distribution histogram showing the spread of feedback values across configurable score ranges.
- [FeedbackList](https://erc8004-ui.vercel.app/docs/components/feedback-list.md): Paginated list of individual feedback entries with score, tag pills, reviewer address, timestamp, and optional written review text.
- [TagCloud](https://erc8004-ui.vercel.app/docs/components/tag-cloud.md): Weighted tag pills showing the agent's most frequent feedback tags.

### Validation

- [VerificationBadge](https://erc8004-ui.vercel.app/docs/components/verification-badge.md): Compact inline badge showing the agent's verification tier derived from completed validations and average validation score.
- [ValidationScore](https://erc8004-ui.vercel.app/docs/components/validation-score.md): Average validation score (0-100) with a fill bar and completed/pending counts.
- [ValidationList](https://erc8004-ui.vercel.app/docs/components/validation-list.md): Paginated list of individual validation entries with score, status, tag, validator address, and timestamp.
- [ValidationDisplay](https://erc8004-ui.vercel.app/docs/components/validation-display.md): Composed view combining VerificationBadge, ValidationScore, and ValidationList into a single unified validation panel.

### Activity

- [LastActivity](https://erc8004-ui.vercel.app/docs/components/last-activity.md): Cross-registry relative timestamp showing when the agent was last active (e.g.
- [ActivityLog](https://erc8004-ui.vercel.app/docs/components/activity-log.md): Chronological feed of all on-chain events across all registries — feedback and validations merged and sorted by time.

## Optional

- [Full bundle](https://erc8004-ui.vercel.app/llms-full.txt): All components and guides concatenated into a single file for one-shot context loading.
- [GitHub repository](https://github.com/p4nthera115/erc8004-ui): Source code, issues, and discussions.
- [ERC-8004 specification](https://eips.ethereum.org/EIPS/eip-8004): The Ethereum standard this library implements.