•March 31st 2020
We’ll be making a chatbot that interprets the intent of a user’s input using Natural Language Processing (NLP) and responds appropriately, giving the information it has gathered.
You'll need to have recent versions of Node.js and yarn installed on your machine before proceeding with this tutorial. A working understanding of React is also helpful, as we’ll be making use of Stream’s React Components to flesh out our application interface.
Finally, make sure to have Ngrok installed on your computer; we’ll be using it to expose our local server to the web so that we can watch for new messages in our application.
Creating a New React Application
To start building out your application, open your terminal, and navigate to the directory where you normally keep your coding projects. Next, run the command below to bootstrap a new React application using
$ npx create-react-app live-chat
Once the command has finished running,
cd into your
live-chat directory, and run
yarn start, to start your app on port 3000.
Signing Up for Stream
Since we'll be making use of many of Stream's chat components, we'll need an account with unique keys, just for us; create a new Stream account, or sign in to your existing Stream account to get the ball rolling. Once you’re redirected to the dashboard, create a new app, if you have an existing account, or, if you just created your account, scroll to the bottom of your dashboard (your first app is created for you), and take note of the application access keys which will be presented to you on creation:
Signing Up for Dialogflow
Head over to the Dialogflow website and sign up for a free account. Next, create a new agent by clicking the blue Create Agent button in the sidebar.
Once your agent is created, click the Small Talk option in the sidebar and enable it for your bot; this option allows your bot to respond to common greetings immediately, without any further work on your part:
The next step is to grab your agent keys, which you can do by heading over to your agent’s settings. Under Google Project, click on the service account name. This will open the Service Accounts page for your Google Cloud Platform.
Find the Dialogflow Integrations entry in the Service Accounts table, and click the three dots menu on the right. Then, click the Create Key option and download your credentials in JSON format:
Creating the Live Chat Server
Let’s go ahead and set up our live chat server! Before we write any code, let’s install the additional dependencies we’ll be needing:
$ yarn add express body-parser cors dotenv stream-chat
Next, set up a new
.env file in the root of your project directory and add your Stream and Dialogflow credentials as shown below:
Note that your Dialogflow private key and client email are found in the JSON file you downloaded in the previous section. Also, note that only the private key is enclosed in quotes.
Now that we've set up our packages and environment variables, create a new
server.js file in the root of your project directory, and paste in the following code:
Here, we have a single
/join route that expects a
username from the client-side and creates an authentication
token for the user. The
updateUser() method creates the user on our Stream chat instance, passing in the
token for the user. If the user already exists, the method only updates the properties on the user.
After creating the user, we initialize a
channel of the type commerce, whose
id is set to live-chat. "commerce" is one of the five default channel types on Stream and is aimed at providing good defaults for building an app similar to Intercom or Drift.
create() method creates a new
channel and or returns a
channel with the set
id, if it exists already. Finally, the user is added as a member of the "live-chat"
channel, and the authentication
api_key are sent to the client. This is necessary for authenticating users on the application frontend.
That’s all the code we need on the server to get our live chat application working! Run
node server.js in the terminal to start the server on port 5500 before moving on to the next section.
Building the Application Interface
In order to create our application frontend, we'll need to install two additional packages: stream-chat-react and axios. The former is the official set of React components for Stream Chat, which removes all the hassle of creating a complex chat UI, while the latter is a popular library for making requests in both browser and Node.js environments.
Install them both with the command below:
$ yarn add stream-chat-react axios
Next, open up
src/App.js in your text editor, and replace its contents with the following code:
Thanks to Stream’s React components, we can construct a functional chat interface in only 70 lines of code! At this point, you will be able to send messages in the channel, but you will not receive a response to any of them:
Exposing your Server to the Web
Once you have installed
ngrok, start an HTTP tunnel on port 5500 by running the following command in a separate terminal session:
$ ./ngrok http 5000
Setting Up your Webhook
We are now ready for webhooks! Follow the instructions on this page to set up Stream CLI, which makes it easy to create and manage your Stream Chat applications directly from the command line. Once you have them installed and initialized the CLI tool, run the command below to set up your webhook URL; make sure to substitute the ngrok URL below with your own:
$ stream chat:push:webhook --url 'https://******.ngrok.io/webhook'
The implication of setting a webhook URL on your Stream application is that all events that occur in your application will be sent in a POST request to your webhook URL; we’ll set up the
/webhook route on our in the next section.
Processing Incoming Messages with Dialogflow
Let's incorporate Dialogflow into our app! Create a new
process-message.js file in the root of your project directory, and update its contents as follows:
The exported function above expects the
message.new event from Stream, which is sent whenever a new message is sent in the application. The message text is subsequently sent to Dialogflow, which determines the intent of the text and returns the most relevant result that it finds.
Note that you should replace the
<your dialogflow project id>placeholder above with your agent’s project ID, which can be retrieved from the downloaded JSON file or your Dialogflow dashboard.
To receive message events from Stream, you'll need to set up the
/webhook route in your
Once a matching response for the user’s message is received from Dialogflow, the response is promptly sent back to the Stream channel. You can test this out by restarting your server and sending a new message, such as a greeting. The responses you will receive are a result of the Small Talk feature we enabled earlier:
Creating Custom Intents
Intents allow you to map a user’s request with an appropriate response. For example, let’s say you are offering a Software as a Service (SaaS) tool, and a frequently asked question is if the tool integrates with WordPress; you can set up an "intent" for that query, and a provide a set of responses that would appropriately address the query.
Head over to your Dialogflow dashboard, and click Create Intent. You'll need to give your intent a name, such as "wordpress-integration". Next, under Training phrases, provide examples of how users may express their requests in natural language. The more phrases you add, the better your bot will be at detecting the correct intent:
Finally, under Responses, add a few messages that will serve as appropriate replies when this intent is matched, and then save the new intent:
Now, if you send a message to the bot that is similar to one of the training phrases, it should respond with one of the replies that you set up for the intent:
In this article, we explored the process of creating a live chat application that provides real-time responses to customer requests, with the help of Dialogflow’s Natural Language Processing feature.
This tutorial only covers a simple use case. Still, you can build on what you learn here to create a fully-featured customer service chatbot that answers queries from customers, or even potential leads. Refer to the Stream documentation to discover other features that are available on the Stream platform!
Remember, you can grab the source code used for this tutorial on GitHub.
Thanks for reading and happy coding!