Own Your Bot
A super simple JavaScript library to build your own bot on the web
Bots are hot. It seems that every startup in the Valley wants a bot nowadays.
It would be silly to think that we’ve never seen this type of interface before. Turing Test and command line interface (CLI) was around for 60+ years.
Remember making payments and voting over SMS? That was easy and fun. But games are more fun.
Computer games pioneered design and, most importantly, user interest in this space. Up until it started to spill over into projects that revolved exclusively around chat, like CleverBot. We humans have been enjoying conversing with machines for a while. Today’s hype began when Facebook chose to embrace it.
There are good reasons to use one (besides appealing to the hype). In some ways, it’s easier to build tools since all we’re doing is prescribing a story, rather than creating entire GUI. If done well, bots can simplify user interaction with the system and make it more accessible and fun to use. They also have a much higher potential for integration with other software.
I made a thing.
There are tons of libraries and tools out there to help you build one. Some are insanely complex, others are just too simple and rigid. I wanted to have a tiny thing that could get a basic conversation going yet flexible enough that it could be morphed into a powerhouse.
I love browser-side JavaScript. It’s close to the screen, I use it to make things pretty and it lets me do almost anything. It’s also simple and practical — a gateway drug to the world of programming.
But most importantly, it’s the front-end interaction engine of free, open web. WWW has changed quite a bit over the years, but believe me when I say it’s more stable and reliable than any app ecosystem out there. Rant over 😏
So, anyways I’ve built a JavaScript bot interface that works with JSON objects as conversation trees. It’s really easy to use and you can integrate it with any back-end of your choice. Or you can just mess with it and make silly bots say silly things in like five minutes. Your choice 👇
How does the thing work?
It works by taking the instructions from a JSON object and simply playing it back to the user. The object can “link” to different sections within itself or call custom functions.
I call JSON object a conversation. Each conversation consists of one or more conversation blocks which are basically bits of text that the bot spits out, closed off by reply requests — prompts for the user to instruct the bot on what to do next. Those reply requests could either direct the bot to start with the next conversation block or call a custom JavaScript function. You can make that function do whatever magic, including loading another conversation JSON.
☝️ Above is an example of a simple conversation where the bot asks a user whether they want ice cream or banana. Users’ choice leads to an appropriate emoji🍦🍌 as a response and a button to start over.
Once you get familiar with this structure, you can build bots very, very fast. And since it’s all JavaScript, there are no limits to the type of media you can embed here. I’ve only tested this with images and emojis though.
Doing smart things with chat-bot is easy*.
*Depending on your skill level, of course.
Personally, the first thing (besides making a dialogue tree) I’d customize is the design. You can merge the CSS files into one, stick them into pre- or post- processor and change the graphics however you like.
You can also add custom functions into your reply requests (see code examples) which can do whatever, including loading new conversations. Right now there is no way to pass parameters yet. Also, those functions should be available within your window object.
Perhaps one of the most challenging tasks would be adding keyboard input. It’s not a big deal to make it appear on the screen (it’s a matter of passing a function as one of the options parameters). But what are we to do with all that user input? I’ve made a sample function that does the following (see link above):
✅ Removes spaces and punctuation from user input and compares it to the options given by the bot.
✅ If no match available, it’ll say so and restart the conversation from the current block (yes, you can do that).
✅ If a match is available, it’ll follow the whatever directive in the reply request selected.
There’s some animation and UI stuff going on the background as the keyboard takes control over the bot. You can just dig through the code to see how it works. I tried to comment it as much as possible.
Natural Language Cognition.
So here we are, the future. AI everywhere. Fear not, you can have one of your own. It can be as simple or as complicated you’d like it to be, but you can leave chat-bot out of it since it’s a simple user UI tool.
What it can do for you though is send your users’ keyboard input onto your NLC server, wait for a request and spit out the answer. You can simply use the example keyboard function from above and replace it with an AJAX call to your NLC server. You can then mold the response into a new JSON conversation, or simply get a reference to the conversation block you already have loaded. The choice is yours.
Done?
Nothing is ever done. Every project is an evolving, living organism. Just like this tool.
I built it to be a dead-simple, flexible and fun script for the front-end. It is now being used to do all kinds of stuff with Archie.AI and I hope it grows big and strong with more applications.
It’s free for all, but I would very much appreciate comments, constructive criticisms, bug reports, and PRs. All of which could be done here.
🍻
