Bot the Builder! DJ Command Center

Dashboard

Welcome to your Bot the Builder! control center

Everything is now organized like an app: start here, then jump into the exact workspace you need.

Overlay workspace

Design and position what your audience sees in OBS.

Automation workspace

Build the reactions for chat, raids, cheers, and track updates.

Live test tools

Preview the full DJ stream experience before you go live.

Quick launch

Jump straight into work

Open the canvas you need without hunting through the interface.

Preview Live Overlay

Walkthrough tip

Start on the dashboard

Use the quick launch buttons to jump straight into overlay design or flow automation.

Getting started

Recommended workflow

1

Home

Use this dashboard to orient yourself and launch into the right tool.

2

Overlay Editor

Lay out your scenes, labels, and alert regions with visual drag-and-drop.

3

Flow Editor

Set the logic that powers your chat responses, triggers, and overlay effects.

What’s available

Everything in one branded workspace

Dedicated screens keep design work separate from automation work.
Friendly typed editors reduce the need to touch raw JSON.
Debug logs and execution traces stay close to your automation screen.
Templates and test buttons make it faster to build new DJ experiences.

Help & how-to

Built-in guidance

Connect your Twitch app in the locked control room before first use.
Use the dashboard tips to move from setup → overlay → automation → live test.
Run the Flow Editor simulation panel to validate chat replies before going live.
Keep OBS pointed at the preview overlay URL while you refine scenes and alerts.

H

Custom command recipe

Set trigger to chat.message, add a keyword like !song, then add a sendMessage action.

H

Reply format

Use templates like Now spinning: {currentTrack.artist} — {currentTrack.title} for chat replies.

H

Common issues

Check the control-room gate, confirm Twitch OAuth is saved, and verify the bot is connected to chat.

Go live checklist

Before you stream

Unlock control room and confirm saved changes show as "Saved".
Configure Twitch app credentials and connect streamer + bot.
Open overlay preview and verify OBS source is updated.
Run one simulation and confirm flow traces appear.

Help center

How-to guides & command recipes

Search for setup steps, examples, and common bot patterns.

Search help

Setup

Connect your Twitch app

Open the control-room gate, save the App URL and Twitch Client ID/Secret, then sign in with Twitch to unlock the workspace.

Command recipe

Create a custom chat command

Use a chat.message trigger with a keyword like !song and a sendMessage action with a template such as Now spinning: {currentTrack.artist} — {currentTrack.title}.

Automation

Trigger raids and cheers

Build flows around channel.raid, channel.cheer, or chat commands and pair them with overlay events for alerts, banners, and dynamic on-screen reactions.

Testing

Test before you stream

Use the simulation tools and debug trace panel to validate each flow before it goes live with your audience.

OBS

Preview your overlay

Open the Overlay preview link and point OBS to the live browser source so you can preview scenes and branded overlays without a full stream.

Access

Subscriber and access gates

Use the access gate and required subscriber channel settings to restrict certain control-room and bot flows to the right audience.

Quick references

Useful recipes

Track command: !track → message with the current track.
Raid welcome: trigger on channel.raid → greet the raider.
Cheer flash: trigger on channel.cheer → show a banner and thank the user.
Subscriber-only actions: pair a condition with a user role or subscriber gate.

Troubleshooting

Common fixes

If the app fails to start, make sure AUTH_STATE_SECRET is set.
If Twitch login fails, confirm the App URL and Client Secret are saved correctly.
If no reply appears, check for a valid trigger, keyword match, and active flow.
If the overlay is blank, preview the browser source and save the layout again.

Overlay studio

Overlay Stage

Arrange hosted browser source elements for OBS and keep the live scene visible while you edit.

Overlay workspace

Build your on-stream look

The stage now stays front-and-center while this pane scrolls through the controls, tips, and themes.

1

Add the layers you need

Use text and visual boxes for now playing, alerts, and DJ branding.

2

Position everything visually

Drag elements into place until the stage feels ready for your stream.

3

Preview the live overlay

Open the hosted overlay to see exactly what OBS will receive.

Overlay controls

Selected Overlay Element

Adjust how this layer looks on your Bot the Builder! overlay.

Text / Template Color Font Size Width Binding Hint

Use variables like {currentTrack.artist}, {currentTrack.title}, {lastEventLabel}, or {user}.

Overlay tips

Stage checklist

Keep the “now playing” text near the top or lower-third for readability.
Use accent colors sparingly so alerts pop without overwhelming the set.
Save the overlay after major layout changes to keep OBS in sync.

Saved themes

Overlay Themes

Apply a style instantly or save the current look as a reusable theme.

Bot logic

Flow Canvas

Select a flow and keep the automation graph visible while you work through the details on the right.

Automation workspace

Build your bot logic

This pane now scrolls independently so you can review setup steps, templates, and live activity without losing sight of the canvas.

1

Pick a flow

Choose an existing preset or start from a blank automation.

2

Edit the nodes

Set triggers, checks, and actions with the typed controls in the sidebar.

3

Watch the runtime output

Use the debug console and trace panel to confirm the flow behaves the way you expect.

Flow editor

Selected TCA Node

Use the typed controls for quick edits, then drop into JSON only when needed.

Flow Name

Choose a Trigger, Condition, or Action node to edit it.

Select a node to edit it with typed controls.

Use the typed editor for common fields, or edit the raw JSON for advanced settings.

Preset packs

Template Library

Install DJ-focused flows with one click and customize them afterward.

Tags & variables

Variable Library

Click any tag to insert it into the currently focused field.

Twitch app setup

Account Config

Save your Twitch app settings here instead of editing .env. Bot the Builder! keeps them in the local project state file.

App URL Client ID Client Secret Redirect URI EventSub Secret

Loading saved Twitch app settings...

Live services

Twitch Connections

Connect streamer and bot accounts when you are ready to go beyond simulation.

Checking Twitch auth...

Runtime activity

Debug Console

Recent Bot the Builder! events appear here so you can understand what just happened.

Why it fired

Execution Trace

See why each flow executed, skipped, or was ignored.

Control Room Access

DJ stream control room