How To Use OpenAI ChatGPT API in React JS

In this tutorial, you will learn how to integrate the OpenAI ChatGPT API with React JS to build intelligent chatbots. We will cover the steps involved in setting up the API, creating a chat interface with React JS, and sending messages to the API for processing. By the end of this video, you will have a basic understanding of how to use ChatGPT API with React JS and be able to implement it in your own projects.

Keywords: OpenAI, ChatGPT, API, React JS, chatbots, integration, intelligent, processing, interface, messaging, projects, development, machine learning, natural language processing, tutorial, programming, software, code, web development, chat application, user interface, messaging app, artificial intelligence, software development, front-end development, back-end development, programming languages.

ChatGPT starter CSS

After installing your React App, add the CSS below to the App.css file. This are just some general classes from my personal CSS collection.

.container {
  max-width: 900px;
  margin: 0 auto;
}
.container.container-sm {
  max-width: 782px;
}
.p-1 {
  padding: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.border-5 {
  border-radius: 5px;
}
.title {
  font-size: 3.75rem;
  font-weight: 500;
  margin: 3rem 0;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group select {
  border: 1px solid rgba(238, 238, 238, 0.9333333333);
  border-radius: 5px;
  padding: 0.5rem;
  
.text-center {
  text-align: center;
}
.shadow-sm {
  box-shadow: 0 2px 8px 3px rgba(0, 0, 0, 0.15);
}
.bg-darkGreen {
  background-color: rgb(36, 59, 36);
}

.text-darkGreen {
  color: rgb(36, 59, 36);
}
.text-light {
  color: #f8f9fa;
}

Creating the Node.js Server for the OpenAI API

const express = require("express");

const cors = require("cors");

const bodyParser = require("body-parser");

const { Configuration, OpenAIApi } = require("openai");

const config = new Configuration({
  apiKey: "YOUR_API_KEY",
});

const openai = new OpenAIApi(config);

// Setup server

const app = express();
app.use(bodyParser.json());
app.use(cors());

// endpoint for ChatGPT

app.post("/chat", async (req, res) => {
  const { prompt } = req.body;

  const completion = await openai.createCompletion({
    model: "text-davinci-003",
    max_tokens: 512,
    temperature: 0,
    prompt: prompt,
  });
  res.send(completion.data.choices[0].text);
});

const PORT = 8080;

app.listen(PORT, () => {
  console.log(`Server is running on port: ${PORT}`);
});

//run node server.js

Creating the ChatGPT front end

import React, { useState } from "react";
import axios from "axios";
export default function ChatGPT() {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");
  const HTTP = "http://localhost:8080/chat";

  const handleSubmit = (e) => {
    e.preventDefault();

    axios
      .post(`${HTTP}`, { prompt })
      .then((res) => {
        setResponse(res.data);
        console.log(prompt);
      })
      .catch((error) => {
        console.log(error);
      });

    setPrompt("");
  };

  const handlePrompt = (e) => {
    setPrompt(e.target.value);
  };

  return (
    <div className="container container-sm p-1">
      {" "}
      <h1 className="title text-center text-darkGreen">ChatGPT API</h1>
      <form className="form" onSubmit={handleSubmit}>
        <div className="form-group">
          <a href="">Link</a>
          <label htmlFor="">Ask questions</label>
          <input
            className="shadow-sm"
            type="text"
            placeholder="Enter text"
            value={prompt}
            onChange={handlePrompt}
          />
        </div>{" "}
        {/* <button className="btn btn-accept w-100" type="submit">
          Go
        </button> */}
      </form>
      <div className="bg-darkGreen  mt-2 p-1 border-5">
        <p className="text-light">
          {response ? response : "Ask me anything..."}
        </p>
      </div>
    </div>
  );
}