Claude Code · OBS · YouTube Live
Every new subscriber makes me sprint for 60 seconds.
My stream shows the countdown, my real Apple Watch heart rate, a moving cyclist, live chat, and camera controls. I described it in plain English, and Claude Code built the custom overlay without me writing a line of code.
Build it yourself
What you need before opening Claude Code.
This is a local setup on your streaming PC. Start with the subscriber counter, prove it works in OBS, and only then add heart rate and chat controls.
OBS Studio
Install OBS and make one scene you can safely use for testing.
Claude Code
Open it in a new, empty folder. That folder will hold the overlay page and the program that feeds it data.
YouTube API key
Create a YouTube Data API v3 key and keep it out of the overlay page. Give it to the local program through an environment file.
Your channel ID
Use the channel ID—not the @handle—when the local program asks YouTube for your subscriber count.
Keep the keys out of the web page
Your YouTube key, Pulsoid token, and OBS password belong in the local program's .env file. Ask Claude to create a safe .env.example with blank values and to exclude the real file from sharing.
What viewers see
The stream reacts when somebody subscribes.
Subscriber sprints
Every new subscriber adds 60 seconds. Another subscriber pushes the cyclist back for another minute.
Live heart rate
My real Apple Watch heart rate stays on screen while the cyclist rides toward the finish flag.
Chat leaderboard
New messages appear beside the heart rate, with a live ranking of the people talking most.
Chat camera control
The !view command changes the OBS camera angle, with a cooldown so the stream never becomes a strobe light.
Copy these in order
The actual prompts to build each part.
Use one prompt, run what Claude gives you, and test it before moving to the next. If something fails, paste the exact error back into the same Claude Code session instead of starting over.
Prompt 1 — Make the overlay
“Build a 1920×1080 transparent OBS browser overlay. Put my YouTube subscriber count and a goal bar in the top right. Use my brand colors. Keep all other areas transparent. Include a test button that simulates one new subscriber so I can check the animation without going live.”
Prompt 2 — Add the local data program
“Add a small local program that checks my YouTube subscriber count every 20 seconds with the YouTube Data API v3. Read YOUTUBE_API_KEY and YOUTUBE_CHANNEL_ID from a .env file. Never put the API key in the browser page. Send an update to the overlay when the count increases. Give me exact install and start commands for Windows.”
Prompt 3 — Add the sprint
“When the subscriber count increases, show a 3-2-1 countdown and start a 60-second sprint timer. Animate a cyclist moving toward a finish flag during that minute. If another subscriber arrives before it ends, add 60 seconds and move the cyclist back to match the new remaining time. Add a manual test control for this event.”
Prompt 4 — Add heart rate
“Add a live heart-rate area to the overlay. Use Pulsoid's internet connection rather than direct Bluetooth. Keep the Pulsoid token in the local program, not in the browser page. If heart-rate data stops, keep the last reading visible but mark it disconnected. Explain every Pulsoid setup step I need to complete outside the code.”
Prompt 5 — Add chat and camera control
“Read my YouTube live chat, show recent messages and a leaderboard, and listen for !view. When !view appears, switch to the next approved OBS scene through OBS WebSocket. Add a cooldown and an allowlist of scene names so chat cannot switch to private or setup scenes. Give me the exact OBS settings to copy into the .env file.”
OBS setup
Put the finished page on your stream.
- 1
Start the local program and open the overlay address it prints. Do not paste a file path unless Claude specifically built a file-only version.
- 2
In OBS, choose Sources → + → Browser, then paste that overlay address.
- 3
Set Width to 1920 and Height to 1080. Leave the custom frame rate off unless the animation looks choppy.
- 4
Turn on “Refresh browser when scene becomes active” while testing so code changes appear reliably.
- 5
Put the Browser source above your camera and game or screen sources, then resize nothing—the page was built for the full canvas.
- 6
Use the overlay's test buttons before going live: fake subscriber, sprint reset, heart-rate disconnect, chat message, and !view.
Before the real livestream
Run a private or unlisted stream. Trigger every test, disconnect Pulsoid once, send repeated !view commands, and restart the local program. Do not discover the recovery behavior while you are already sprinting.
The whole system
It comes down to three pieces.
A web page OBS can display
OBS has a Browser source. Point it at a web page and OBS draws that page over your stream, while transparent areas stay see-through. That page handles the alerts, timers, goal bar, and animations.
A small program feeding it live data
A lightweight program on my PC checks the YouTube subscriber count, receives heart-rate data, reads live chat, and tells OBS when to switch camera angles.
Claude Code writing both
I described each feature and design change in plain English. Claude Code built the page and the background program, then changed them one sentence at a time while I tested the setup.
The first prompt
Start small, then change one thing at a time.
This was the exact sentence that started the build. The animations, heart rate, chat, and camera controls came later through short follow-up requests.
“Build me an OBS overlay that shows my YouTube subscriber count in my brand colors.”
Build sequence
From blank folder to live audience control.
- 1
Start with the subscriber counter
I opened Claude Code in an empty folder and used the starter prompt below. A couple of minutes later, I had the first version of the overlay page.
- 2
Add it to OBS
In OBS, add a Browser source, paste the page address, and set the size to 1920 by 1080. The transparent parts of the page disappear into the stream.
- 3
Make it react to subscribers
The PC program checks YouTube every 20 seconds with a free YouTube API key. When the count rises, the three-second countdown appears and a 60-second sprint begins.
- 4
Send the heart rate over the internet
Bluetooth from my bike to my desk kept dropping. I switched from HeartCast to the free Pulsoid app, which sends the reading over the internet instead. It has stayed connected since.
- 5
Tune the overlay while using it
I told Claude what was wrong in normal language: move a box, add the bike timer, push the cyclist back after another subscriber, and sweep a checkered flag across the screen when the sprint ends.
- 6
Connect chat and camera switching
The program reads YouTube chat, shows messages and a leaderboard, and uses OBS WebSocket to change cameras when someone types !view. A short cooldown prevents rapid switching.
When it does not work
Fix the likely problem first.
The overlay is a solid rectangle
Tell Claude to make the page background transparent, then remove any background color from the outermost page element.
Subscriber count never changes
Confirm the API is enabled, the channel ID is correct, and the local program—not the browser page—can read both values from .env. Remember that public subscriber counts may be rounded.
OBS shows an old version
Right-click the Browser source and choose Refresh, or toggle “Refresh browser when scene becomes active.”
Heart rate freezes
Check the Pulsoid connection first. If the bike and PC are far apart, avoid a direct Bluetooth chain and send the reading over the internet.
!view does nothing
Open OBS WebSocket Server Settings, enable it, and verify the port and password match the local program. The target scene must also be on your allowlist.
The failure that mattered
Bluetooth kept freezing mid-ride.
The first version sent my Apple Watch reading through HeartCast, my phone, and Bluetooth to the PC. The distance between my bike and desk made the signal unreliable.
Claude helped measure the signal and isolate the problem. Moving the same data through Pulsoid over the internet fixed it.
The practical rule
If your PC and heart-rate monitor are not side by side, skip Bluetooth and send the reading over the internet.
The honest live test
Two real subscribers. Two real sprints.
I tested the system live twice in one day. Three people showed up over an hour, so most of the chat and alerts in the demo were my own tests. Two subscriptions were real, and I sprinted for both.
FAQ
Custom OBS overlay questions
Behind the video
The gear I use to make these.
Everything here is sitting in my office right now. If you buy through an Amazon link, I earn a small commission — it helps the channel, and costs you nothing extra.
Sony Alpha a5000
Compact mirrorless camera for talking-head videos.
View on Amazon →Elgato Facecam
Dedicated webcam when I don't want to rig the mirrorless.
View on Amazon →Elgato Key Light
Bright, dimmable, computer-controlled key light.
View on Amazon →Elgato Stream Deck +
One-press control for lights, scenes, and apps.
View on Amazon →Elgato Wave:3 Mic
Clean mic for voiceovers and screen recordings.
View on Amazon →DJI Mic Mini
Wireless lav mic for away-from-desk shots.
View on Amazon →Elgato Prompter
Built-in screen so I can read while looking at the lens.
View on Amazon →Meross Smart Plug
Reliable HomeKit smart plugs for fans and lamps.
View on Amazon →Govee Smart Bulbs
Color Wi-Fi bulbs with app and voice control.
View on Amazon →EMART Umbrella Lights
Budget-friendly fill lights for even coverage.
View on Amazon →Amazon Associates disclosure: I earn from qualifying purchases. I only list gear I own and use.
More from Chad
Keep exploring
- Visit page
Headroom for Claude
Open-source context compressor that cuts Claude token usage by 60–90% without changing your workflow.
- Visit page
Live Subscriber Count
Build a live YouTube subscriber counter for your desk.
- Visit page
Financial Audit Template
Free Claude prompt that audits your finances in minutes.