Building a Chatbot with React and Dialogflow API

⋅ 15 min read ⋅ React

In this tutorial, we will learn how to build a chatbot using React and the Dialogflow API. Chatbots are becoming increasingly popular in various industries, as they can automate customer support, answer frequently asked questions, and provide personalized recommendations. By using React, a popular JavaScript library for building user interfaces, we can create an interactive and responsive chatbot interface. Dialogflow API, on the other hand, is a natural language understanding platform that allows us to process and understand user input.

building chatbot react dialogflow api

Introduction

What is a chatbot?

A chatbot is a computer program designed to simulate human conversation through text or voice interactions. It uses natural language processing (NLP) techniques to understand and respond to user queries. Chatbots can be integrated into websites, messaging platforms, or mobile applications to provide automated assistance and improve user experience.

Why use React for building chatbots?

React is a JavaScript library for building user interfaces. It provides a component-based architecture that makes it easy to create reusable UI components. React also has a virtual DOM, which allows for efficient rendering and updating of user interfaces. By using React, we can create a responsive and interactive chatbot interface that can handle user input and display messages in real-time.

Overview of Dialogflow API

Dialogflow API is a natural language understanding platform that allows developers to build conversational interfaces. It provides a set of tools and libraries for processing and understanding user input. Dialogflow uses machine learning and NLP techniques to extract user intents and entities from text inputs. It also supports context and session management, which allows for more interactive and dynamic conversations.

Setting Up the Project

Creating a new React project

To get started, we need to create a new React project. Open your terminal and run the following command:

npx create-react-app chatbot-project

This command will create a new directory called chatbot-project with a basic React project structure.

Installing necessary dependencies

Next, we need to install the necessary dependencies for our chatbot project. In your terminal, navigate to the project directory and run the following command:

cd chatbot-project
npm install dialogflow react-chat-widget

The dialogflow package is the official Dialogflow API client library for JavaScript. It provides methods for interacting with the Dialogflow API and processing user input. The react-chat-widget package is a React component library that provides a chat interface for our chatbot.

Initializing Dialogflow API

Before we can start using the Dialogflow API, we need to initialize it with our credentials. Dialogflow API uses Google Cloud Platform for authentication and authorization. Follow these steps to create a new Dialogflow project and obtain the necessary credentials:

  1. Go to the Dialogflow Console
  2. Click on "Create Agent" to create a new Dialogflow agent.
  3. Give your agent a name and click on "Create".
  4. Once the agent is created, go to the "Settings" page.
  5. Under the "General" tab, click on the "Export and Import" button.
  6. Click on "Export as ZIP" to download the agent's ZIP file.
  7. Extract the ZIP file and locate the credentials.json file.

Now that we have our credentials, we can initialize the Dialogflow API in our React project. Create a new file called dialogflow.js in the src directory and add the following code:

import dialogflow from 'dialogflow';

const projectId = '<YOUR_PROJECT_ID>';
const credentials = require('./credentials.json');

const sessionClient = new dialogflow.SessionsClient({ projectId, credentials });

export default sessionClient;

Replace <YOUR_PROJECT_ID> with the ID of your Dialogflow project. This code initializes the Dialogflow API client with our credentials and creates a new session client that we can use to send and receive messages.

Designing the Chatbot UI

Creating chat components

To create the chatbot UI, we need to create several components that will handle user input and display messages. Create a new file called Chatbot.js in the src directory and add the following code:

import React, { useState } from 'react';
import { Widget } from 'react-chat-widget';

import 'react-chat-widget/lib/styles.css';

const Chatbot = () => {
  const [messages, setMessages] = useState([]);

  const handleNewUserMessage = (newMessage) => {
    setMessages([...messages, { message: newMessage, isUser: true }]);
    // Send the user message to Dialogflow API
    // and handle the response
  };

  return (
    <div className="chatbot">
      <Widget handleNewUserMessage={handleNewUserMessage} />
    </div>
  );
};

export default Chatbot;

This code defines the Chatbot component, which renders a chat interface using the Widget component from the react-chat-widget package. It also defines a state variable messages to store the chat messages and a handleNewUserMessage function to handle user input.

Styling the chat interface

To style the chat interface, we can add some CSS styles to the Chatbot.js file. Add the following code below the import statements:

import './Chatbot.css';

Create a new file called Chatbot.css in the src directory and add the following code:

.chatbot {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

This code positions the chatbot interface at the bottom right corner of the screen.

Handling user input

To handle user input and send it to the Dialogflow API, we need to modify the handleNewUserMessage function in the Chatbot.js file. Replace the comment in the handleNewUserMessage function with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText } = response.queryResult;
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

Replace <SESSION_ID> with a unique identifier for the user session. This code creates a new session path using the Dialogflow project ID and the session ID. It then creates a new request object with the user message and sends it to the Dialogflow API using the detectIntent method. The response from the API is then used to update the chat messages.

Integrating Dialogflow API

Connecting to Dialogflow API

To connect to the Dialogflow API, we need to install the necessary dependencies and configure the API client. Make sure you have the necessary credentials for your Dialogflow project, as mentioned in the "Initializing Dialogflow API" section.

Install the dialogflow package by running the following command in your terminal:

npm install dialogflow

Next, open the dialogflow.js file that we created earlier and update it with the following code:

import dialogflow from 'dialogflow';

const projectId = '<YOUR_PROJECT_ID>';
const credentials = require('./credentials.json');

const sessionClient = new dialogflow.SessionsClient({ projectId, credentials });

export default sessionClient;

Replace <YOUR_PROJECT_ID> with the ID of your Dialogflow project. This code initializes the Dialogflow API client with our credentials and creates a new session client that we can use to send and receive messages.

Sending and receiving messages

To send and receive messages from the Dialogflow API, we need to modify the handleNewUserMessage function in the Chatbot.js file. Replace the comment in the handleNewUserMessage function with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText } = response.queryResult;
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

Replace <SESSION_ID> with a unique identifier for the user session. This code creates a new session path using the Dialogflow project ID and the session ID. It then creates a new request object with the user message and sends it to the Dialogflow API using the detectIntent method. The response from the API is then used to update the chat messages.

Handling intents and entities

Dialogflow API allows us to handle user intents and entities, which represent the user's intention and the relevant information extracted from their message. To handle intents and entities, we need to modify the code in the handleNewUserMessage function in the Chatbot.js file. Replace the code that updates the chat messages with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText, intent } = response.queryResult;
    
    if (intent) {
      console.log('Intent:', intent.displayName);
    }
    
    if (intent && intent.displayName === 'Welcome') {
      // Handle welcome intent
    } else if (intent && intent.displayName === 'Goodbye') {
      // Handle goodbye intent
    } else {
      // Handle fallback intent
    }
    
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

This code extracts the fulfillmentText and intent from the response returned by the Dialogflow API. It then checks the intent's display name and performs specific actions based on the intent. For example, if the intent is the "Welcome" intent, we can display a welcome message to the user. If the intent is the "Goodbye" intent, we can end the conversation. If the intent is a fallback intent, we can handle it accordingly.

Enhancing the Chatbot

Adding natural language processing

Dialogflow API provides NLP capabilities that allow us to process and understand user input. To add natural language processing to our chatbot, we need to modify the code in the handleNewUserMessage function in the Chatbot.js file. Replace the code that updates the chat messages with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
    queryParams: {
      contexts: [
        {
          name: 'generic',
          lifespanCount: 2,
          parameters: {},
        },
      ],
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText, intent } = response.queryResult;
    const { parameters } = response.queryResult;
    
    if (intent) {
      console.log('Intent:', intent.displayName);
    }
    
    if (intent && intent.displayName === 'Welcome') {
      // Handle welcome intent
    } else if (intent && intent.displayName === 'Goodbye') {
      // Handle goodbye intent
    } else {
      // Handle fallback intent
    }
    
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

This code adds a queryParams object to the request, which allows us to pass additional parameters to the Dialogflow API. In this case, we are adding a contexts array with a single context object. The context object has a name, lifespan count, and parameters. We can use contexts to maintain the conversation state and pass information between user turns.

Implementing context and session management

Dialogflow API supports context and session management, which allows for more interactive and dynamic conversations. Contexts are used to maintain the conversation state and pass information between user turns. Sessions are used to keep track of the user's conversation history and maintain session-specific data.

To implement context and session management, we need to modify the code in the handleNewUserMessage function in the Chatbot.js file. Replace the code that updates the chat messages with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
    queryParams: {
      contexts: [
        {
          name: 'generic',
          lifespanCount: 2,
          parameters: {
            contextParam: 'value',
          },
        },
      ],
      sessionEntityTypes: [
        {
          name: sessionPath,
          entityOverrideMode: 'ENTITY_OVERRIDE_MODE_OVERRIDE',
          entities: [
            {
              value: 'entityValue',
              synonyms: ['synonym1', 'synonym2'],
              entityType: '@entityType',
            },
          ],
        },
      ],
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText, intent } = response.queryResult;
    const { parameters } = response.queryResult;
    
    if (intent) {
      console.log('Intent:', intent.displayName);
    }
    
    if (intent && intent.displayName === 'Welcome') {
      // Handle welcome intent
    } else if (intent && intent.displayName === 'Goodbye') {
      // Handle goodbye intent
    } else {
      // Handle fallback intent
    }
    
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

This code adds a sessionEntityTypes array to the queryParams object, which allows us to define session-specific entities. Session entities can be used to override or supplement the entities defined in the Dialogflow agent. This can be useful when we want to provide custom entity values or synonyms based on the current session. The code also updates the contexts array with a context object that has a name, lifespan count, and parameters.

Handling fallback responses

Fallback responses are used when the user's input does not match any of the defined intents. Dialogflow API provides a fallback intent that is triggered when no other intent is matched. To handle fallback responses, we need to modify the code in the handleNewUserMessage function in the Chatbot.js file. Replace the code that handles fallback intent with the following code:

const handleNewUserMessage = async (newMessage) => {
  setMessages([...messages, { message: newMessage, isUser: true }]);
  
  const sessionPath = sessionClient.sessionPath(projectId, '<SESSION_ID>');
  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: newMessage,
        languageCode: 'en-US',
      },
    },
    queryParams: {
      contexts: [
        {
          name: 'generic',
          lifespanCount: 2,
          parameters: {
            contextParam: 'value',
          },
        },
      ],
      sessionEntityTypes: [
        {
          name: sessionPath,
          entityOverrideMode: 'ENTITY_OVERRIDE_MODE_OVERRIDE',
          entities: [
            {
              value: 'entityValue',
              synonyms: ['synonym1', 'synonym2'],
              entityType: '@entityType',
            },
          ],
        },
      ],
    },
  };
  
  try {
    const [response] = await sessionClient.detectIntent(request);
    const { fulfillmentText, intent } = response.queryResult;
    const { parameters } = response.queryResult;
    
    if (intent) {
      console.log('Intent:', intent.displayName);
    }
    
    if (intent && intent.displayName === 'Welcome') {
      // Handle welcome intent
    } else if (intent && intent.displayName === 'Goodbye') {
      // Handle goodbye intent
    } else if (intent && intent.displayName === 'Fallback') {
      // Handle fallback intent
    } else {
      // Handle other intents
    }
    
    setMessages([...messages, { message: fulfillmentText, isUser: false }]);
  } catch (error) {
    console.error('Error:', error);
  }
};

This code adds an additional condition to check if the intent's display name is "Fallback". If the intent is a fallback intent, we can handle it accordingly. Fallback responses can be used to provide a default response when the user's input does not match any of the defined intents.

Deploying the Chatbot

Building and optimizing the React app

Before we can deploy our chatbot, we need to build and optimize the React app. To build the app, open your terminal and navigate to the project directory. Run the following command:

npm run build

This command will create a build directory with the optimized and minified version of the React app.

Deploying to a hosting platform

To deploy our chatbot, we need to choose a hosting platform that supports static websites. There are many hosting platforms available, such as Netlify, Vercel, and GitHub Pages. For this tutorial, we will use Netlify.

  1. Sign up for a free account on Netlify
  2. Click on "New site from Git" to create a new site.
  3. Connect your Git repository and select the branch to deploy.
  4. Configure the build settings:
    • Build command: npm run build
    • Publish directory: build
  5. Click on "Deploy site" to start the deployment process.
  6. Once the deployment is complete, you will receive a unique URL for your chatbot.

Testing the deployed chatbot

To test the deployed chatbot, open the URL provided by the hosting platform in your web browser. You should see the chatbot interface rendered on the screen. You can now interact with the chatbot by typing messages and receiving responses from the Dialogflow API.

Conclusion

In this tutorial, we learned how to build a chatbot using React and the Dialogflow API. We started by setting up the project and installing the necessary dependencies. We then designed the chatbot UI and integrated the Dialogflow API. We enhanced the chatbot by adding natural language processing, context and session management, and fallback responses. Finally, we deployed the chatbot to a hosting platform and tested it in a live environment.

By combining the power of React and Dialogflow API, we can create intelligent and interactive chatbots that can automate customer support, answer frequently asked questions, and provide personalized recommendations. With the flexibility and scalability of React, we can easily customize and extend our chatbot to meet the specific needs of our users.

Web DevelopmentReactChatbotDialogflow API
About Us

Devbrite is the best resource for high-quality curated articles on tech, programming, career growth, and FAANG insights. Our mission at Devbrite is to provide developers with the best kept secrets of the tech industry. Whether you are a complete beginner looking to learn how to code, or you are already a seasoned developer with many years of experience, we provide you with tutorials, career advice, compensation data, and many more.

Discuss topics such as tech stacks, programming languages, compensation, companies, career paths, and more. Create your own developer profile that's easily shareable, or read tutorials or discussions about the topics you are interested in.

Devbrite
Find us on
Resources

Devbrite © 2024. All rights reserved.