Building Slack bots with Botkit and Visual Studio Code

The code editor’s rich language support for Node.js makes it the perfect environment for Botkit development

The conversational UI is quickly becoming the next big experience paradigm. For those not familiar with the movement, the proliferation of bots in popular messaging platforms, i.e. Facebook Messenger, Slack, SMS, has placed a big role in its momentum. The bots serve as agents that can do many things, ranging from answering simple questions, all the way to completing tasks on your behalf like lowering your internet bill.

Last December, the company behind Howdy, XOXOCO, released Botkit — a simple, yet powerful JavaScript toolkit for designing and building Slack bots.

I’ve been tinkering with it for about a month now, and so far it has been a blast. The beauty of the toolkit is that it does a great job of abstracting out the nuances of Slack’s RTM API, and instead lets you focus on creating a delightful conversational experience.

These days I typically do web development in Visual Studio Code. Besides it being super lightweight, it has rich language support for Node.js, such as IntelliSense, reference searching and notably interactive debugging. This made it a perfect environment for Botkit development.

Configuring Node.js debugging in Visual Studio Code can be slightly nuanced at first but I think is pretty simple after the first time.

Setup

First, create a new bot on Slack. Then, download the Botkit repo from GitHub, since it has bunch of great samples to get started with.

Next, npm install on the folder to install its dependencies. Once that is done, open the folder in Visual Studio Code.

Once the folder is loaded, hit F5 to start the debugging session. This will be the first run, so it will prompt for you to select a Debug Environment. We will choose Node.js.

Now, we have a launch.json file under the .vscode folder at the root. This is the configuration file that Visual Studio Code uses to setup debugging.

Under the configuration named Launch with type node, replace the program value with ${workspaceRoot}/bot.js.

Your launch.json should look like this:

In that same configuration, add a property called token to the env object. The value should be the unique token that Slack provides for your bot.

Lastly, open the bot.js file and go to line 76. Switch the debug value from true to false. This value must be false for in order for Visual Studio Code debugging to work.

Set a breakpoint on line 86 (should start with bot.api.reaction.add).

Hit F5 again to start debugging. This time the Debug Console will open up and start showing output from the Botkit project.

Open Slack to the team wherein your bot was created. Start a direct message with the bot. Say “hi” or “hello”.

If you switch back to Visual Studio Code, you should now see that the debugger stopped on line 86 in bot.js! Voila!

For convenience, I’ve put a sample up on GitHub for reference. Lastly, I’ve only tested this on Windows and OS X.