DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. JavaScript
  4. Building Chatbots in React With Botonic

Building Chatbots in React With Botonic

Learn how to use the open source and popular React.js framework to create your own chatbot for that app you're developing.

Chris Ward user avatar by
Chris Ward
CORE ·
Sep. 09, 18 · Tutorial
Like (4)
Save
Tweet
Share
11.08K Views

Join the DZone community and get the full member experience.

Join For Free

My work with chatbots fluctuates when I get time to work on my two main ideas: generative fiction and a bot for documentation. You create most bots with a server-side language that returns JSON to an endpoint and renders to an audio or visual interface. This means that while all bot platforms have their own APIs and SDKs, there are a plethora of tools to help you write once and deliver to multiple platforms. The good folks at Botonic got in touch and asked for feedback on the developer experience for their platform that lets you create bots using React for a variety of chat and voice interfaces.

Getting Started

I'm pleased to say that Botonic has a great getting started experience, with text and video documentation. Start by installing the npm module:

npm install -g botonic

The botonic command helps you do a lot, including creating template projects, running your bot locally, and deploying it to the Botonic cloud. Follow the rest of the getting started guide to get an idea of what's available. For the rest of this post, I'll switch my Boardgame Jerk bot to Botonic.

Create Project

The Boardgame Jerk bot is (currently) simple, people ask it for a random game idea, and it gives them one. Future versions may have more functionality, but not right now.

As my project already exists, I used the following command to add the blank template to my existing project:

botonic new boardgamejerk blank

The command created a subfolder named blank inside my existing project, so I moved the files inside it to the top level of my project.

Create Actions

I don't have much previous knowledge of React, but as the bot isn't too complex, setting up the possible interactions, or 'routes,' doesn't require much work.

Open the botonic.config.js file that defines the routes, and add:

module.exports = {
    routes: [
        {text: "game", action: "generategame"}
    ]
}

You use regular expression in the routes, and as I want to match the phrase "game," this is all I need. I could change the pattern to match any sentence with the word "game" and use:

module.exports = {
    routes: [
        {text: \W*((?i)game(?-i))\W*, action: "generategame"}
    ]
}

Next, I create the action that matches generateGame in pages/actions/generategame.js:

import React from 'react'
import { Botonic } from 'botonic'

export default class extends Botonic.React.Component {

    static async botonicInit({ req }) {
        var gameLexicon = require('../createlexicon');
        req.context.gameText = gameLexicon.randomString();
    }

    render() {
        return (
            <message type="text">
            {this.props.context.gameText}
    </message>
    )
    }
}

You need to move any other files that Botonic code uses, in this case, createlexicon.js, into the pages folder too.

I won't go into much detail about the random text generator, as you can read the code and my other tutorial that explains how it works.

Regarding Botonic-relevant code, I take the random string, set it to a context value, and then output it as text. If I use botonic runthen the bot runs in the command line, and typing game gives me a random game.

A chatbot on the command line

Great, but people don't tend to interact with bots on the command line, and using Botonic and React is overkill for that use case. So what are the next steps? I'm glad you asked!

Deploy Bot

If you have any external dependencies, such as tracery-grammar that this project uses, there's one extra step.

In the next.config.js file, add the dependency to the transpileModules array:

…
transpileModules: ['tracery-grammar']
…

Issuing the botonic deploy command prompts you to signup or signin to the Botonic cloud and it returns you a URL where you can add integrations. Currently supported are Messenger and Telegram, but with more to come, including (excitingly to me) voice platforms. Further calls to botonic deploy update the code on Botonic, and thus the platforms you have integrated it with.

Botonic integrations

And, now, typing "game" on Messenger or Telegram and get the bot to generate a random game idea.

Bot running on Messenger

Bot running on Telegram

Bot There's More

My small bot only uses text responses and offers little in the way of interactivity. The Botonic platform offers a lot more functionality that I barely mentioned. For example, allowing you to use many of the templating and handover features of Facebook Messenger, and also standalone natural language processing. As I'm not already using React in any of my existing projects I'm unsure if its learning curve is less than learning other SDKs. However, I recreated my bot with little work and would assume that adding additional functionality is just as quick.

React (JavaScript library) Chatbot

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Real-Time Analytics for IoT
  • How To Handle Secrets in Docker
  • Cloud Performance Engineering
  • Custom Validators in Quarkus

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: