Build AI Chatbot with React

Build Your First Chatbot: Complete Guide to Build AI Chatbot with React + Open AI

by

1. Why You Should Build Your First AI Chatbot Today

You see chatbots on many websites. They answer questions, guide users, and improve user experience. When you build AI chatbot with React, you gain control over how your app talks to users. You also learn skills that are in high demand in web development.

Build AI Chatbot with React

AI chatbots are no longer limited to big companies. Tools like OpenAI make it easier for you to add smart features to your apps. You write simple code, connect an API, and your chatbot starts responding in natural language. This makes your app more useful and interactive.

Build AI Chatbot with React

2. What You Need Before You Start

Before you start, you need a few tools ready. First, install Node.js. This allows you to run JavaScript on your system. Next, you need a React app. You can create one using Create React App or Vite.

You also need an OpenAI API key. You get this from the OpenAI dashboard. This key allows your app to send requests and receive responses. Keep this key safe. Do not expose it in public code.

3. Setting Up Your React Project

Start by creating a new React app. Open your terminal and run:

npx create-react-app ai-chatbot
cd ai-chatbot
npm start

This creates a basic React app. You will see a default page in your browser. Now clean up the project. Remove unused files and keep your folder simple.

Create a new folder called components. Inside it, create a file named Chatbot.js. This file will hold your chatbot logic and UI. Keeping your code organized helps you manage the project better as it grows.

4. Designing a Simple Chat UI

Your chatbot needs a clean interface. Users should type messages and see responses clearly. Start with a basic layout.

Complete tutorial is here

Here is a simple Chatbot component:

import React, { useState } from "react";function Chatbot() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");  
  const handleSend = () => {
    if (!input.trim()) return;    
  const newMessage = { role: "user", content: input };
    setMessages([...messages, newMessage]);
    setInput("");
  };  
  return (
    <div style={{ maxWidth: "600px", margin: "auto" }}>
      <h2>AI Chatbot</h2>     
       <div style={{ border: "1px solid #ccc", padding: "10px", height: "300px", overflowY: "scroll" }}>
        {messages.map((msg, index) => (
          <p key={index}>
            <strong>{msg.role}:</strong> {msg.content}
          </p>
        ))}
      </div>      
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type your message..."
        style={{ width: "80%" }}
      />      
      <button onClick={handleSend}>Send</button>
    </div>
  );
}
export default Chatbot;

This UI shows messages and allows input. It does not include AI responses yet. You will add that next.

5. Connecting OpenAI API to Your Chatbot

To build AI chatbot with React, you need to connect your app to OpenAI. You should not call the API directly from the frontend. Instead, create a backend server. This keeps your API key secure.

Create a simple Node.js server:

mkdir server
cd server
npm init -y
npm install express cors openai dotenv

Now create a file named index.js:

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import OpenAI from "openai";dotenv.config();const app = express();
app.use(cors());
app.use(express.json());const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});
app.post("/chat", async (req, res) => {
  try {
    const userMessage = req.body.message;    
    const response = await openai.chat.completions.create({
      model: "gpt-4.1-mini",
      messages: [{ role: "user", content: userMessage }],
    });    
    res.json({
      reply: response.choices[0].message.content,
    });
  } catch (error) {
    res.status(500).json({ error: "Something went wrong" });
  }
});
app.listen(5000, () => {
  console.log("Server running on port 5000");
});

Create a .env file:

OPENAI_API_KEY=your_api_key_here

This server receives user input and returns AI responses.

6. Sending Messages from React to Backend

Now connect your React app to the backend. Update your Chatbot component:

const handleSend = async () => {
  if (!input.trim()) return;  
  const userMessage = { role: "user", content: input };
  setMessages((prev) => [...prev, userMessage]);  
  setInput("");  try {
    const response = await fetch("http://localhost:5000/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ message: input }),
    });    
    const data = await response.json();    
    const botMessage = { role: "assistant", content: data.reply };
    setMessages((prev) => [...prev, botMessage]);
  } catch (error) {
    console.error(error);
  }
};

Now your chatbot sends messages to the server and receives replies. This is the core step when you build AI chatbot with React.

7. Improving User Experience

A basic chatbot works, but you can improve the experience. Add loading states so users know the bot is thinking. You can also style messages differently for user and bot.

Example:

{messages.map((msg, index) => (
  <div key={index} style={{ textAlign: msg.role === "user" ? "right" : "left" }}>
    <p style={{ background: "#f1f1f1", padding: "8px", borderRadius: "8px" }}>
      {msg.content}
    </p>
  </div>
))}

You can also add auto scroll. This ensures the latest message is always visible. These small changes improve usability and keep users engaged.

8. Adding Memory to Your Chatbot

Right now, your chatbot treats each message as separate. You can improve this by sending previous messages to OpenAI. This gives context to the conversation.

Update your backend:

app.post("/chat", async (req, res) => {
  try {
    const messages = req.body.messages;    
    const response = await openai.chat.completions.create({
      model: "gpt-4.1-mini",
      messages: messages,
    });    
    res.json({
      reply: response.choices[0].message.content,
    });
  } catch (error) {
    res.status(500).json({ error: "Error" });
  }
});

Update frontend:

const handleSend = async () => {
  if (!input.trim()) return; 
  const updatedMessages = [...messages, { role: "user", content: input }];
  setMessages(updatedMessages);
  setInput("");  const response = await fetch("http://localhost:5000/chat", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ messages: updatedMessages }),
  });  
  const data = await response.json();  setMessages([...updatedMessages, { role: "assistant", content: data.reply }]);
};

Now your chatbot remembers the conversation. This makes replies more relevant.

9. Testing Your Chatbot

Test your chatbot with different inputs. Long questions, unclear prompts, and simple questions are all acceptable. Understanding how your bot behaves is made easier by this. Error cases should also be checked. What happens if the server fails. What happens if the API limit is reached. Include error messages in your user interface to let users know what’s going on.

Build AI Chatbot with React

10. Deploying Your Chatbot

Deploy your chatbot online once it is functional. For the backend, you can use platforms like Vercel, Render, or Railway. Ensure that your API key is saved in environment variables. Never make it available in front-end code. Test once more after the deployment to ensure that everything works as expected.

Build AI Chatbot with React

11. Common Mistakes to Avoid

Many beginners make the same mistakes. One common issue is exposing the API key in React. This leads to misuse and extra costs.

Another issue is not handling errors. Your chatbot should fail gracefully. Show a message like “Try again later” instead of breaking the app. Clean code and proper checks improve reliability.

12. What You Can Build Next

After you build AI chatbot with React, you can grow your project step by step. You can add voice input so users speak instead of typing. You can add file upload so users share images or documents. You can also add user login so each person has a private chat.

You can connect your chatbot to a database. This helps you save messages and chat history. You can study this data to see what users ask and improve answers. With these changes, your chatbot becomes more useful and closer to a real product.

Final Thoughts

Now you have a chatbot that works, built with OpenAI and React. You handled actual user input, connected a backend, and created a user interface. This project demonstrates how easy it is to integrate AI with modern tools.
Try it out by making your chatbot better. Improve responses, add features, and test new concepts. Your abilities develop and the app becomes more useful with each update.

More

Leave a Comment