# AI use cases for AI Visualizer (jaredrhod/ai-visualizer) Repo: [jaredrhod/ai-visualizer](https://github.com/jaredrhod/ai-visualizer) | Use cases: 4 | Page: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/ A free, dependency-free set of four full-screen browser visualizers that show an AI voice agent's state (idle, listening, thinking, speaking) in real time, driven by a tiny local Python server. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Preview all four faces with a scripted demo: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/preview-faces-without-voice-line/ - Give a Claude Code voice agent a live face: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/give-claude-code-agent-a-live-face/ - Capture the board as a stream background in OBS: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/record-stream-broll-with-obs/ - Build a custom face that appears in the gallery: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/build-custom-face-for-gallery/ ## How to preview all four faces with a scripted demo with AI Visualizer Repo: [jaredrhod/ai-visualizer](https://github.com/jaredrhod/ai-visualizer) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README Run the server and watch every face cycle through idle, listening, thinking and speaking with no setup. **Who it is for:** A curious builder or non-developer who wants to see what the visualizer does before wiring up any voice agent. **The problem:** It is hard to judge whether a visualizer is worth setting up when there is no live voice conversation to drive it. **The outcome:** The user sees all four faces performing a scripted voice turn and can pick the one they want to use. ### Steps 1. Run `git clone https://github.com/jaredrhod/ai-visualizer` 2. Run `cd ai-visualizer` 3. Run `./run.sh` 4. In the browser gallery, click "watch the demo" on any face card, or add `?demo=1` to a face URL ### Prompt to paste into your agent ```text Clone https://github.com/jaredrhod/ai-visualizer, run ./run.sh in that folder, and open the gallery at the root URL. Report which of the four faces (Circuit Board, Radial, Face in the Code, Neural Core) you could open in demo mode. Verify that the page loads without errors and the demo cycles through idle, listening, thinking and speaking. ``` ### Caveat The demo is a scripted voice turn with a synthesized voice, so it does not reflect any real conversation until a voice line is wired in. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/preview-faces-without-voice-line/ ## How to give a Claude Code voice agent a live face with AI Visualizer Repo: [jaredrhod/ai-visualizer](https://github.com/jaredrhod/ai-visualizer) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Point the visualizer at a backtalk signal folder so the face follows the real conversation. **Who it is for:** A developer running a voice agent through Claude Code with backtalk who wants the agent to have a visible face during live sessions. **The problem:** A voice agent running in the background gives no visual feedback about whether it is listening, thinking or speaking. **The outcome:** The chosen face idles, listens, thinks and speaks in sync with the real voice conversation, and the agent name appears on the chip and in every HUD. ### Steps 1. Run `git clone https://github.com/jaredrhod/ai-visualizer` and `cd ai-visualizer` 2. Copy `ai-visualizer.json.example` to `ai-visualizer.json`, then set `name` to your agent's name and `face` to the face the root URL should open (inferred, check the README) 3. Set `bus_dir` in `ai-visualizer.json` to your backtalk folder, or set `signals_dir` in backtalk's config to this folder 4. Run `./run.sh`, restart backtalk, then say something to your agent and watch the face respond ### Prompt to paste into your agent ```text In the ai-visualizer repo, copy ai-visualizer.json.example to ai-visualizer.json, set name to and bus_dir to , then run ./run.sh. Expected output: the root URL opens the configured face. Verify that the .voice_state file in the bus folder changes between idle, listening, thinking and speaking during a spoken exchange. ``` ### Caveat Live voice sync only works when a voice line such as backtalk writes the three signal files, and the README says the visualizer is designed to pair with backtalk out of the box. Risk, remote script: The README suggests pasting a one-sentence prompt into an existing Claude Code session so the agent clones the repo and runs the setup wizard on its own, so review what the agent runs before you approve it. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/give-claude-code-agent-a-live-face/ ## How to capture the board as a stream background in OBS with AI Visualizer Repo: [jaredrhod/ai-visualizer](https://github.com/jaredrhod/ai-visualizer) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Add the Circuit Board face as an OBS browser source and trigger its Space-key flythrough on camera. **Who it is for:** A streamer or video creator who runs an AI voice agent on stream and needs a visual backdrop with cinematic B-roll. **The problem:** A live AI agent conversation is hard to show visually, and static backgrounds make the stream feel flat. **The outcome:** The stream shows a live circuit board that reacts to the agent, with a cinematic flythrough available on demand for B-roll. ### Steps 1. Run `./run.sh` in the AI Visualizer folder 2. Open the face URL for the Circuit Board in a browser to confirm it is responding 3. In OBS, add a browser source and point it at the face URL 4. On the page, press Space to start the live cinematic flythrough while the board is working ### Prompt to paste into your agent ```text In the ai-visualizer folder, run ./run.sh, then confirm the Circuit Board face loads at the local root URL. Expected output: the board renders with the agent name on the center chip. Verify that pressing Space starts the flythrough overlay and that the board reverses flow while the state is listening. ``` ### Caveat The README notes that browsers may need one click on the page before they allow audio, so the thinking sound may stay silent in a capture until someone clicks. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/record-stream-broll-with-obs/ ## How to build a custom face that appears in the gallery with AI Visualizer Repo: [jaredrhod/ai-visualizer](https://github.com/jaredrhod/ai-visualizer) | Difficulty: Advanced | Time: 90 minutes | Basis: From the README Add a folder with an index.html that reads the shared signal bus through core.js. **Who it is for:** A front-end developer who wants a custom visual for their agent that follows the same voice signals as the built-in faces. **The problem:** The four built-in faces may not match a brand or a personal style, and rebuilding the signal handling from scratch is wasteful. **The outcome:** A new face shows up in the gallery automatically and responds to the same idle, listening, thinking and speaking states. ### 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 to paste into your agent ```text In the ai-visualizer repo, create faces//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. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/jaredrhod-ai-visualizer/build-custom-face-for-gallery/