Stream Chatter is a read-only Twitch chat overlay. It connects anonymously to a public channel with tmi.js and displays chatters in recent-first cards, with an optional standard chat layout.
- Anonymous Twitch chat connection with no OAuth setup.
- Channel-only connection form.
- Recent-first chatter cards and standard chat layout.
- Pinning, font-size controls, card-size controls, timestamps, and badge visibility toggle.
- Local first-letter avatars instead of Twitch profile image lookups.
- Proper Twitch badge images when the optional server-side badge API is configured.
- Bounded in-memory message history for longer sessions.
- Install dependencies with
npm install. - Start the development server with
npm start. - Open the local URL shown by Webpack.
- Enter a Twitch channel name and connect.
npm startstarts the development server.npm run buildcreates a production build indist.
No Twitch user OAuth is required for this version because the app only reads public chat messages. Chat sending and Twitch Helix user metadata lookups are out of scope for this pass.
Official Twitch badge images come from the Helix chat badge APIs, so the deployed Vercel app can use the included /api/twitch-badges serverless function. Set these server-side environment variables in Vercel to enable real badge icons:
TWITCH_CLIENT_IDTWITCH_CLIENT_SECRET
If those variables are not configured, chat still works and badges fall back to short text pills. Do not expose app secrets in the browser.