How to add an AI chatbot to a React app

People who search for “react chatbot” usually want one of two things: a component library to build their own chat UI, or a working AI assistant they can drop into an existing app. This page covers the second. If you want the first, skip to build or embed.

What you need

• A Feedbot bot (the Free plan works) and its bot id from Dashboard → Bot → Install.
• A React app: Vite, Create React App, Remix, Gatsby or anything else that renders React in the browser. For Next.js, see the Next.js guide.

Option 1: the @feedbotai/react package

1. Install the package:

   npm install @feedbotai/react
   # or: pnpm add @feedbotai/react

2. Add your bot id to an environment variable. In Vite that’s .env:

   VITE_FEEDBOT_BOT_ID=YOUR_BOT_ID

   In Create React App use REACT_APP_FEEDBOT_BOT_ID and process.env.REACT_APP_FEEDBOT_BOT_ID. The bot id isn’t a secret, so hardcoding it is fine too.

3. Render the widget once, in the root component, next to your routes:

   import { FeedbotWidget } from "@feedbotai/react";
   
   export default function App() {
     return (
       <>
         <AppRoutes />
         <FeedbotWidget botId={import.meta.env.VITE_FEEDBOT_BOT_ID} />
       </>
     );
   }

4. Run the app. A chat button appears in the bottom-right corner. Ask it something to confirm it answers.

The component renders nothing into your tree. It injects https://w.feedbotai.com/v1/feedbot.js once and keeps identity, metadata and open state in sync with your props. Other props: position, primaryColor, mode and container (inline chat), open (controlled), and the callbacks onReady, onOpen, onClose, onMessage. position, primaryColor, mode and container are read once, when the script loads.

Option 2: one script tag in index.html

No package, no build step. Paste this before </body> in index.html (Vite) or public/index.html (CRA):

<script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>

You can still use the useFeedbot() hook with the script tag: it works with or without a mounted <FeedbotWidget>.

Open the chat from a button

import { useFeedbot } from "@feedbotai/react";

export function PricingHelp() {
  const { open, sendMessage } = useFeedbot();
  return (
    <>
      <button onClick={open}>Chat with us</button>
      <button onClick={() => sendMessage("Which plan fits a team of 5?")}>Ask about plans</button>
    </>
  );
}

The hook returns open, close, toggle, sendMessage, identify, setMetadata, reset and registerAction. Calls made before the script has loaded are queued, so you don’t need to wait for a ready event. The full command list is in the JavaScript API docs.

Identify logged-in users

Pass the signed-in user and a hash computed on your server:

<FeedbotWidget
  botId={import.meta.env.VITE_FEEDBOT_BOT_ID}
  user={user ? { id: user.id, email: user.email, name: user.name } : null}
  userHash={feedbotHash}           // from your API, never computed in the browser
  metadata={user ? { plan: user.plan } : undefined}
/>

The hash is HMAC-SHA256(identitySecret, userId) as hex. In a Vite or CRA app there’s no server in the bundle, so return it from your backend, for example from the /me endpoint you already call after login. Setting user back to null on logout calls reset, and the next person on that device starts a fresh conversation. Verified users see their chat history on any device. Code for Node, Python and PHP is in Identify users.

Show the chat on some routes only

Render <FeedbotWidget> inside the layout for the routes that need it, for example your dashboard layout but not the marketing pages. To hide it after it has loaded, there is no hide command; the cleanest approach is to mount the widget only in the layouts where you want it from the start.

Should you build a React chatbot or embed one?

We make Feedbot, so weigh this with that in mind. Building makes sense when the chat is your product: a custom AI app, a chat with your own model, or a UI that has to match a design system pixel for pixel. Good starting points:

Embedding makes sense when you want a support or sales assistant on an existing app this week. Feedbot gives you the UI, answers from your knowledge base, lead capture, human handoff to Telegram, Slack, Discord or email, and an inbox. The trade-off is less control over the chat’s look beyond the dashboard settings.

Troubleshooting

Train it on your app’s docs

On the Free plan the bot learns from text and FAQ you paste in. From Starter you can import your docs site or help center by URL or sitemap, and upload PDF, DOCX or Markdown files. Single-page apps that render content with JavaScript are imported through a real browser. See knowledge base for limits per plan.

Next steps

• Install docs for all script options and inline mode.
• Identify users for the server-side hash.
• Using Next.js? Follow the Next.js chatbot guide. Using Vue? See Vue.