Unified multi-platform live chat for streamers. StreamBridge ingests chat from Twitch, Kick, YouTube, and Discord, normalizes it into one event stream, and renders it as a single overlay you can drop into OBS as a browser source.
Twitch ┐
Kick ├─▶ connectors ─▶ relay (WebSocket) ─▶ /overlay/[bridgeId] ─▶ OBS
YouTube│
Discord┘
server/— Node relay: per-platform connectors, message-normalization pipeline, and a WebSocket relay that broadcasts unifiedServerEventframes.src/— Next.js 16 (app router, React 19, Tailwind v4) frontend: the landing page and the OBS overlay route.
# 1. Relay server
cd server && npm install && npm run dev # ws://localhost:9800
# 2. Frontend (separate terminal)
npm install
cp .env.example .env.local # adjust NEXT_PUBLIC_RELAY_URL if needed
npm run dev # http://localhost:3000Add a Browser Source in OBS pointing at:
http://localhost:3000/overlay/<bridgeId>
<bridgeId> identifies which bridge configuration to render (any string for
now; wired to per-bridge config server-side later). The page background is
transparent so OBS shows only the chat.
| Param | Values | Default | Meaning |
|---|---|---|---|
theme |
transparent | dark | light |
transparent |
Row styling (transparent = OBS-friendly) |
max |
1–200 |
30 |
Max messages kept on screen |
font |
10–48 |
18 |
Base font size (px) |
anim |
0–2000 |
300 |
Message-in animation duration (ms) |
badges |
0/1 | true/false |
true |
Show subscriber/mod/vip badges |
emotes |
0/1 | true/false |
true |
Render emotes inline |
platformIcon |
0/1 | true/false |
true |
Show the source-platform icon |
relay |
ws://… | wss://… |
env / default | Override the relay WebSocket URL |
Example — dark theme, 50 messages, no badges:
http://localhost:3000/overlay/my-stream?theme=dark&max=50&badges=0
The overlay reconnects automatically (exponential backoff, capped at 10s) if the relay drops, so it survives relay restarts without touching OBS.
?relay= query param → NEXT_PUBLIC_RELAY_URL → ws://localhost:9800.