Building a Smarter Chatbot with DialogFlow and React
As humans, conversation comes naturally to us. However, for bots, it’s a different story. Even simple questions like “How was your day?” can be rephrased in multiple ways, making it challenging for bots to understand. That’s where Natural Language Understanding (NLU) comes in – enabling better human-computer conversations.
In this article, we’ll explore how to build a chatbot using Google’s NLU platform, DialogFlow, and integrate it into a React application.
Getting Started with DialogFlow
DialogFlow is an end-to-end tool powered by NLU to design and integrate chatbots into our interfaces. It translates natural language into machine-readable data using machine learning models trained by the language we provide.
To get started, open the DialogFlow console and log in with your Google account. Create a new agent, which is essentially the chatbot itself.
Understanding Intents
Intents are mappings between a user’s queries and actions fulfilled by your software. In the case of our bot, we expect to receive queries like “I would like a cappuccino” and “When does the shop open?” We can categorize these queries into user intentions such as “Take Order” and “Timings.”
Adding Regular Intents
Let’s create a conversation flow for our coffee shop bot. We’ll add intents to take orders, ask for add-ons, and respond accordingly.
Connecting with a Node.js Server
To interact with our server, we’ll use Fulfillment, which helps return dynamic responses by making API calls defined by us. We’ll build a webhook service and make it public using ngrok.
Building Our Server
Create a node app and install the necessary dependencies. Write code to handle webhook requests from DialogFlow and calculate the billing amount.
Making the Server Public
Use ngrok to put the server on the Internet. Follow the steps for quick setup and installation.
Enabling the Webhook
Enable the webhook in the Fulfillment window and enter the secured public URL.
Integrating the DialogFlow Chatbot into a React App
There are many ways to integrate the chatbot into a React app. We’ll use Kommunicate to integrate the DialogFlow chatbot into our React app.
DialogFlow ES: Kommunicate Integration
Follow the steps to integrate DialogFlow ES with Kommunicate. Get the JSON key from the DialogFlow cloud account and choose a customized avatar.
Integrate the Kommunicate Chat Widget into a React App
Create a chatbot component and paste the code in useEffect(). Remember to replace the placeholder with your appId.
Conclusion
We’ve learned how to build a chatbot with DialogFlow, connect with a Node.js server, and integrate it into a React app. With this knowledge, you can create your own chatbot and integrate it into your React application.