How to make your own OBS overlay with AI

You don't need a designer or a week of tutorials to get an overlay that actually looks like your stream. Describe it, test it, paste one URL into OBS. This guide covers the whole process, including how to write prompts that get it right the first time.

What an OBS overlay really is

Before asking an AI to build one, it helps to know what you're asking for. Almost every modern stream overlay, whether it's an alert box, a chat box, a goal bar or a webcam frame, is a web page. OBS shows it with a Browser Source, which is a small built-in Chrome window layered over your scene.

That has three consequences:

• It's HTML, CSS and JavaScript. That's exactly what AI models are good at writing, which is why "describe it and get it" works so well for overlays.
• The background must be transparent. Anything that isn't drawn is see-through, so your game shows underneath.
• It has to listen to your channel. An alert needs to know when someone subs, cheers bits or raids. On Twitch, most of these events arrive through your channel's public chat, which an overlay can read anonymously without logging in.

So "making an overlay with AI" really means three jobs: writing the page, wiring it to Twitch events, and testing it before you go live. A general chatbot can do the first one. The other two are where most people get stuck.

Make an overlay with AI in 5 steps

Here's the fastest path, using Overlaify's overlay studio. It's built for this one job, so the Twitch connection, the test events and the hosting are already handled.

1. Pick what you're making

Open the studio and choose a type: Alert box, Chat, Goal bar, Ticker, Cam frame, or Anything for chat games, counters and other ideas that don't fit a box. The type tells the AI which events matter and where things usually sit on screen.

2. Describe it like you'd brief a designer

Write a sentence or two about the look and the behavior. Any language works. For example:

The next section covers what to put in a prompt so the first result is close.

3. Test it with fake events

The preview has buttons for chat, follows, subs, gifted subs, bits and raids. Fire a few. Turn on auto mode to throw random events at it continuously, so you can see how it handles a burst of gift subs or a long chat message. You never have to wait for a real raid to find out the text overflows.

4. Ask for changes

Not quite right? Say what to change: "make the name bigger", "slower fade-out", "move it to the top left". The AI edits the overlay you have instead of starting over, and every change is saved as a version you can go back to.

5. Copy the URL into OBS

Click Add to OBS under the AI's reply, type your Twitch channel name, and copy the link. It looks like this:

https://www.overlaify.com/o/k3Xa9pQ2mZ?channel=yourname

In OBS, add a Browser Source, paste it and set the size to 1920 × 1080. The full settings are below. That's it: the overlay connects to your chat on its own, with no download and no Twitch login.

How to write a prompt that works

The biggest difference between a generic result and a great one is the prompt. Vague prompts get vague overlays. A useful prompt answers six questions:

Here's the same idea written two ways:

A few more tips that save generations:

• Give exact colors. "Pink that matches my emotes, #ff7eb6" beats "pink".
• Say what to leave out. "No background box, just floating text" or "no sound".
• Mention your layout. If your webcam sits in the bottom right, say so, so alerts don't land on your face.
• One overlay per job. An alert box and a chat box as separate overlays are easier to place and tweak than one giant scene.
• Steal good ideas. Browse the free overlay library, open one you like, and remix it instead of starting from a blank page.

Refining: change it by talking

Your first result is a draft. Treat the follow-up messages like notes to a designer, one or two changes at a time:

Small, specific requests work better than rewriting the whole description. If a change makes things worse, roll back to the previous version and phrase it differently. Use the Fast model for quick tweaks; switch to Smart for complex scenes with lots of moving parts, like a boss-fight goal bar or a chat-driven mini-game.

Adding it to OBS the right way

1. In the Sources panel, click + and choose Browser. Give it a name like "Alerts".
2. Paste your overlay URL into the URL field. Make sure it ends in ?channel= followed by your Twitch name.
3. Set Width to 1920 and Height to 1080, even if the overlay only uses a corner. The overlay positions itself inside that canvas.
4. If the overlay plays sound, tick Control audio via OBS, then set the source to "Monitor and Output" in Advanced Audio Properties if you want to hear it yourself.
5. Leave Custom CSS as it is. OBS's default already makes the page background transparent.
6. Click OK, then drag the source to the top of the list so it draws above your game and webcam.

Using the same overlay in several scenes? Add it once, then use Add Existing in other scenes, so it's one browser instance and alerts don't play twice. The same steps work in Streamlabs Desktop, Meld and TikTok Live Studio: look for a "Browser Source" or "Web page" source.

The DIY route: a general chatbot and a local file

You can also ask a general AI chatbot to write the overlay and run it as a local file. It's free and you control everything, but you take on the parts a dedicated tool handles for you. Here's how it goes.

1. Ask for a single, self-contained HTML file

Be explicit about the constraints, or you'll get a demo page with a white background and buttons:

Write a single self-contained HTML file to use as an OBS Browser Source
at 1920x1080. Transparent background, no visible UI or buttons.
It's a sub alert for Twitch: [describe the look here].
Read events by connecting anonymously to Twitch chat over WebSocket
(wss://irc-ws.chat.twitch.tv:443) for the channel in the ?channel= URL
parameter. Show subs, resubs and gifted subs from USERNOTICE messages.
Queue alerts so they never overlap. Add a ?test=1 mode that fires a fake
sub every 5 seconds so I can preview it without a real event.

2. Understand the Twitch connection

The part chatbots most often get wrong is talking to Twitch. The anonymous connection is short: log in with a justinfan nickname, ask for tags, join the channel. Subs, gift subs and raids arrive as USERNOTICE messages with a msg-id tag, and bits arrive as chat messages with a bits tag. If your chatbot's code doesn't look roughly like this, point it here:

const channel = new URLSearchParams(location.search).get('channel');
const ws = new WebSocket('wss://irc-ws.chat.twitch.tv:443');
ws.onopen = () => {
  ws.send('CAP REQ :twitch.tv/tags twitch.tv/commands');
  ws.send('NICK justinfan' + Math.floor(Math.random() * 99999));
  ws.send('JOIN #' + channel.toLowerCase());
};
ws.onmessage = (e) => {
  for (const line of e.data.split('\r\n')) {
    if (line.startsWith('PING')) { ws.send('PONG :tmi.twitch.tv'); continue; }
    const tags = Object.fromEntries((line.match(/^@(\S+)/)?.[1] || '')
      .split(';').map(kv => kv.split('=')));
    if (line.includes(' USERNOTICE ')) {
      // tags['msg-id']: sub, resub, subgift, submysterygift, raid ...
      showAlert(tags['msg-id'], tags['display-name'] || tags['msg-param-displayName']);
    }
  }
};

Note that follows don't come through chat. Follower alerts need an authenticated connection to Twitch's EventSub API, which is a bigger project than an overlay file.

3. Load it in OBS

Save the file as alert.html. In the Browser Source, either tick Local file and pick it, or paste a file:/// URL so you can add ?channel=yourname to the end. Each time you change the code, click Refresh cache of current page in the source's properties.

Which route should you pick?

If you enjoy tinkering with code, the DIY route is a good way to learn. If you just want a great overlay on stream tonight, use a tool that's already connected to Twitch.

Troubleshooting

The overlay is blank in OBS

That's usually normal: an alert box is invisible until something happens. Add &test=1 to the end of the URL to fire simulated events and check placement, then remove it before going live. Also check that ?channel= is your Twitch login name, not your display name.

There's a black or white box behind it

The page is painting its own background. Ask the AI: "make the page background fully transparent". In OBS, make sure Custom CSS still contains background-color: rgba(0, 0, 0, 0).

It's cut off, tiny or blurry

The Browser Source size doesn't match what the overlay was built for. Set it to 1920 × 1080 and resize it on the canvas by dragging, rather than changing the width and height fields.

I can't hear the alert sound

Tick Control audio via OBS and check the source isn't muted in the mixer. Viewers hear it on Output; to hear it yourself, set Audio Monitoring to "Monitor and Output".

Alerts play twice

The same overlay is open in two Browser Sources that are both active, or also in a browser tab. Use one source and "Add Existing" it into other scenes.

FAQ

Can AI make an OBS overlay?

Yes. An overlay is a web page, and AI models are good at writing web pages. A purpose-built tool also connects the page to Twitch events, lets you test it with fake events and hosts it for you.

Do I need to know how to code?

No. You describe it and ask for changes in plain words.

Do I need to log in with Twitch?

No. Overlays read your public chat anonymously, which covers chat, subs, resubs, gifted subs, bits and raids. Follower alerts need a Twitch login.

Will an overlay slow down my stream?

A well-made overlay is a lightweight page that animates with GPU-friendly CSS. It doesn't touch your game or your encoder. If you ask for something heavy, like thousands of particles, ask the AI to cap the count.

Is it free?

Everyone gets 5 free Fast generations a day on Overlaify, and the overlay library is free to use. Paid plans add the Smart model for complex scenes.