-
-
chyron web ui
-
chyron -twitch
-
dev loop
-
intergrated twitch ui
Inspiration
Chyron is a live overlay for Twitch streams that turns chat and spoken commentary into headlines, summaries, and viewer quotes. A stream contains several conversations at once: the streamer speaks, viewers respond, and new topics appear in chat. We wanted those discussions to become part of the broadcast itself, with updates that follow the conversation and retain the messages behind them.
The starting point was the television chyron: a compact line of information shown over live video. Chyron applies that format to the streamer's own community, using Twitch chat and audio as its source material.
What it does
A streamer signs in with Twitch, connects their channel, and chooses whether to include chat, audio, or both. Chyron reads incoming messages and transcribes captured speech, groups related discussion into stories, and updates the overlay automatically. A developing topic can revise an existing headline while retaining its supporting messages. Viewer quotes use the original message text and author.
The workspace brings together live chat, transcripts, generated updates, and a video preview. Streamers can inspect the sources behind a story, dismiss an update, and adjust reporting focus, tone, timing, and context. The style catalogue offers 36 overlay designs. A separate ticker cycles through recent chat messages, keeping the community's words visible alongside the generated coverage.
The overlay works as a transparent browser source in OBS. Streamers can also choose a camera or shared screen and broadcast the composed preview from desktop Chrome to Twitch through Chyron's video relay. Twitch message deletions and chat clears remove affected evidence and dismiss dependent updates.
How we built it
We built Chyron with OpenAI Codex, using the produact brief, interface references, and feedback from the running application to guide implementation. Codex worked across the React and TypeScript interface, Twitch integration, model pipeline, AWS infrastructure, and broadcast relay. Development included automated tests, browser inspection, real model requests, and a private Twitch ingest test.
Twitch OAuth identifies the broadcaster and grants chat access. EventSub webhooks deliver messages and moderation events to the hosted API. Chyron verifies the webhook signature and broadcaster, then stores messages in an account-specific conversation window. The coverage request includes that window, existing stories, and the streamer's editorial settings.
AWS Bedrock supplies the coverage and transcription models. GLM 5 or GLM 4.7 Flash returns structured stories containing headlines, summaries, evidence IDs, and eligible quote IDs. Chyron validates those references before applying an update. Audio capture sends six-second segments through FFmpeg decoding, speech detection, and Gemma 4 E2B transcription. Transcripts enter coverage as speaker context, separately from viewer chat.
DynamoDB persists account state, messages, sessions, and encrypted Twitch credentials. AppSync Events sends revision notifications so the dashboard and overlay can fetch updated state. Vercel hosts the frontend and API. Browser broadcasts use a separate relay: WebM video and mixed audio travel over a secure WebSocket, then FFmpeg encodes H.264/AAC and sends the result to Twitch over RTMPS.
Challenges we ran into
Live coverage has to stay consistent as its inputs change. A viewer can delete a message while a model request is running, or the streamer can switch audio sources before transcription finishes. We tied work to source generations and checked those identities before applying results, so older work cannot restore removed material or enter a different conversation.
Quote handling exposed a related contract problem. A voice-only request could return a viewer quote ID even though no chat message was eligible. We changed the model-facing schema and prompt together: requests without eligible quotes omit quote selection, while chat requests restrict quote IDs to supplied viewer messages. We checked both affected paths against the real model.
Browser broadcasting required coordinating capture permissions, preview composition, audio mixing, network backpressure, and Twitch ingest. Separating the persistent FFmpeg relay from the hosted API gave the video path its own lifecycle and allowed a broadcast to stop cleanly when capture or upload failed.
Accomplishments that we're proud of
We connected Twitch chat, spoken commentary, generated updates, and broadcast delivery in one working application. The overlay follows developing conversations, preserves viewer attribution, and responds to moderation events. Streamers can change its presentation while using the same underlying coverage in the preview and external overlay.
The implementation was exercised with real Twitch messages, AWS coverage and transcription requests, and a private Twitch bandwidth test that reached ingest and stopped cleanly. The repository includes 87 passing automated tests covering evidence handling, sessions, audio, overlay behavior, and broadcast contracts, together with setup instructions and an MIT license.
What we learned
Structured output works best when the schema reflects the exact choices available for that request. Quote eligibility, source identity, and existing story IDs belong in the contract between generation and application state. Those details determine whether an update can be applied consistently as the conversation changes.
We also learned to verify each layer through its actual output. Tests check state transitions and evidence rules; browser inspection checks what the streamer sees; model requests exercise generation; ingest tests exercise video delivery. Working with Codex connected those checks to implementation changes, with concrete observations guiding the next revision.
What's next for chyron
We want to test longer broadcasts with multiple chat participants and more varied microphone and shared-tab audio. Those sessions will guide refinements to coverage timing, headline readability, and defaults for quiet conversations and fast chat. We also plan to expand the overlay catalogue around the layouts that prove most useful during streaming.
