Building: Explain to a 5 year old with Chatgpt+React.js

Prerequisites

Novice knowledge of React, Css and Jsx.

What are we cooking?

We are building a search tool powered by chatgpt turbo 3.5.
The main feature of this tool is to get lucid explanation for any complex questions asked to the bot as if it is explaining it to a 5 year old!
Do not believe me?, click on the link below.

Final product (v1) : https://aaleen110.github.io/ExplainTo5yOld/

Just getting started

Create a new react project with the following command
npx create-react-app your-app-name
cd your-app-name
npm start

You will see the template react page running on localhost:3000. Once your project is up and running, you may clean unnecessary boilerplate files for this project. Goal is to keep our project uncomplicated hierarchically.

The project structure is simple and self explanatory, you can view, copy or clone the complete code anytime from https://github.com/Aaleen110/ExplainTo5yOld

Diving into the code

The code can be divided into two parts,
i.) UI/UX
ii.) Getting chatgpt API keys.
iii.) Functional logic to call chatgpt apis

I.) UI /UX
The user interface is fairly simple, it constitutes of many alluring svgs, an input box with button to write our query, and a div to display the procured answers. All can be found at src/App.js. The page is mobile friendly, thanks to media-queries, you may refer to complete css at src/App.css.

II.) Getting chatgpt API keys.

• First you need to open https://platform.openai.com/
• Login or signup if you do not have an account yet.
• Once logged in, select your account from top right corner of the screen
• Tap View API keys
• On the new screen, press +create new secret key
• A modal will popup to create new key, enter a name of key (could be anything like ‘my_key’). You will then see your api key on the screen, make sure to copy that key as we will be needing it call Chatgpt services.

III.) Functional logic to call Chatgpt services.

Firstly declare the APIKEY we copied from platform.openai.com in App.js

const API_KEY="xyzxyzYOUR_API_KEYxyzxyz"

The user will write their queries inside the input box, and hit the search button. The search button will call askQuestion function, which has the logic to call chatgpt services. We are using axios in this tutorial, you may use fetch if you want.

async function askQuestion() {
    if (query.length) {
      try {
        setLoading(true)
        const headers = {
          "Authorization": "Bearer " + API_KEY,
          "Content-Type": "application/json"
        }

        const apiMessages = [{ "role": "user", "content": `Explain to a five year old, what is ${query}` }]

        const apiRequestBody = {
          "model": "gpt-3.5-turbo",
          "messages": [...apiMessages]
        }

        const response = await axios.post('https://api.openai.com/v1/chat/completions', JSON.stringify(apiRequestBody), {
          headers: headers
        })
        if (response && response.data.choices.length) {
          let answer = response.data?.choices[0]?.message?.content;
          setAnswer(answer)
          setAnswerTitle(query)
          setLoading(false)
        } else {
          alert('Something went wrong!')
          setLoading(false)
        }

      } catch (error) {
        alert('Something went wrong');
        setLoading(false)
      }
    }
  }

The above code is a simple HTTP POST request made using axios. We shall be fetching response using url: https://api.openai.com/v1/chat/completions
Your API-API_KEY goes inside Authorization in headers.
The body consist of an object which has 2 key value pairs, the model which we are using (in our case it is gpt-3.5-turbo) and the messages array.
We are appending “Explain to a 5 year old” to all our queries, that is our little secret of tweaking chatgpt to answer as if it is explaining to a 5 year old.

When you clone the project, you may find two source files, App.js and _App.js
In App.js, I am fetching my api key with the help of a small node server i created on https://render.com/ (as api keys need to be kept private)
Whilst in _App.js you just need to replace the ENTER_YOUR_API_KEY with your openai api key and run the project. Hence in order to avoid any confusions and complexities, you may refer to_App.js, which is the simplified way of calling chatgpt services.

Final Note

You can see live demo of the project anytime at https://aaleen110.github.io/ExplainTo5yOld/
Also you can clone the code from my github repository (You may star the repo if you liked it)
https://github.com/Aaleen110/ExplainTo5yOld
I have tried my level best to keep the code as simple as possible so that even a newbie in React should understand what is cooking and be able to build a cool searching tool and highlight it in their portfolio :)
Toodles!