中文

AgentFace is an open-source robot avatar system that maps a seed, wallet address, or any stable identifier to a deterministic, configurable SVG avatar.

• Website: https://agent-face.ch4.app

packages/
  core/   deterministic config generation, URL serialization, SVG rendering
  react/  React wrapper
  vue/    Vue wrapper
  web/    playground app

Recommended environment:

• Node.js 20+
• pnpm 10+

pnpm install

Install the published packages:

pnpm add @agent-face/core
pnpm add @agent-face/react
pnpm add @agent-face/vue

import {
  generateAgentFaceConfig,
  renderAgentFaceSvg,
  serializeAgentFaceConfig,
  deserializeAgentFaceConfig,
} from "@agent-face/core";

const config = generateAgentFaceConfig("0xabc123");
const svg = renderAgentFaceSvg(config);
const query = serializeAgentFaceConfig(config);
const restored = deserializeAgentFaceConfig(query);

import { AgentFace } from "@agent-face/react";

export function Example() {
  return <AgentFace seed="demo-agent" size={120} className="rounded-3xl shadow-sm" />;
}

<script setup lang="ts">
import { AgentFace } from "@agent-face/vue";
</script>

<template>
  <AgentFace seed="demo-agent" :size="120" class="rounded-3xl shadow-sm" />
</template>

The web playground is designed around a simple flow:

1. Enter a seed or address
2. Preview the generated avatar
3. Adjust grouped options
4. Copy a share link or export SVG

Current playground capabilities:

• deterministic generation from seed/address
• live preview
• English / Chinese language switching
• grouped config editing
• shareable URL sync
• config JSON copy
• SVG export
• package-level custom image URL with a sketch loading placeholder and AgentFace fallback