Building Your Own AI Chatbot With React and ChatGPT API

By Jessie Hobb On Nov 20, 2023

Artificial Intelligence (AI) chatbots have transformed the way businesses interact with customers online. They provide instant, round-the-clock customer support and engagement, offering a seamless and efficient user experience. In this blog, we will guide you through the process of building your own AI chatbot using React and the ChatGPT API. By the end of this tutorial, you’ll have a functional chatbot that can understand and respond to user queries, making your website or application more interactive and user-friendly.

Why ChatGPT?

ChatGPT is a cutting-edge language model developed by OpenAI. It’s trained on a vast amount of text data, making it capable of natural language understanding and generation. This makes it an ideal choice for building conversational AI applications. You can leverage the ChatGPT API to integrate its capabilities into your own chatbot.

Prerequisites

Before we dive into the development process, let’s ensure you have the necessary tools and knowledge:

Basic knowledge of React: You should be comfortable with React, a popular JavaScript library for building user interfaces.
Node.js and npm: You’ll need Node.js and npm (Node Package Manager) installed on your system.
A ChatGPT API key: To access the ChatGPT API, you’ll need an API key from OpenAI. You can sign up on their platform to get one.
Text Editor: Choose a text editor or integrated development environment (IDE) of your choice for writing code.
Create React App: We’ll start with a React application. Make sure you have Create React App installed.

Step 1: Set Up Your React Project

We’ll begin by creating a new React project using Create React App. Open your terminal and run the following commands:

npx create-react-app chatbot
cd chatbot npm start

This will create a new React project named “chatbot” and start the development server. You can access your application at http://localhost:3000 in your web browser.

Step 2: Create a Chatbot Component

In your React project, create a new component for the chatbot. You can do this by creating a new file, Chatbot.js, inside the src folder of your project.

// src/Chatbot.js
import React, { useState } from 'react';

function Chatbot() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSendMessage = () => {
    // Implement this function to send user messages to ChatGPT
  };

  return (
    <div className="chatbot">
      <div className="chatbox">
        <div className="messages">
          {messages.map((message, index) => (
            <div key={index} className="message">
              {message.role === 'bot' ? (
                <div className="bot-message">{message.text}</div>
              ) : (
                <div className="user-message">{message.text}</div>
              )}
            </div>
          ))}
        </div>
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Type a message..."
        />
        <button onClick={handleSendMessage}>Send</button>
      </div>
    </div>
  );
}

export default Chatbot;

In this component, we’ve set up the basic structure of the chatbot interface, including a message display area, an input field, and a send button. We’re using React state to manage the messages and user input.

Step 3: Integrate ChatGPT API

To integrate the ChatGPT API into your chatbot, you’ll need to make API calls to send user messages and receive bot responses. To do this, you can use the axios library to make HTTP requests. If you haven’t already installed axios, you can do so by running:

Next, create a function to send user messages to the ChatGPT API and handle bot responses. Replace the placeholder function handleSendMessage in the Chatbot.js component with the following code:

// Add this import statement at the top of the file
import axios from 'axios';

// ...

const handleSendMessage = async () => {
  if (input.trim() === '') return;

  // Add the user message to the messages array
  setMessages([...messages, { role: 'user', text: input }]);

  try {
    // Send the user message to the ChatGPT API
    const response = await axios.post(
      'https://api.openai.com/v1/engines/davinci-codex/completions',
      {
        prompt: `User: ${input}\nChatGPT:`,
        max_tokens: 150,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY',
        },
      }
    );

    // Extract the bot response from the API response
    const botResponse = response.data.choices[0].text;

    // Add the bot response to the messages array
    setMessages([...messages, { role: 'bot', text: botResponse }]);

    // Clear the input field
    setInput('');
  } catch (error) {
    console.error('Error sending message:', error);
  }
};

Replace 'YOUR_API_KEY' with your actual ChatGPT API key.

This code sends the user’s message to the ChatGPT API and appends the bot’s response to the chat interface. The max_tokens parameter specifies the maximum length of the bot’s response. You can adjust this value as needed.

Step 4: Styling Your Chatbot

To make your chatbot visually appealing, you can add some CSS styles to your chatbot component. You can either create a separate CSS file or use a CSS-in-JS library like styled-components to style your components. Here’s a basic example using inline styles:

// Inside the Chatbot component
const chatbotStyles = {
  chatbot: {
    width: '300px',
    backgroundColor: '#f0f0f0',
    border: '1px solid #ccc',
    borderRadius: '5px',
    margin: '0 auto',
    padding: '10px',
  },
  chatbox: {
    display: 'flex',
    flexDirection: 'column',
  },
  messages: {
    maxHeight: '300px',
    overflowY: 'scroll',
  },
  message: {
    marginBottom: '10px',
  },
  botMessage: {
    backgroundColor: '#007bff',
    color: 'white',
    padding: '5px 10px',
    borderRadius: '5px',
    marginLeft: 'auto',
  },
  userMessage: {
    backgroundColor: '#e0e0e0',
    padding: '5px 10px',
    borderRadius: '5px',
    marginRight: 'auto',
  },
  input: {
    width: '100%',
    padding: '5px',
    border: '1px solid #ccc',
    borderRadius: '5px',
    marginBottom: '10px',
  },
  button: {
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    padding: '10px 20px',
    borderRadius: '5px',
    cursor: 'pointer',
  },
};

You can apply these styles to the corresponding elements in your return statement. For example, you can set the style attribute for the input field and button:

<input
  type="text"
  value={input}
  onChange={handleInputChange}
  placeholder="Type a message..."
  style={chatbotStyles.input}
/>
<button onClick={handleSendMessage} style={chatbotStyles.button}>
  Send
</button>

Feel free to customize the styles to match the look and feel of your website or application.

Step 5: Rendering Your Chatbot

Now that you’ve created your chatbot component and integrated the ChatGPT API, you can render it in your React application. Open the src/App.js file and replace its contents with the following:

// src/App.js
import React from 'react';
import Chatbot from './Chatbot';
import './App.css';

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

export default App;

This code imports the Chatbot component and renders it within the App component.

Step 6: Test Your Chatbot

You can now test your chatbot by running your React application. In the terminal, make sure you’re in the project directory and run the following command:

Your chatbot should appear in your browser, and you can start typing messages to interact with it. The chatbot will send user messages to the ChatGPT API and display bot responses in the chat interface.

Step 7: Deployment

Once you’re satisfied with your chatbot, you can deploy it to a web server or a hosting platform of your choice. Popular options for deploying React applications include platforms like Vercel, Netlify, and GitHub Pages.

Remember to configure your API key and ensure that your application’s environment variables are securely stored when deploying to a production environment.

Conclusion

Building your own AI chatbot with React and the ChatGPT API is an exciting journey that can enhance user engagement and provide valuable assistance on your website or application. By following the steps outlined in this tutorial, you’ve created a functional chatbot that can understand and respond to user queries, making your project more interactive and user-friendly. As you continue to develop and refine your chatbot, you can explore additional features, such as integrating with external databases or services and enhancing the bot’s natural language understanding. The possibilities are endless, and the future of chatbots is full of potential. Happy coding!