A Twitch chatbot powered by Notion
Tags: showdev, opensource, twitch, notion
Published: 2022-02-15 12:00:47

---
title: A Twitch chatbot powered by Notion
published: true
description: "Releasing version 1.0 of AchoBot: A Twitch chatbot powered by Notion and developed with Node.js and TypeScript!"
tags: showdev, opensource, twitch, notion
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86xlzf5xapohdl0421pe.png
---

AchoBot is an open-source Twitch chatbot I built for myself. It allows you to manage your chatbot's commands using Notion:

![notion-database](https://user-images.githubusercontent.com/2507959/152531729-8b117829-9965-41a6-9455-b10dbf4cda40.png)

It relies on the power of Notion Databases to manage command responses, permissions, and documentation.

**Table of contents**
- [The repo](#the-repo)
- [Features](#features)
- [Development](#development)
- [Try it](#try-it)
- [Stream](#stream)

---

## The repo
Check the repo here 👇

{% github pawap90/acho-bot %}

## Features
Here's the complete list of features:

### Manage your Twitch Chatbot from Notion
Add, update or delete commands in a Notion database. AchoBot will use the information from Notion to answer your viewers when they invoke a command.

### Assign Permissions to each Command
The database includes a `Permissions` column where you can specify who can invoke each command. Leave it empty, and everyone will have access to it. 

![Permissions column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0mw0ssl8od0tcv5ne97.png)
 
#### Specific user permissions
You can also create commands that can only be invoked by a single specific user. To do that use the value `usr:<username>`, for example: `usr:paulasantamaria`

### Commands view
Navigate to `/commands` to get a list of every public command. Your viewers can use it to see the available commands.
Also, you can navigate to `/commands?mode=image` to get a ready-to-download image you can add to your Twitch panels.

![A table showing every public commands on localhost:5000/commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2pj9tqs8xlrfl5cu4ty.png)

### Scripted commands
You can specify the type of command in the "Type" column. Available options are:

![Command types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu8lnfos1grku1bpdovr.png)
 
Text commands return a plain text response. E.g: "Welcome to the stream".

Scripted commands can implement some logic (JavaScript)  and receive parameters.

For example, imagine the following command `!say <text>`: 
```js
(context) => {
    const textToPrint = context.params.text;
    return `You said: ${textToPrint}`;
}
```

When a viewer invokes it: `!say hello`
Output: `You said: hello`

> This feature is new and still has some limitations and issues. Writing code in a Notion DB cell is not ideal 😅.

### Single account
The chatbot service will work only for the accounts and channels specified in the environment variables. 
If any other account tries to log in using the chatbot authorization endpoints, it will get an authorization error. 

The service is not currently designed to handle multiple accounts. This is a limitation, but it also makes the hosting and configuration of the service easier.

### Status view
Use the status view to see if your bot's Twitch account is correctly authorized. 
You can use this view in OBS to get real-time feedback on your chatbot status (it auto-updates every minute).

### Built-in commands
Built-in commands are defined in the codebase instead of Notion. They usually require more logic and access to resources unavailable to the Notion commands. There are currently two built-in commands that you can use:
- `!help` prints a list of available commands.
- `!refresh` invalidates the command cache, so next time a command is triggered, the app needs to go to Notion to retrieve the commands, thus updating them to the latest version. Only available for Broadcaster and Moderators. 

### Placeholder commands
Some commands are triggered via code but defined in Notion. This allows AchoBot to react to certain events (like a user logging in or subscribing) while also allowing each user to specify what they want AchoBot to do in each case.
Right now, the only placeholder command is:
- `!welcome`: Executed when AchoBot joins the chat room immediately after a stream starts. If you define this command in Notion when the bot logs in, it can say hi and leave some relevant information in the chat. E.g., "Hi, I'm AchoBot! Type !help to see what I can do". 

## Development
AchoBot runs on Node.js. It was developed with TypeScript and uses Nodemon to run the development server. It relies on [tmi.js](https://tmijs.com/) to connect and interact with Twitch's chat.

### How it works
Once the service starts, AchoBot retrieves the commands from Notion (and other sources) and stores them in cache. When viewers execute a command, we search for it in the cache and execute it to generate a response:

![AchoBot flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxacjea2w0q16ab1jn8n.png)

### Extensible

The project is designed to be easily extensible. It uses the command pattern to define the list of commands. You can extend this list using different strategies depending on what you aim to achieve. To know more: [Extend AchoBot](https://github.com/pawap90/acho-bot/wiki/Extend-AchoBot)

## Try it
Here's a detailed step-by-step guide on how to run AchoBot: [AchoBot Setup - Full Guide](https://github.com/pawap90/acho-bot/wiki/AchoBot-setup---Full-guide)

---

## Stream
I developed this chatbot live on stream. Join me if you are interested in **live coding sessions** where I experiment with **different tech stacks** and build **open-source** software!

[👉 twitch.tv/paulasantamaria](https://www.twitch.tv/paulasantamaria)

Right now, I'm working on a new portfolio with *Svelte-kit, markdown, and TailwindCSS*.