Building AI-Powered Applications: Getting Started with Botpress Framework in React

Writing code for implementing LLM logic can be really tiring and this is what got me experimenting with different frameworks and tools to make my life easier. One such framework that I came across is Botpress. It's an easy to use framework for building AI based apps quickly and it comes with a lot of flexibility as well. More importantly, it offers React components out of the box for you. And you can still customize the look and feel of the components as you wish.

Why Botpress though?

Botpress is not just a framework, it's an all-in-one platform for building AI-powered apps. It greatly simplifies creating, deploying, and managing AI agents. So if you're looking for a complete package of scalable AI solutions, this is it.

Some of the advanced things that you can do with Botpress:

• Visual Workflow Design: Drag-and-drop interface for no-code bot creation.
• Code Flexibility: Customizable tools and integrations for advanced logic.
• Multi-Channel Support: Deploy bots on websites, WhatsApp, Slack, and more.
• AI Capabilities: Includes NLU, knowledge integration, and personality customization.

Getting started with Botpress framework - The Webchat SDK

To show you how you can use Botpress framework in your app, we're going to build a very basic AI chat application using Botpress' Webchat SDK which provides ready to use components. It offers a variety of different components that we'll need:

1. The WebchatProvider - Needs to wrap all chat components and has to be initialized with a Botpress client. We can also customize the theme of the chat interfaces using this provider.
2. FAB (Floating Action Button) - A fancy name for the small circle that upon clicking opens up the chat.
3. WebChat - The main chat interface where you can see all messages.

Enough theory, let's get our hands dirty.

We'll use create-react-app to initialize a new React project. Open a folder in VS Code and in the integrated terminal write the following:

npx create-react-app botpress-chat
or
yarn create react-app botpress-chat


This will create a new project for you automatically. This is how your project structure will look like:

Cool! Let's now run the server to make sure our project was initialized perfectly. Go inside the project directory:

cd botpress-chat


Now run the server:

npm start

Voila, here's your app running on the default port, 3000:

Note: Sometimes, you might get the following error upon running npm start:

In that case, you can overcome this by installing the latest ajv package:
npm install ajv@latest


Setting up Botpress framework in React app

We're now going to install the Botpress libraries, namely the Webchat SDK. These libraries will help us build the chat interface and interact with our chat bot.

Type the following command in your terminal:
npm install @botpress/webchat @botpress/webchat-generator

Note: At the time of this writing, Botpress' Webchat libraries are using react version 18, however latest version of create-react-app is using react version 19. Which means that you downgrade to version 18 for react and react-dom libraries. You can do this by running:
npm install react@18.2.0 react-dom@18.2.0

Once these libraries have been installed, we can start integrating Botpress into our app.
Go to your App.js file (App.ts if you're using Typescript) inside the src folder and replace the code inside the file with the following code:

import { Webchat, WebchatProvider, Fab, getClient } from "@botpress/webchat";
import { buildTheme } from "@botpress/webchat-generator";
import { useState } from "react";
const { theme, style } = buildTheme({
  themeName: "prism",
  themeColor: "#634433",
});
//Add your Client ID here ⬇️
const clientId = "YOUR_CLIENT_ID";
export default function App() {
  const client = getClient({ clientId });
  const [isWebchatOpen, setIsWebchatOpen] = useState(false);
  const toggleWebchat = () => {
    setIsWebchatOpen((prevState) => !prevState);
  };
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <style>{style}</style>
      <WebchatProvider
        theme={theme}
        client={client}
      >
        <Fab onClick={toggleWebchat} />
        <div
          style={{
            display: isWebchatOpen ? "block" : "none",
          }}
        >
          <Webchat />
        </div>
      </WebchatProvider>
    </div>
  );
}

Notice the line no. 9 in this file with the following code:

const clientId = "YOUR_CLIENT_ID";

The constant "clientId" has been assigned a dummy placeholder value. This is because we'll need to get the client id of the bot that we want to use in our app from the Botpress website.
First, head over to Botpress.com and sign-up for free. Once you've created an account and filled some basic info you should land on the Dashboard (app.botpress.cloud) which should look like this:

Cool, let's go ahead and create a new bot! Click on the button "Create Bot":

You should see this next:

And once you're done you'll see this:

However, our bot hasn't been published yet. We will need to publish it from the Botpress studio. Go ahead and click the "Open in Studio" button.

This will take you to a different page called the Botpress studio (notice that the URL has changed from app.botpress.cloud to studio.botpress.cloud). Over here we'll need to set-up one more thing before our bot is ready to use.
We have to add the OpenAI integration so that we can use OpenAI's LLM through our bot. To do this follow the below steps.
First, click on "installed integrations" on the left panel.

This will open the Botpress hub explorer. Inside the search box type "openai" and click on the first result that appears.

After clicking you'll be taken to the OpenAI integration page. Click on the button "install integration".

Great, the integration will get installed. You can close the popups. Now on the top right, click on the "Publish" button as the final step.

That's it! Our new chatbot has been created and published.
You can close the Botpress studio window and go back to your workspace (app.botpress.cloud). Now in the workspace page on the left hand side, you will notice there is an option that says "Webchat" as shown below. Click on it.

This will open a bunch of customization options for our bot in the "general" tab. You can give it a name, description, picture, color, etc. Once you're done customizing make sure to scroll down and click on "save" button to save your changes.

Now let's get the client id of the bot we've just created. We will need to go to the "advanced settings" tab and copy the client id of the bot from there:

Great! Now go back to your codebase and find the below line (should be on line number 9) and replace the placeholder value "YOUR_CLIENT_ID" with your client id that you've just copied:

const clientId = "YOUR_CLIENT_ID";

Cool, now in your terminal type the following command to start the server:
npm start

Go to localhost:3000 and you should see something like this:

Click on the FAB (Floating Action Button) component on top left of the page and it will open up a chat interface. You can then try talking to the bot.

Pretty cool! You can explore the official documentation on Botpress' website to further customize these chat UI components over here.

That's it for this tutorial, let me know if you'd like to learn more about Botpress!