Create a React ChatBot in 15 minutes

$ create-react-app my-react-chatbot
$ cd my-react-chatbot
$ awsmobile init
Adding AuthN/Z
$ awsmobile push
$ awsmobile consolehttps://console.aws.amazon.com/mobilehub/home#/xxxxxxxxxxx/build
Add Conversational Bots to your Project
Creating a Bot
Testing the Bot and Verifying the Utterances
$ awsmobile pull
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 });
$ awsmobile run
The ReactBot

--

--

--

Product Manager AWS AppSync — Working hard. Having fun. Making history. With @AWSAmplify (Opinions. My. Own.)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ed Lima

Ed Lima

Product Manager AWS AppSync — Working hard. Having fun. Making history. With @AWSAmplify (Opinions. My. Own.)

More from Medium

Creating and managing landing pages with React and GrapesJS

Let’s Build User Authentication with Express, Prisma, and JWTs

Integrating Your New and Legacy React Applications with Asgardeo

Complete Guide to AWS Amplify Studio