How to Build a Chatbot in React JS Like a Pro

Whether it’s for appointment booking, FAQs, or product recommendations, just about any website could benefit from an AI Agent or chatbot.

And they are. With chatbots being the fastest growing communication channel for brands, there’s no time like the present to get in on the action.

So how do you string together all these components? On top of React, you have to worry about your LLM provider, AI agent frameworks, and somehow package that all into UI components that your visitors can interact with.

The good news is that chatbot platforms have you covered. In this guide I’ll give you the steps to:

• Build a custom chatbot
• Create a website with Next.js and React
• Integrate your chatbot into the React front-end
• Customize the chatbot’s UI style

With little effort, you’ll have a professional, high-performing chatbot integrated seamlessly into your React site.

By the way, you can skip the tutorial and check out the code.

2. Build a Chatbot

On to the first big piece of the puzzle: the chatbot.

To create a bot, go to the studio and click Create Bot +.

It helps to define a purpose, but you don’t need a particularly developed idea. Your business almost certainly has policy documents, FAQs, or a product catalogue. A simple chatbot with access to this information could free up lots of time you spend answering repetitive questions.

In my case, I’ll build a digital sommelier: a bot that advises users on wines to purchase, guided by an external wine catalogue.

Define the flow

Regardless of what it does, your bot will need a flow. This is the logic that determines the bot’s behavior. 

In the studio, hit Workflows in the left panel.

It doesn’t have to be complicated. A single autonomous node with access to your documents, (i.e. the default bot), can be supremely effective.

It’s important to give the bot instructions. This includes:

• The persona you’d like it to adopt, e.g. polite, chummy, or mirror the user’s tone
• Ways to begin or end the message
• How to respond to particular queries
• Which documents to refer to when

Add the Knowledge Base

This is the information that the bot will draw on for RAG (retrieval-augmented generation), or catering its responses to your data. This is relatively straightforward, but it’s worth learning how to optimize your files for the best possible RAG.

Wynona, my digital sommelier(-ère?) has access to a wine list. It’s just a subset of the Wine Reviews dataset: a list of wines with their regions and tasting notes.

Deploy

Once you’re happy with your bot, hit Publish in the studio and your bot is live.

This makes it available for integration across all sorts of communication channels, like WhatsApp, Telegram, and in web apps, like the one we’re building.

2. Create a React App

We have our chatbot, but it needs a home, so let’s build a quick React app where users can interact with the bot.

Note that I’ll be using Next.js. I think it’s more relevant and complete than plain React, and this tutorial will cover all the ground that React users need.

Run create-next-app

Run:

npx create-next-app@14

You’ll notice I’m using Next.js 14. The reason is that we need React 18 to make our app chatbot compatible. Running with @latest will build with Next.js 15 and React 19. Running the above command is the easiest way to ensure you run the correct version of React, and that Next is compatible.

Set app configurations

You’ll be prompted with a series of questions. I personally stick with the default settings, which is what I’ll be doing for this tutorial.

Assuming all goes smoothly, you’ll see the success log.

3. Integrate Your Chatbot Into your React App

Time to make our Barbies kiss.

Get the Botpress React Boilerplate

To integrate the chatbot into our app, we’ll need:

• Our client ID
• The prebuilt webchat React components.

Botpress has boilerplate code that includes both. To get it:

• Navigate to the studio, and click Share in the top-right corner.
• At the bottom-right of the pop-up, click Configure

• Click the React tab at the top-right.
• Here you’ll find the Botpress boilerplate, including the installation command a client ID

By the way, if you ever need quick access to your client ID:

• Go to your Botpress dashboard
• Select Webchat in the side panel
• Click Advanced Settings

It’s best practice to store this in an environment variable, but we’ll keep it in the component for now.

Create a Chat Component in your App

In my project directory, I’m going to create a chat.tsx file.

Then fill it with the code for the chatbot client:

"use client"
import { useState } from 'react';


import {
   Webchat,
   WebchatProvider,
   Fab,
   getClient,
   Configuration,
} from '@botpress/webchat';


const clientId = "";


const configuration: Configuration = {
   color: '#000',
};


export default function Chat() {
   const client = getClient({
       clientId,
   });


   const [isWebchatOpen, setIsWebchatOpen] = useState(false);


   const toggleWebchat = () => {
       setIsWebchatOpen((prevState) => !prevState);
   };


   return (
       <div
           style={{
               position: 'fixed',
               display: 'flex',
               flexDirection: 'column',
               bottom: 0,
               right: 0,
               alignItems: 'flex-end',
               gap: '12px',
               padding: '24px', // give some breathing room
               zIndex: 9999,
           }}
       >
           <WebchatProvider client={client} configuration={configuration}>


               <div
                   style={{
                       // position: '',
                       marginTop: '12px',
                       marginBottom: '72px',
                       width: '350px',
                       maxHeight: '500px',
                       overflow: 'scroll',
                       borderRadius: '16px',
                       backgroundColor: '#fff',
                       transform: isWebchatOpen ? 'scale(1)' : 'scale(0)',
                       transformOrigin: 'bottom right',
                       transition: 'transform 0.3s ease-in-out',
                   }}
               >
                   <Webchat />
               </div>
               <Fab onClick={toggleWebchat} style={{ position: 'absolute', bottom: '24px', right: '24px' }} />
           </WebchatProvider>
       </div>
   );
}

This is the botpress code with a few notable tweaks:

• "use client" at the top, for components that deal with state management
• Renaming the function from App to Chat
• Some styling

Now navigate over to app/page.tsx and import it just above the footer:

import Image from "next/image";
import styles from "./page.module.css";
import Chat from "./chat";


export default function Home() {
 return (
   <div className={styles.page}>
     <main className={styles.main}>
      
       <Image
         className={styles.logo}
         src="https://nextjs.org/icons/next.svg"
         alt="Next.js logo"
         width={180}
         height={38}
         priority
       />
       <ol>
         <li>
           Get started by editing <code>app/page.tsx</code>.
         </li>
         <li>Save and see your changes instantly.</li>
       </ol>


       <div className={styles.ctas}>
         <a
           className={styles.primary}
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
           <Image
             className={styles.logo}
             src="https://nextjs.org/icons/vercel.svg"
             alt="Vercel logomark"
             width={20}
             height={20}
           />
           Deploy now
         </a>
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
           className={styles.secondary}
         >
           Read our docs
         </a>
       </div>
      
     </main>
     <Chat/>
     <footer className={styles.footer}>
       <a
         href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/file.svg"
           alt="File icon"
           width={16}
           height={16}
         />
         Learn
       </a>
       <a
         href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/window.svg"
           alt="Window icon"
           width={16}
           height={16}
         />
         Examples
       </a>
       <a
         href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
         <Image
           aria-hidden
           src="https://nextjs.org/icons/globe.svg"
           alt="Globe icon"
           width={16}
           height={16}
         />
         Go to nextjs.org →
       </a>
     </footer>
   </div>
 );
}

Now you can run npm run dev in a terminal in the project directory to run it on a local server.

Power a React App with a Chatbot

With heavy-duty web frameworks, you’re too busy with core functionality to worry about add-ons.

Botpress comes with pre-built components, a visual drag-and-drop builder, and top-to-bottom customizability. Simple integration doesn’t come at the cost of performance. 

If you’re building with React, then you’re after quality. Your chatbot should reflect that.

Start building today. It’s free.

FAQs

1. Can I deploy this chatbot to production?

Yes, you can deploy the chatbot to production after publishing it in Botpress Studio and embedding it in your React app. Once embedded, you can deploy the entire application using platforms like Vercel or any hosting provider that supports your tech stack.

2. Can I customize the look and feel of the chatbot UI?

Yes, you can fully customize the look of the chatbot UI using the Botpress Webchat component. It supports props for colors, size, placement, and styling, and you can override default styles with custom CSS to match your brand’s design.

3. Do I need to define a bot persona, and how does it affect conversations?

Yes, defining a bot persona is important because it guides how the chatbot communicates, including tone and phrasing. This ensures the conversation aligns with your brand’s voice and improves user trust.

4. What’s the purpose of a chatbot flow, and how do I define one?

The purpose of a chatbot flow is to control the logic of how the bot responds to users. In Botpress, you define flows visually in the “Workflows” tab using nodes for actions, messages, conditions, and transitions.

5. Can I use my existing documents (e.g., FAQs or product catalogs) to train the bot?

Yes, you can upload existing documents like FAQs or manuals into the Botpress Knowledge Base. The bot uses retrieval-augmented generation (RAG) to answer questions by pulling relevant information directly from those documents.