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@14You’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.
.svg)
