Korivash

Work / Twitch chat overlay editor

ChatSkins

A browser editor for game-style Twitch chat overlays. Pick a skin, change anything about it, then paste one link into OBS.

Open getchatskins.comHow it works

Role
Idea, direction and testing. The application code was written by OpenAI Codex agents.
Status
Live. Built for the Codex x TwitchCon Hackathon (2026).
Platform
Web. Works in OBS, Streamlabs and any app with browser sources.
Stack
HTML, CSS and JavaScript modules, Node, Twitch IRC and EventSub, OpenAI API
The ChatSkins editor: quick-start choices for vibe, colors and chat size on the left, and a live preview of chat inside a painted moth-and-lantern frame on the right.

The problem

In-game chat has personality: a gold-trimmed guild window, a classic RPG dialog box, the blocky chat of a sandbox game. A stream overlay usually looks like everyone else’s.

ChatSkins set out to make Twitch chat feel like part of the game being played, and to make setup easy for streamers who do not write code: pick a look, make it yours, paste one link into OBS.

What I built

  • 82 looks to start from. 24 game-inspired skins, 18 hand-painted frames, 12 illustrated skins, 12 animated skins and more.
  • Frames with your name on them. The channel name sits on the frame’s plaque in a font that matches the art. Recolor the frame, add glow and set the background behind chat.
  • Describe it, get it. Type what you want and a preview appears right away. About 15 seconds later a frame painted for that description arrives, with the name on the plaque and chat fitted inside.
  • Ask ChatSkins. A built-in guide that knows every setting. It opens the right tab, walks through OBS, channel points and alerts, and can apply a style.
  • Frame Studio and Place it. Build a frame from 60 parts, then drag, resize or snap chat anywhere on the stream.
  • Chat viewers can play with. !skin switches the overlay live, !skinvote starts an on-screen vote, and channel point rewards trigger effects. One switch turns chat commands off.
  • Matching alerts and emotes. Follows, subs, gifted subs, cheers and raids styled to match the skin. Twitch, 7TV, BTTV and FFZ emotes.

No account and no install are needed. Twitch login is optional and only unlocks alerts and channel points.

How it works

There is no saved overlay on a server. The editor writes every choice into the link itself, and the overlay page rebuilds the look from that link each time OBS loads it.

  1. Editor

    Pick and tweakA skin from the catalog plus whatever the streamer changed

  2. Link

    Settings in the URL fragmentOnly the difference from the catalog skin is stored, compressed. Older links keep working as options are added

  3. Overlay page

    OBS browser sourceDecodes the link, merges it with the catalog skin and sets up the frame, alerts and chat commands

  4. Twitch

    Chat over IRCRead only. The overlay never posts
    EventSubFollows, subs, cheers and raids for alerts
    EmotesTwitch, 7TV, BTTV and FFZ

  5. Screen

    DOM rendererBuilds names, badges, emotes and text, sizes the panel and keeps the messages that fit

A small Node service behind the site handles the AI features: the setup guide, the “describe your chat” helper and painted frames. The API key stays on the server, and there are daily usage limits.

How it was built

I came up with the idea and directed every round from Discord: what to build next, what looked wrong, what to cut. OpenAI Codex did the building, as a small team of agents with one job each. A designer agent turned ideas and bug reports into layouts, skin recipes and mockups. A builder agent wrote the app code and the tests. A lead agent turned my feedback into prompts, tested each build in a real browser and shipped it.

The loop never changed: design, build, test, measure, fix. Every task is one prompt file in the public repository, and all 40 Codex sessions are logged next to their prompts.

Frame art by Korivash and KittyVenom (made with ChatGPT image generation) and by OpenAI Codex image generation.

Hard problems and the decisions made

Fitting chat inside painted art

Problem Every painted frame has a different window. Placing chat by eye was always a little off, and messages overlapped the art or spilled out.

Decision Build a measuring tool that finds the largest empty area in each frame and the exact spot for the name plaque. Then handle the remaining causes one by one: late web fonts, rows rounding to whole pixels and preview scaling.

Result Messages fit at any text size.

Making generated frames usable

Problem The first generated frames were assembled from parts and did not look good. Painted images looked better but brought new problems.

Decision Check that the center of each painted image is see-through and repaint once if it is not. Measure the window and plaque automatically for every new image.

Result A typed description becomes a usable frame, with chat in the right place, in about 15 seconds.

Keeping the editor simple

Problem Every added feature made the menu harder to read.

Decision Redesign the options twice. The result is short tabs, a “Show all options” switch for power users and one-click setup for channel points.

Real Twitch, not test chat

Problem Channel points, alerts and chat commands had to work on a live channel.

Decision Test with a real moderator bot in a real chat, and render the full skin catalog through the real overlay to measure it.

Frames that vanished for some visitors

Problem The server was missing a MIME type for one image format, and the CDN cached the “not found” response.

Decision Add a version tag to every asset URL.

Result A bad response can no longer outlive the deploy that caused it.

Guard rails for the guide

Problem A built-in assistant must not leak anything or be free to run all day.

Decision The guide may not reveal keys, tokens, logs or code. Painting has daily limits, and a design reaches the public gallery only after review.

The stack, and what each part is for

HTML, CSS, JavaScript modules
The site, editor and overlay. No framework and no build step.
URL fragment
Holds the whole overlay configuration, so basic use needs no account and no database.
Twitch IRC and EventSub
IRC reads chat. EventSub delivers the events behind alerts.
Node
One HTTP service for the AI endpoints, run with no npm install.
OpenAI API
A small, fast model for the guide and the describe helper, and image generation with a transparent background for painted frames.
OpenAI Codex agents
Wrote the application code. One agent designed, one built, and each task was a single written prompt.
Tests
More than 70 test files, run with Node’s built-in test runner.

Screens

ChatSkins video thumbnail: “Your chat, skinned. Hand-painted frames with your name on them”, beside an autumn-themed chat frame.Watch the ChatSkins video on YouTube
Opens on YouTube. Nothing from YouTube loads on this page.
A grid of the 18 hand-painted ChatSkins frames, each with sample chat fitted inside its window.
All 18 painted frames, rendered by the real overlay.
The Guild Chat skin over a stream: messages tagged Party and Guild in MMO chat colors, with an emote-rain alert at the top.
The Guild Chat skin, with Guild and Party channels.
The ChatSkins editor testing chat play: an on-screen vote between three skins, with 43 seconds left.
A viewer vote for the next look, simulated in the editor.

Timeline and what is next

  1. Oct 25, 2026First Codex session: the design brief
  2. Oct 25, 2026Editor, overlay and a survey of popular chat overlays, all in the first day
  3. Oct 26, 2026Session 40 of 40 logged

Have something to build?

Tell me what it needs to do and where it has to run. I answer email myself.

Write a message[email protected]