Skip to content

readme.md

Latest commit

 

History

History
36 lines (24 loc) · 1.57 KB

readme.md

File metadata and controls

36 lines (24 loc) · 1.57 KB

Stream Chatter

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.

Features

  • 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.

Usage

  1. Install dependencies with npm install.
  2. Start the development server with npm start.
  3. Open the local URL shown by Webpack.
  4. Enter a Twitch channel name and connect.

Scripts

  • npm start starts the development server.
  • npm run build creates a production build in dist.

Twitch Auth And Badges

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_ID
  • TWITCH_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.