DEDUPED Hot AI repos, turned into use cases Get the Monday 5

How to build a custom face that appears in the gallery with AI Visualizer

Add a folder with an index.html that reads the shared signal bus through core.js.

Short answer: Create a new folder inside faces/ in the AI Visualizer folder; then add an index.html that includes core.js and calls AV.init(); read AV.state, AV.env and AV.samples in your draw loop. All steps.

  • Content
  • Advanced
  • 90 minutes
  • From the README
  • Any agent

Who it is forA front-end developer who wants a custom visual for their agent that follows the same voice signals as the built-in faces.

The problemThe four built-in faces may not match a brand or a personal style, and rebuilding the signal handling from scratch is wasteful.

The outcomeA new face shows up in the gallery automatically and responds to the same idle, listening, thinking and speaking states.

What you need first

  • Python 3 (ships with macOS and most Linux systems; on Windows, use run.bat or python server.py)
  • A web browser
  • Optional: a voice line or agent that writes the three signal files, such as backtalk, for live use

Steps

  1. Create a new folder inside faces/ in the AI Visualizer folder
  2. Add an index.html that includes core.js and calls AV.init()
  3. Read AV.state, AV.env and AV.samples in your draw loop
  4. Add an optional face.json with a title and tagline, then reload the root URL to confirm the new face appears in the gallery (inferred, check the README)

Prompt for your agent

In the ai-visualizer repo, create faces/<face name>/index.html that includes core.js, calls AV.init(), and reads AV.state, AV.env and AV.samples in a draw loop. Expected output: the new face appears in the gallery at the root URL. Verify that the face changes its drawing when the demo or the .voice_state file moves between states.

Caveat. The README gives only the high-level contract for custom faces, so the exact shape of AV.env and AV.samples must be checked against the shipped faces in the repo.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for jaredrhod/ai-visualizer and "Build a custom face that appears in the gallery"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer