Building a Stream Page with a Built-In AI Assistant
Tonight I built a full streaming setup into the indigo-nx site. Not just a Twitch link — a proper /stream page with live detection, embedded player and chat, a Claude AI assistant, an OBS overlay, and an admin tool that generates blog posts from stream notes.
One session. Start to finish.
Why
I've been wanting to stream for a while — building projects live, gaming, whatever. The site already has the aesthetic and the audience tools (tiers, auth, journal). Streaming is the obvious next layer. But I didn't want to just drop a Twitch link in the nav and call it done. I wanted the stream to live inside indigo-nx, styled to match, with features that make it more than just an embed.
The Platform Question
Started with YouTube. Got the whole integration built — YouTube Data API v3, live detection, VOD archive, the works. Then hit a wall: YouTube requires 50 followers before you can go live. Twitch has no gate. You sign up, you stream. So I scrapped the YouTube integration and rebuilt it for Twitch in about twenty minutes.
The Twitch channel is indigonx. Already set up with the indigo-nx branding.
What Got Built
The Stream Page
/stream gives you everything in one place:
- Live status indicator — polls the Twitch Helix API every 60 seconds. When the channel is live, you get a pulsing red dot, the stream title, viewer count, and game category. When offline, it shows the coming-soon state.
- Twitch player + chat — side by side on desktop, stacked on mobile. The player auto-embeds when you're on the page. Chat is the dark popout variant so it matches the site aesthetic.
- Stream schedule — placeholder for now, will fill in once I've settled on regular times.
- Past streams archive — pulls VODs from the Twitch API automatically.
All styled with the same cyber-border panels, Orbitron headings, and scanline-over-everything approach as the rest of the site.
Claude Stream Assistant
This is the part I'm most interested in. There's a chat panel on the stream page powered by Claude. You can ask it questions about any indigo-nx project and it knows the details — VIEWSHIFT, VESSEL, DEVSCAN, the hardware builds, all of it.
Right now it's admin-only because API costs add up. Members see the UI with a demo conversation and a "coming soon" message. Everyone else sees a sign-in prompt. The API route checks auth server-side too, so you can't bypass it.
The assistant uses Sonnet with a system prompt that covers every active project. Future plan is to make it pull live data — latest blog posts, current project status — instead of a hardcoded list.
OBS Overlay
/stream/overlay is a standalone HTML route — no nav, no footer, transparent background. It's designed to be added as a browser source in OBS. A small cyberpunk panel sits in the bottom-left corner and auto-rotates Claude-generated commentary about indigo-nx projects every 45 seconds.
It's subtle. Just a little context for viewers who just tuned in.
Post-Stream Summary Generator
Admin-only feature. After a stream, I can enter notes about what happened — key moments, projects worked on, breakthroughs — and Claude generates a full MDX blog post draft. Frontmatter included, tagged with stream, ready to copy into the content folder.
The idea is to make the write-up frictionless. Stream ends, notes go in, draft comes out, I edit and publish. No staring at a blank page.
The Stack
Backend:
lib/twitch.ts— Twitch Helix API wrapper with client credentials token caching/api/stream/status— live check endpoint/api/stream/vods— past streams endpoint/api/stream/ask— Claude assistant (auth-gated)/api/stream/summary— blog post generator (admin-only)
Frontend:
TwitchEmbed.tsx— player + chat iframes with responsive gridStreamStatus.tsx— live polling with viewer count and game categoryStreamAssistant.tsx— Claude chat UI with tier-based access controlVodArchive.tsx— auto-populated stream archiveStreamSummary.tsx— admin post generator
New dependencies: @anthropic-ai/sdk for the Claude integration. Everything else was already in the stack.
What's Next
- Actually stream something
- Fill in the schedule once I've got regular times
- Open the assistant to members when budget allows
- Wire dynamic project data into the assistant's context
- Maybe a Twitch chatbot version of the assistant down the line
The page is live now at indigo-nx.com/stream. Nothing's streaming yet, but the infrastructure is ready. When I hit go live, everything lights up automatically.