Build Your Own JarvisThe Visualizer
Give your assistant a face. This stage adds a full-screen, live animated display that reacts in real time as your assistant idles, listens, thinks, and speaks — using ai-visualizer, an open-source project built specifically to pair with Backtalk.
Start Fresh
The custom dashboard build coming up in this stage can use a lot of tokens, so before diving in, check where your current Claude Code session and usage stand.
If you already have a Claude Code chat open, you can check right there. If not — for example, if you're just starting today's session — open PowerShell, get to your jarvis folder, and launch Claude Code first:
cd $HOME
cd jarvis
claude
- Either way, once you're in your Claude Code chat, type /usage and press Enter to see how much you have left.
- It's strongly recommended that you wait until your usage credits renew before starting this build, so you're working with a full, fresh pool of tokens rather than whatever's left over from earlier sessions.
Open a New PowerShell Window
Before cloning anything, start this stage in a clean PowerShell window. If you have any other PowerShell, command prompt, or Claude Code windows open right now, close them first — even if that means ending a running Claude Code session.
- Close any open PowerShell, command prompt, or Claude Code windows.
- Click the Start menu (or press the Windows key), type PowerShell, and press Enter to open a fresh window (a regular, non-administrator window is fine here).
Clone the Repo
Get to your jarvis folder, and pull down ai-visualizer as a sibling folder to backtalk.
cd $HOME
cd jarvis
git clone https://github.com/wcrowe2/ai-visualizer
Connect It to Backtalk
Backtalk and ai-visualizer are two separate programs that don't know about each other yet. Backtalk is the voice assistant you built in Stage 3; ai-visualizer is the on-screen face you're building now. While Backtalk runs, it continuously writes small status files to disk — a note saying it's idle, listening, thinking, or speaking, updated live as things change. ai-visualizer's job is to watch that same folder and redraw the face to match. This step is the plumbing that connects the two: telling ai-visualizer exactly which folder to watch, what to call your assistant on screen, and which face to show. It applies whether you end up using one of the four built-in faces or building your own custom one in the next step.
First, back in your PowerShell window, move into the folder and create your config file from the example one provided — your own copy is what actually gets used, so future updates to the project never overwrite your settings:
cd ai-visualizer
Copy-Item ai-visualizer.json.example ai-visualizer.json
Next, point it at Backtalk. This command sets bus_dir to your backtalk folder automatically — no typing a path by hand:
$config = Get-Content ai-visualizer.json | ConvertFrom-Json
$config.bus_dir = "$env:USERPROFILE\jarvis\backtalk"
$config | ConvertTo-Json | Set-Content ai-visualizer.json
Now set the name that shows up on screen — whatever you told your assistant to call itself back in Stage 2's interview, question 7. The example below uses "Jarvis," the name this tutorial's own assistant uses — before you paste it, replace just the word "Jarvis" with your own assistant's actual name, keeping the quotation marks in place around it:
$config = Get-Content ai-visualizer.json | ConvertFrom-Json
$config.name = "Jarvis"
$config | ConvertTo-Json | Set-Content ai-visualizer.json
Finally, decide on a face. It's strongly recommended that you skip ahead to Step 5 and build the custom face provided, rather than choosing one of the four pre-built faces — if you go that route, Step 5 sets this field for you automatically once your custom face is built, so you won't need to come back here. That said, if you'd rather use one of the four built-in faces instead, valid options are board (circuit board), radial (particle orb), rain (matrix rain), or neural (neural core). Replace just the word "board" below with whichever one you want, keeping the quotation marks in place around it:
$config = Get-Content ai-visualizer.json | ConvertFrom-Json
$config.face = "board"
$config | ConvertTo-Json | Set-Content ai-visualizer.json
Build Your Own Reactive Dashboard
Instead of using one of ai-visualizer's four built-in faces, you have another option: build a fully custom face of your own — a particle swarm with its own state colors and motion variety, plus a live view of your own priorities and notes, built specifically for you. If you'd rather just stick with the built-in face you just configured, you can skip this step and move on to Bringing It Together. This custom build is bigger than anything so far, so expect your assistant to ask a few questions and iterate a bit as it adapts things to your machine — that's normal, the same way any real build works.
This is a template. The prompt below is a suggested starting point, not a fixed spec — scaffolding for your own dashboard, not the finished product.
Be creative. Once the basics are working, keep talking to your assistant — typed or by push-to-talk through your voice line — and make it yours: resize the windows, change the font, change the colors of your badges, add a clock, add a name badge (something like "Jarvis"), add your own computer diagnostics panel — live CPU usage, GPU usage, temperature, RAM usage, and network activity. Whatever you want.
Move into the ai-visualizer folder and launch Claude Code there.
cd ai-visualizer
claude
With Claude Code now open in your ai-visualizer folder, paste this in:
I want you to build me a custom face for ai-visualizer — a new entry
in this project's faces/ plugin system, not a standalone app. Look at
the existing faces/ folder for reference: each built-in face lives in
its own subfolder with an index.html that includes core.js, calls
AV.init(), and reads AV.state, AV.env, and AV.samples in its draw loop
to react live to my Backtalk voice assistant's state. Build a new face
this same way, in its own folder inside faces/ (pick a short folder
name), reacting live to my assistant's state as it idles, listens,
thinks, and speaks. Build the following:
- A circular particle swarm as the centerpiece, made up of roughly
4,000 individual particles contained inside a bounding circle, so it
reads as one living, breathing swarm rather than a sparse handful of
dots. Each state gets its own distinct color and motion:
- Idle: calm electric blue, particles drifting gently at low
energy — quiet, ambient, at rest.
- Listening: a brighter cyan-blue, noticeably busier than idle,
with particles pulled subtly inward toward the center, reading
as focused attention.
- Thinking: gold, full motion, cycling randomly between at least
2-3 distinct swarm patterns so it never feels repetitive — for
example a tightly rotating vortex, a slow drifting cluster, or
concentric rings spinning in opposite directions.
- Speaking: also gold, but reactive live to the audio level from
the state files, cycling between 2-3 of its own distinct
patterns — for example a smooth breathing pulse tied to volume,
a spectrum/equalizer-style ring, or sharp percussive snaps timed
to the voice.
- Alert (an overlay on top of any of the above, for genuine issues
or errors): the entire swarm snaps to red, particles scatter
outward erratically with jittery, agitated motion, and a soft
red vignette bleeds in around the edges of the screen. This
should be unmistakable at a glance and override whatever color
or pattern the current state would otherwise show.
- Every transition — between states, between patterns within a
state, and in or out of alert — should ease smoothly rather than
jump-cut, so the whole thing feels alive rather than mechanical.
- A small toolbar below the swarm showing all four states (Idle /
Listening / Thinking / Speaking) at once, with the currently active
one lit up in its matching color. During an alert, the toolbar
should override this and pulse red instead, matching the swarm.
- A panel showing my academic priorities, read live from my vault's
Active Priorities.md file (in the JARVIS BRAIN folder I created back
in Stage 2) — each item showing its title, a countdown to its due
date (like "due in 3 days"), and a priority tag computed from how
soon it's due, using three tiers:
- High priority: due within 7 days from now, including anything
already overdue. Give this its own distinct, urgent color (for
example red).
- Medium priority: due between 8 and 14 days from now. Its own
distinct color, a step down in urgency (for example amber or
yellow).
- Low priority: due more than 14 days out. Its own calmer, distinct
color (for example green or a muted blue) so it reads as
"not urgent yet" at a glance.
Each tier's color should be used consistently for that item's tag
and border/accent so the three tiers are instantly distinguishable
without having to read the countdown text. Keep this panel focused
on what's actually relevant soon — drop anything due more than 14
days out entirely rather than cluttering the screen with far-off
items.
- A separate course deadlines panel, also read from Active
Priorities.md, grouped by course instead of one flat list — one
entry per course showing that course's own soonest-due item (using
the same three-tier color coding above), so I can see at a glance
what's coming up in each class individually. Each course should
always show its own soonest item even if it's more than 14 days out
— a course should never show nothing — but drop any of that course's
other, less-soon items beyond a reasonable cutoff so it stays to one
relevant line per class, not a full list.
- A simple notes panel I can glance at, reading from a plain text file.
Lay the screen out like this:
- Top-left corner: the academic priorities panel.
- Top-right corner: the course deadlines panel.
- Dead center of the screen: the particle swarm, as the visual
centerpiece.
- Bottom of the screen, under the swarm: the four-state toolbar
(Idle / Listening / Thinking / Speaking).
- Bottom-left corner: the notes panel.
Ask me anything you need to know about my setup first, then build it.
To test it and show me it actually working, start the server (python
server.py) in the background and open my default browser to the
address it prints — leave the server running when you're done rather
than stopping it, so the display is live and ready to use. Finally,
set "face" in my ai-visualizer.json config to this new face's folder
name so it opens by default.