Create a React ChatBot in 15 minutes

Ed Lima
Ed Lima
Jun 28, 2018 · 3 min read
$ 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

Ed Lima

Written by

Ed Lima

Solutions Architect @AWScloud - Working hard. Having fun. Making history. (Opinions. My. Own.)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade