Fast Path

Quick Setup

Use this page when NekoBot is installed and you want the shortest path to a working OBS overlay with multiple trigger-driven boxes.

1. Connect Streamer.bot

Streamer.bot setup page

Connect Streamer.bot first so NekoBot can load the trigger catalog before you bind commands, actions, or raw subscribed events to boxes.

  1. In Streamer.bot, enable the WebSocket server.
  2. Open NekoBot Setup Home and choose Streamer.bot Setup.
  3. Turn on Enable Streamer.bot bridge.
  4. Enter the WebSocket URL, usually ws://127.0.0.1:8080/ when Streamer.bot runs on the same machine.
  5. Enter the WebSocket password if your Streamer.bot server requires one.
  6. Save settings, then use Reconnect or Refresh to verify the bridge is connected.
  7. Click Load events and select the event groups you want NekoBot to receive.

For the full setup and troubleshooting details, see Streamer.bot Setup.

2. Create Overlay

Overlay setup page

Create one overlay for the OBS scene. OBS should load that one overlay as a full-scene browser source, then NekoBot boxes decide what appears inside it.

  1. Select an existing overlay or click New overlay.
  2. Name the overlay after the stream scene or layout it belongs to.
  3. Click Save so NekoBot can create the overlay viewer URL.
  4. Use Set Default when this overlay should be the default viewer selection.
  5. Use Copy OBS URL after saving to copy the browser-source URL.
  6. In OBS, add a Browser Source to the scene that should show NekoBot effects.
  7. Paste the copied URL into the OBS browser source URL field.
  8. Set the browser source size to your canvas size, usually 1920x1080 or whatever your stream canvas uses.
  9. Place the browser source above the scene content that the overlay should appear over.

For the deeper explanation of overlays, boxes, sources, triggers, and OBS viewer behavior, see Overlay Setup.

3. Add A Text Box

Add Source dialog showing the Text Source tab

Add a text box first to prove that trigger tokens can render live data inside the overlay. The source is created through the Add Source Dialog.

  1. Click Add box and position the box where the text should appear on stream.
  2. Add a Text Source.
  3. Use text such as {{message.text}} when the box should show trigger-provided message text.
  4. Open the box trigger controls and add a chat-message or command trigger.
  5. Save the overlay and fire the trigger from chat or Streamer.bot.

4. Add A Media Source Box

Add Source dialog showing the Media Source tab

Add a second box for a meme, image, GIF, video, or sound cue. Use the Add Source Dialog again, this time with a Media Source. This is the important pattern: keep one OBS overlay, then add multiple boxes inside it for different effects.

  1. Click Add box again and position it where the media should appear on stream.
  2. Add a Media Source.
  3. Choose an uploaded file, a managed source, or a reachable media URL.
  4. Set the media behavior, such as whether it should play once, loop, or hide after playback.
  5. Open the box trigger controls and add a command trigger such as !meme or !hype.
  6. Save the overlay and run the command from chat or Streamer.bot.
  7. If the media appears in the setup preview but not OBS, refresh the OBS browser source or reopen the overlay viewer URL.

What This Builds

Quick Setup is not a separate feature from the other landing pages. It is a guided path through the first useful setup.

ResultWhere to go deeper
Streamer.bot bridgeThe connection created in step 1 is managed on Streamer.bot Setup.
One OBS overlayThe overlay created in step 2 is explained on Overlay Setup and the Overlay component page.
Text boxThe text example uses the Add Source Dialog, Box, and Add Trigger controls.
Media boxThe media example uses the same overlay, proving that OBS only needs one NekoBot browser source for multiple effects.