ChatSpin

• 

  ChatSpin

Inspiration

A live chat can move faster than a streamer can respond. Good questions get buried, people ask the same thing in different words, and viewers who arrive late miss answers that were already given. Language differences add another barrier.

I built ChatSpin to give those questions a place in the show. The idea is simple: understand what the audience is asking, preserve each person's contribution, and turn choosing the next question into a shared, interactive moment.

What it does

ChatSpin connects to Twitch chat, detects natural questions without requiring a command, and uses AI to group questions that seek the same answer. It preserves the original messages and counts distinct supporters, so repeated messages from one person do not look like support from multiple viewers.

A synchronized wheel lets the streamer select a question with equal chances, weight groups by support, or make a manual selection.

A separate Participant Wheel lets the streamer randomly select a viewer rather than a question. Viewers opt in through Twitch chat with !join and can withdraw with !leave. Each distinct Twitch account gets one entry, and every eligible participant has an equal chance. The streamer can close registration before a draw. Selected participants are excluded from future draws by default, with an option to allow repeat turns.

Streamers can spotlight a question, save an approved answer, and remove answered questions from future draws. When an equivalent question arrives later, ChatSpin can reply publicly in Twitch chat, mentioning the viewer and using the streamer's approved answer rather than inventing one. With OpenAI configured, automatic replies are translated into the language of the incoming question; inside the extension, saved answers follow the viewer's selected display language. The approved original remains intact, and translations are cached separately. Without an OpenAI key, public replies can still send the original approved answer. We verified this live by saving an answer in English and receiving its Spanish translation after another viewer asked an equivalent question in Spanish.

The interface supports English, Spanish, German, and Russian. Questions can stay in their original language or be translated. The Twitch extension lets viewers choose their own display language while sharing the same draw and winner. Questions enter the wheel only after grouping and previous-answer checks are complete and, when a translated display language is selected, the translation is ready. This prevents already-answered questions and untranslated text from briefly appearing in the draw.

ChatSpin includes a web dashboard, a transparent OBS presentation, and a Twitch extension with panel, overlay, and mobile views. The channel owner can spin from the center of the wheel in both the web dashboard and the overlay, and save answers directly in the extension. The channel owner can also authorize specific Twitch moderators to use the extension controls; moderator access is explicitly granted per channel, not enabled for every moderator automatically. Viewers can move the panel to avoid covering the video. The Twitch extension is registered as "ChatSpin by TapLinko" and is currently available in Hosted Test for authorized testing accounts.

How we built it

I built ChatSpin with OpenAI Codex as a development collaborator, iterating from a local prototype to a working Twitch integration. During live tests, I described issues and product changes, used Codex to inspect the implementation, and tested the resulting changes in the browser and on Twitch.

I also used Codex to help prepare the demo script, edit my real screen recordings, and synchronize them with AI-generated narration. The demo shows ChatSpin running on Twitch, alongside footage of the development process.

The application uses React, TypeScript, and Vite for the interface, with a Node.js and Express backend. Twitch OAuth connects a streamer's account, and EventSub delivers chat messages. OpenAI handles question detection, semantic grouping, and translation. The local version uses SQLite; the hosted version runs on Vercel with Supabase for persistent, channel-specific data.

The extension reuses the same question and draw engine. Its backend verifies Twitch-signed authorization and separates viewer actions from owner controls. The hosted backend includes provider-managed AI quotas, cached reads, and background processing that rebases its results onto current channel state so interactive actions do not have to wait for AI work. Channel-specific moderator delegation and backup recovery are implemented. The code is open source under the MIT license. The repository includes a "Built with Codex" section documenting the development workflow and the main Codex session ID.

Challenges we ran into

Moving from a local process to serverless hosting required durable message processing, persistent sessions, and isolation between channels. We also had to handle concurrent updates without losing questions or duplicating public replies.

Real Twitch testing exposed problems that a successful build could not catch: an opaque extension background covering the stream, stale wheel candidates, delayed translations, and mismatched deployment settings. A database conflict code also triggered repeated retries; tracing the actual queries helped identify and correct it.

Semantic grouping required particular care. Questions about someone's origin can be equivalent across languages, while origin and current residence may need different answers. Time-sensitive questions also need a different policy from stable facts.

Accomplishments that we're proud of

• Tested real questions flowing from Twitch chat into ChatSpin, through grouping and translation, and into the live presentation.
• Tested approved-answer replies and cross-language answer translation directly in Twitch so viewers do not need to open another website.
• Built a working Twitch overlay alongside the existing dashboard and OBS integration.
• Preserved original questions while adding multilingual presentation and shared draws.
• Passed 149 automated tests covering authorization, channel isolation, concurrent processing, provider quotas, translations, recovery, and wheel behavior.

What we learned

Building live with Codex made the feedback loop very concrete: a viewer's question or an awkward interaction could become the next test and improvement. It also reinforced that AI-generated changes need inspection and verification, especially around concurrency, permissions, and external services.

We learned to distinguish a passing build from a working live experience. Small details such as when a question appears, whether a translation changes during a spin, and whether an answer remains reusable have a large effect on trust.

What's next for ChatSpin

Our next step is broader live validation with streamers and their communities: realistic multi-channel load, mobile layouts, moderator permissions, long replies, disconnect recovery, and backup restoration. Automated tests complement, but do not replace, validation during real live streams.

We also plan to complete Twitch's public extension review and explore an optional managed hosting service while keeping self-hosting available through the open-source project. Provider-managed quotas and access controls are implemented; pricing and payment processing are not yet implemented.

Built With

• codex
• express.js
• github
• node.js
• obs-studio
• openai
• postgresql
• react
• sqlite
• supabase
• twitch
• typescript
• vercel
• vite