Create a React ChatBot in 15 minutes

This article used the AWS Mobile CLI when it was created, while still available on NPM the development has been discontinued. You can find an alternative tutorial on creating chatbots here with the Amplify CLI.

ChatBots are changing the way we interact with applications, allowing a more conversational approach for specific tasks and leveraging Artificial Intelligence to do so. But how easy is it to integrate a ChatBot to your application?

In this article we’ll see how we can create a React ChatBot in minutes with about 50 lines of code using the AWS Amplify newly released support for AI-powered chatbots with Amazon Lex.

First let’s start by creating a React app:

$ create-react-app my-react-chatbot

Create an AWS Mobile CLI project (for step by step details on how to setup the CLI refer to my previous article here):

$ cd my-react-chatbot
$ awsmobile init

Let’s add authentication to the current project because… security first!

Adding AuthN/Z

Now we push the local changes to Mobile Hub:

$ awsmobile push

And retrieve the project link at the AWS Console:

$ awsmobile console
https://console.aws.amazon.com/mobilehub/home#/xxxxxxxxxxx/build

Next we open the console, access the project page, scroll down and select CONVERSATIONAL BOTS:

Add Conversational Bots to your Project

Let’s use one of the existing samples:

Creating a Bot

If you want to customize and test the newly created bot , you can do it directly from the console. It’s also useful to check the available utterances so you know what sentences you should use to interact with your bot:

Testing the Bot and Verifying the Utterances

Back to our local folder, we need to synchronize the changes we made at the console with the local project:

$ awsmobile pull

Now open the “App.js” file and overwrite the content with the following code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify, { Auth, Interactions } from 'aws-amplify';
import { withAuthenticator, ChatBot, AmplifyTheme } from 'aws-amplify-react';
import aws_exports from './aws-exports'; // specify the location of aws-exports.js file on your project
Amplify.configure(aws_exports);
const myTheme = {
  ...AmplifyTheme,
  sectionHeader: {
    ...AmplifyTheme.sectionHeader,
    backgroundColor: '#222'
  }
};
class App extends Component {
  
  handleComplete(err, confirmation) {
    if (err) {
      alert('Bot conversation failed')
      return;
    }
alert('Success: ' + JSON.stringify(confirmation, null, 2));
    return 'Appointment booked. Thank you! What would you like to do next?';
  }
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to ReactBot</h1>
        </header>
        <p className="App-intro">
          <ChatBot
          title="My React Bot"
          theme={myTheme}
          botName="MakeAppointmentMOBILEHUB"
          welcomeMessage="Welcome, how can I help you today?"
          onComplete={this.handleComplete.bind(this)}
          clearOnComplete={true}
        />
        </p>
      </div>
    );
  }
}
export default withAuthenticator(App, { includeGreetings: true });

Time to test out ChatBot!

$ awsmobile run

Sign up a user, providing a valid e-mail and phone number. You will receive a temporary code on your mobile device via SMS. Use it to validate the user sign up. You’ll need to sign in again and validate the sign in with a new code. After that the user will be authenticated and have the JWT tokens automatically renewed until the user is signed out or the refresh token expires.

And here’s our newly created React ChatBot:

The ReactBot

With AWS Amplify UI Components and the AWS Mobile CLI I anyone can create a Chat Bot in minutes. These powerful tools allow to streamline and speed up development, linking multiple backend services and now including chatbots powered by AI. Give it a try!