Build any Twitch Chat Bot you want, without code!

I love Twitch as a platform for how it connects friends from all over the world and the opportunities it provides, so I've been building tools like Comfy.js and ComfyTwitchKit for fellow developers to very easily build tools that integrate with Twitch, and tools for streamers and viewers like StreamPuppy or Chat Translator to translate chat languages in real-time or Clippy Raid to make raid message copying easier for viewers. This time, I wanted to build something for streamers that could help them not have to rely on a developer to help them unleash their creativity and make new Twitch experiences.

This is how ChatBlocks was born and since then, we have had MANY streamers, moderators, and viewers who had never coded before, be able to build new chat bot commands and games for their communities. Some examples include word games and fishing games, endangered animal trivia, stretch and hydration reminders, Animal Crossing character lookup, virtual bean-boozled flavor selections, a superhero name generator, a live weather forecast chat command, a tons more. The ability to integrate with Twitch channel points added much more potential for interesting chat bot ideas and experiences such as an automated channel point redemption for a dad-joke using the icanhazdadjoke API or a daily horoscope, a virtual bubble tea flavor, text-to-speech redemptions, and, of course, sound effects. Many bubbles and farts have been heard through stream since the creation of this project.

ChatBlocks

ChatBlocks runs as a single page web application on https://www.instafluff.tv/ChatBlocks and you simply log in using your Twitch account, then using Google's Blockly framework to provide a logic block interface for users and visually piece their idea together without worrying about syntax errors or even learning a programming language, and connects directly to Twitch from the web browser through an implicit OAuth authentication so that their Twitch passwords and tokens remain safe and local to their computer. It connects to the Twitch chat using Comfy.js and websocket PubSub to provide different Twitch events such as messages, raids, bit cheers, and now, channel rewards, and gives full freedom to users to build any chat bot they could think of without the steep learning curve of normal computer programming. The blocks and configurations are automatically saved in their browser so that even if users close out of the browser or their PC crashes or restarts, their blocks are still saved. And the best part about ChatBlocks is that we made these visual blocks downloadable as a file and importable/drag-droppable so that people can easily share their creations with others!

Even then, because blocks and logic can be tough, I also ran multiple workshop streams to help guide people on Twitch through various examples, created video guides on YouTube to get people started with them, and ran three different ChatBlocks Challenge competitions with prizes provided by my community, which resulted in dozens of incredible blocks that could be used by any streamer looking to get started with ChatBlocks. You can see and download the entries on this ChatBlocks Challenge Showcase page and the entries of our 3rd and most recent challenge on the ChatBlocks Challenge Voting page!

Development

This project was built as a web page in HTML and JavaScript with Twitch Channel Points integration using ComfyJS, a popular JavaScript Twitch library I built and maintain.

Challenges

The biggest challenge I ran into for this project was learning to work with and integrating the Blockly framework and creating the custom blocks for various Twitch events and data. The framework was originally designed as a teaching tool, but I thought it could be much more and combined it with Comfy.js for Twitch integration into a real and useful use-case. One of my favorite stories that came out of this project is one of my stream viewers and ChatBlocks Challenge participant was able to use ChatBlocks as an entry point to get his step-son interested and started on coding.

What's next for ChatBlocks

I am continuing to work on and maintain ChatBlocks and add new custom blocks when they are requested and seem useful, like being able to run a timer block or make HTTP web requests. Every streamer, especially non-coders, who has tried ChatBlocks has found it to be incredibly useful and my hope is that more broadcasters become aware that this tool exists for them because I believe it can help their Twitch stream become more unique with their own ideas, and can help Twitch become more innovative as a platform for content creators.

Built With

Share this project:

Updates