This is a WIP chat bot for Twitch. I am still figuring out the kinks. Considering the content and the code in this repo to unstable. If you would like a chatbot that works out of the box, try open-sauced/beybot or bdougie/git-twitch instead.
This is a twitch bot built on the ComfyJS (a wrapper around tmi.js).
Before I jump into the code, I need to share some of the streaming basics.
OBS Studio is a free and open-source software for live-streaming and screen recording. This walk-through will show OBS Studio and consult your platform's documentation or community on how to add browser source plugins.
Browser Source plugins When you set up an out of the box alert or chat system, like Streamlabs, they require you to add something called a Browser Source plugin. To do this, you add the URL pointing to the plugin, provided in the Streamlabs dashboard. This is the backbone of most streaming interactions on Twitch. Browser source plugins are HTML, CSS, and some JavaScript—so basically webpages.
If you are looking to code live on stream, you probably have these skills to make chat alerts.
Comfy.JS lets you integrate with Twitch chat for your Twitch channel SUPER EASILY in just a few lines of code. Here's a quick 3-min video on how to use it: (Click image to open video)
If you would like to see this chat command working live on the air here is a clip of me interacting with the basic !yo command.
Step 1: In your fork replace the Twitch channel name.
In the config.js of the beybot repo, you will need to replace my handle, "bdougieYO" with your Twitch handle.
The name is the thing you will need to change:
const twitchTvHandle = "bdougieYO";
If you do not have a Twitch account but would like to test this out, you can test this using my chat. I live-stream myself contributing and triaging open-source projects every Tuesday and Friday.
(WIP) Step 2: Running the chatbot locally After forking this repo, you will need to clone it locally to connect to your own OneGraph app.
- Log into OneGraph and select Create new app
- Add localhost:8080 to the CORS Origins
- Copy and replace the app's id and replace it in the ONEGRAPH_APP_ID.
- Run the serve using
snowpack dev
When viewing the live site, it will be blank. You can open the web console and see the commands printed there, but keep in mind that the page has intentionally left blank to hide and show the Beyonceé gifs.
Now that you have a URL, you can include this in your OBS browser source.
Step 3: Add browser source plugin
In OBS add a new source to the Scene of your choosing. OBS Studio has a few different source options, but choose Browser and proceed with adding browser source, using your deployed GitHub Pages URL (username.github.io/beybot).
One thing to keep in mind, OBS will be using a cached version of the site at the moment you add the browser plugin. If you make updates, you will need to clear the "Refresh cache of current page" button (I spent a lot of time not knowing that existed).
Step 4: Test in your chat by open your typing !yo in the chat.
Ideally, you will test this in your Twitch chat, but if you made it this far without having your own my chat, feel free to stop by and test it out.
Go ahead and type !yo in the chat while OBS is open and weep tears of joy, because that was hopefully easy if it wasn't let me know in the comments below.
That is it. You can now extend this bot with new commands for you and your chat to interact.
These chat interactions are basic, but if you want to see more examples of chat interactions, check out the following channels.
- Change the baldbeardedbuilder's VScode theme.
- Shave jlengstorf live on the air.
- Noopkat's new subscriber alert.
I hope this is a good start in getting you towards making the most complex chatbot interactions.