Use ChatGPT+React to create a chatbot (easy)

Before starting we must create an account at https://platform.openai.com/ and then once we start the session an api key will be required, for this we will do it in the following link: https://platform.openai.com/ docs/quickstart/build-your-application.

now we must create our project in react and install the following dependencies:

$ npx create-react-app react-chatbot //create the react app

npm install axios
npm install openai express body-parser cors // for server side

Now we must create our .env file in the root of the project and add our secret key there, then we will create a folder called server, where we will create the server.js file which will contain the following code:

now within our App.js we will create the logic to generate the chatbot:

1. we will need these 3 states

const [prompt, setPrompt] = useState(""); //here we same the user promps
const [isWriting, setIsWriting] = useState(false); // a loading state for the request
const [responses, setResponses] = useState([]); //array for save all the chatGPT responses

2.Now we will create the function in charge of making the request and saving the responses

  const handleSubmit = (e) => {
    const newPromp = prompt;
    e.preventDefault();
    setIsWriting(true); //to show the loading animation
    setPrompt(""); // to clean the textbox
    axios
      .post("http://localhost:8080/chat", { prompt }) //http://localhost:8080/chat-> is our banckend URL
      .then((res) => {
        setResponses([...responses, newPromp, res.data]); //we save our promps and response from the backend to create a chat
        setIsWriting(false);
      })

      .catch((err) => {
        setResponses([
          ...responses,
          newPromp,
          "Something went wrong wit the server try again please",
        ]);
        setIsWriting(false);
        console.error(err);
      });
  };

In a few words, we will create our server with a single function that will receive a “promp” which will be processed and sent to ChatGPT and it will return a response, which we will save.
Our front will be in charge of sending and saving these requests

Complete code for App.js

import axios from "axios";
import { useState } from "react";
import "./App.css";

const App = () => {
  const [prompt, setPrompt] = useState("");
  const [isWriting, setIsWriting] = useState(false);
  const [responses, setResponses] = useState([]);

  const handleSubmit = (e) => {
    const newPromp = prompt;
    e.preventDefault();
    setIsWriting(true);
    setPrompt("");
    axios
      .post("http://localhost:8080/chat", { prompt })
      .then((res) => {
        setResponses([...responses, newPromp, res.data]);
        setIsWriting(false);
      })

      .catch((err) => {
        setResponses([
          ...responses,
          newPromp,
          "Something went wrong wit the server try again please",
        ]);
        setIsWriting(false);
        console.error(err);
      });
  };

  return (
    <div>
      <div className="answer_container">
        {responses.map((response, index) => (
          <div
            key={index}
            className={
              index % 2 === 0
                ? "message chat-gpt-message"
                : "message my-message"
            }
          >
            {response}
          </div>
        ))}
      </div>

      {isWriting && (
        <div className="writing-message">
          <p className="writing-message-text">Chat GPT is Writing..</p>
          <div className="loader"></div>
        </div>
      )}

      <form onSubmit={handleSubmit} className="form">
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          className="message-box"
        />
        <button type="submit" className="button">
          Submit
        </button>
      </form>
    </div>
  );
};
export default App;

To successfully run our project we must first move to our server folder and use the command

nodeserver.js

How to run our server.js

To know that we have initialized and our server is configured correctly in another terminal we can run the following command:

curl -X POST -H "Content-Type: application/json" -d '{"prompt":"Hello, how are you doing today?"}' http://localhost:8080/chat

Testing our server

now we just have to start our react project to see it work

Functioanl Application

Our model is quite simple, we can train it to give us better answers. but this would be the first step to create a chatbot using ChatGPT+React.

As always the complete code can be found at:

GitHub - danilo95/Chatbot_using_react-ChatGPT: A Simple chabot using React+ChatGPT

If it has been useful to you, remember to leave your star.