ChatGPT Clone – OpenAI API and React Tutorial

Learn how to use React and the OpenAI API to create an application like ChatGPT. The application can answer our questions, convert the text into different languages, or even convert JavaScript code to Python.


✏️ Course developed by @CybernaticoByNishant

ChatGPT with React:
OpenAI with React:

⭐️ Contents ⭐️
⌨️ (0:00) Introduction
⌨️ (4:01) Importing configuration and api keys
⌨️ (11:27) Creating the input and button
⌨️ (16:09) How to create an image
⌨️ (23:32) Getting the api key from the console
⌨️ (28:48) Setting up the menu items
⌨️ (36:14) Hovering options in the options
⌨️ (41:03) Importing the translated component
⌨️ (48:47) Setting options in a file
⌨️ (53:30) Finishing main function

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

Learn to code for free and get a developer job:

Read hundreds of articles on programming:


This Post Has 30 Comments

  1. Estelle Brady

    I am very much new to this, so bare with me haha but first of all, do we know why at 1:49 why in line 1 for example that my useState would be blue, while his is red? Also, at 2:00 how does everything go from having a single quotation to a double quotation? Also, when he creates the .env file, I get a logo that has a gear, while his is something else. Do we know why this would happen? i also already have vs-code icons

  2. Mac Solutions

    Whenever I request for generating a new image i get 401 error. Can someone explain what is the problem.

  3. Karthikeyan RM

    Is this video still valid – as they have made a pro version ?

  4. mosqutio88

    Question: What's the best method to hide API keys with React + Vite?

  5. radu bradu

    Can we use AI to translate from whatever he's speaking to English? It would really help with the tutorial.

  6. Equious

    Great tutorial, really simple implementation, lots of fun to play with!

  7. Ihor V

    it seems that the world do mad about ChatGPT

  8. xrailgun

    do it with Bloom, say no to proprietary half measures.

  9. Tan

    I need a lot of practice🥴

  10. J M

    If open AI is so freaking intelligent it should already have my phone number and not ask for my personal information I'd like to try it but not at the cost of giving out my tracking device

  11. Durail Colvin

    How funny that I asked chatgpt how to make a clone of itself and it basically said "be smarter"

  12. Lennart Kerch

    Great video!!! Thanks for breaking it down !!!. These past few days watching my crypto portfolio decline is very disheartening.. Holding doesn't really profit much.. Any ideas on how to earn better on the short run?

  13. Nuclear Wife

    Does he really have that accent or he is just trolling us with that typical stereotype Indian accent. Awesome video as always! Thank you, Nishanth & FCC!

  14. Saarza

    Ah an Indian. The single most dominant race in a sector. Way to go 🥰🙏

  15. sacredgeometry

    So how to take the input of a text field and send it to an api then put that response into the dom?

    I mean thanks I guess. How to actually make a ChatGPT clone would be more interested if you explained how to actually make a chat gpt clone 😀

  16. Nimish

    getting a 400 error while clicking on the button

Leave a Reply