How to Integrate OpenAI with ReactJS Website?

Updated on July 7, 2025

The global conversational AI agents market is growing rapidly. In 2024, the market was worth $11.6 billion and is expected to grow at a 20-25% CAGR over the next decade. OpenAI commands a large chunk of this market, with its marquee ChatGPT tool getting almost 80% of the traffic for all AI tools. 

These two facts make it clear: if you’re building a conversational AI agent for your website, integrating with OpenAI is the obvious choice.

Additionally, given that over 1.3 million websites run on ReactJS, knowing how to integrate OpenAI AI agents on a ReactJS website is essential.

In this tutorial, we will take you through the process of adding OpenAI conversational AI agents to your ReactJS website using Kommunicate. Kommunicate will be the plug-and-play UI layer that works with your backend, handles the AI agent UI, documents user sessions, and handles agent-to-agent handoffs without additional coding. 

So, let’s get started!

Pre-Requisites to Integrate OpenAI Chatbot with ReactJS

Before you begin, make sure you have the following:

• A Node installation
• A ReactJS app set up (Using create-react-app)
• Basic knowledge of JavaScript and React hooks
• A Kommunicate account (Sign up here if you don’t have one)
• Your Kommunicate App ID (available in the Kommunicate dashboard)

Step 1: Create an Open AI Conversational AI Agent with Kommunicate

1. Go to Kommunicate Dashboard and click on Agent Integrations

2. In Agent Integrations, you will see the customer service AI agents that you’ve already created. For this tutorial, we will create a new AI agent by clicking Create new Agent.

3. When you click Create new Agent, Kommunicate will give you different options for building your AI agent. We will choose the OpenAI integration.

4. Choose the AI model that will be behind your AI agent. We’re choosing 4-o-mini because smaller AI models give customers faster responses.
   We’re also choosing 1000 as the max token number (the length of the answer the agent will give) and the temperature as 0 (This ensures that the agent derives facts directly from our documents without adding extra creativity).
   Once done, click on Save and Proceed.

5. After saving, you’ll be prompted to name your chatbot. We’re naming our AI agent React_Bot and using a standard avatar (You can also use your own custom avatar for the agent).

6. You’ll be asked whether you want to enable Human Handoff. We recommend that you enable this feature to have human-in-the-loop conversations with your customers.

7. Your OpenAI conversational AI agent is ready! Click on Let this bot handle all conversations so that this AI agent can be directly integrated with React.

After this, you can train this conversational AI agent to have more detailed, on-brand conversations. You can use FAQs, documents and URLs to create better AI agents.

You can find the details on how to train your AI agent in this article. 

Now that we have a functioning AI agent, let’s add it to our React App. 

Step 2: Add Kommunicate Web Widget to React App

1. Create a new React app (my-app) using the command:

npx create-react-app my-app

2. Go to the my-app folder within your React project

cd my-app

3. Inside the src folder within your project, create a new file chat.js

cd src
touch chat.js

4. Create a React Component for Kommunicate chat with the following code

import { useEffect } from "react";

const Chatbot = () => {
  useEffect(() => {
    (function (d, m) {
      const kommunicateSettings = {
        appId: "YOUR_APP_ID",        popupWidget: true,
        automaticChatOpenOnNavigation: true,
      };

      const s = document.createElement("script");
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://widget.kommunicate.io/v2/kommunicate.app";

      const h = document.getElementsByTagName("head")[0];
      h.appendChild(s);

      window.kommunicate = m;
      m._globals = kommunicateSettings;
    })(document, window.kommunicate || {});
  }, []);

  return null; // This component does not render anything visible
};

export default Chatbot;

5. Replace the APP ID with the code you get on the Install page under the Settings section on your Kommunicate dashboard

6. Import the Kommunicate Chat component in app.js

import React from "react";
import Chatbot from "./Chatbot";

function App() {
  return (
    <div className="App">
      <Chatbot />
    </div>
  );
}

export default App;

7. Start your app locally

npm Start

That’s it, your OpenAI AI agent is live on React! Here’s how it looks:

Next, let’s talk about the benefits of doing this with Kommunicate.

What are the Benefits of integrating OpenAI with ReactJS using Kommunicate?

Using Kommunicate to integrate OpenAI models with ReactJS websites has several benefits:

• Rapid deployment: Get your AI agent live in minutes, not days.
• Zero Backend Coding: Kommunicate handles all the heavy lifting, including session management and API calls.
• Easy RAG Integration – Kommunicate handles AI agent training for you; you can train your AI agent with FAQs, documents, URLs, and your Salesforce and Zendesk Knowledge Base.
• Built-in Features: Human handoff capabilities, conversation history, and customizable UI components come out of the box.
• Live Dashboard: You can monitor AI agent traffic and support tickets directly with a live dashboard.
• Scalability: Ready to handle enterprise-level traffic without additional configuration.

Essentially, with Kommunicate, you can add AI agents to your React website without having to deal with the complexity of the implementation. We handle the UI components, the overall training, and RAG behind the agent, and we provide you with all the metrics on a customizable dashboard.

Conclusion

Integrating OpenAI’s conversational AI capabilities into your ReactJS website has never been more straightforward. By leveraging Kommunicate as your integration layer, you can deploy a sophisticated AI agent in just a few simple steps without the complexity of building custom UI components or managing backend infrastructure.

With conversational AI becoming increasingly important for customer engagement and support, having this integration in your toolkit positions your React applications to meet modern user expectations. Whether you’re building a customer support portal, an e-commerce site, or any web application that benefits from intelligent user interactions, this OpenAI-React integration provides a solid foundation to build upon.

The next step is to train your AI agent with your specific business knowledge and customize the conversation flow to match your brand voice. Need help? You can book time on our calendar.