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.
OpenAI API: beta.openai.com/
✏️ Course developed by @CybernaticoByNishant
ChatGPT with React: github.com/nishant-666/ChatGP...
OpenAI with React: github.com/nishant-666/Dall-E...
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@darren9678]

Thank you for posting such helpful content as always 💗

[@equious8413]

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

[@codewithguillaume]

Woooow! Thank you so much for this video. I'll start right away !

[@ifstatementifstatement2704]

I had that idea as well: ask chatGPT to program a chatGPT clone.

[@abenjamin13]

Thank you 🙏 for posting this.

[@CGMiVideos]

Very insightful. Weldone 👏👏👏

[@nocopyrightgameplaystockvi231]

The guy is super chilled. 🔥

[@yoshikagarner6655]

Very helpful! Thank you so very much!!! :)

[@tarun7027]

Thank you for sharing❤️

[@amarisali4458]

Was waiting for FCC to put light on Chat GPT too and boom here it is !

[@BeGhosting]

Every “coder” is going to look at this video and say they made an AI tool 😂

[@gulabchandgupta5486]

Hahaha😂😂😂😂

[@tjr2152]

Who cares?

[@superduper6090]

@@tjr2152 me

[@Enjoyablewalks]

😂😂😂😂😂

[@soraregareth]

Still better than them not attempting to code at all though right? Everyone starts somewhere.

[@RAHULSHARMA-if4fs]

Great work

[@bubblelaber4909]

This is love ♥️

[@neelampallinaveen7610]

It will will helpful like who are interested with angular

[@user-dj6cm1cf6c]

Thank you!

[@nocopyrightgameplaystockvi231]

I already tried the Image creator using Kivy. Worked really nice but sadly wasn't able to port it to Android 🌚.

[@samiulhuda]

Eagerly waiting to see a clone with Django

[@siphokazee]

This is super coool😊

[@simraankhatib2693]

Thank you.

[@actionkey8042]

AWESOME

[@kevinwikram1245]

Good work

[@eurob12]

Very cool

[@JeremyRefoia]

super

[@snowcatman]

Would be nice to have a non proprietary example close to gpt-3 as possible. For offline personal use. On your own pc machine on your own network. would love to see a video on that!

[@shashankbhatnagar22]

you can't use something like chat gpt3 offline

[@denizorsel1029]

@@shashankbhatnagar22 Is that really the case though? I can locally use stable diffusion for instance with no external services required.

[@shashankbhatnagar22]

@@denizorsel1029 my sensibilities say that gpt must be using the internet to pull out information and process it through NLP and deliver the output. It'll be crazy for it to have this much of data locally Stored somewhere. Stable diffusion can work like a regular software because it has limited output. That's what I think.

[@user-wc1sm8cj8s]

@@shashankbhatnagar22 agree to you dude, besides, that kind of AI requires tremendous amount of computing power, which an average home computer may not be capable of.

[@jefflynch]

@@shashankbhatnagar22 I believe the model takes up "only" around 100GB (it was of course trained on much more data, but it is reduced to essentially an algorithm), so it would be possible to host locally. Processing power is another story.

[@lawrencemathew3410]

Nice

[@AmericanDragon134]

This is fng amazing tutorial

[@Colvin.crochet]

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

[@estellebrady4383]

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

[@MrIbadanBoy]

I totally understand you. You don't have to worry about those.. Try to follow him exactly as he did, and you'll be fine. The points you raised differ, sometimes because you might be using a different OS so the icons and colors of the code may look different. You know you have an error when the Parr of the code shows a red line underneath or you simply get an error notification when you try to run it.. A proper look at the code and a few google searches on the error it shows will help improve your understanding.. Cheers!

[@TechnoSavant]

I also do it very super

[@carterzeng5756]

Thanks for youtube CC to let me know what hes talking. Good tutorial anyway.

[@makoado6010]

haha... did u check the open-ai how much money want for the ai tokens?

[@kevinlucas9905]

Yeeeeeeeaaaaaahhhhh!!!!!!

[@BeGhosting]

damn bro

[@dimauasername]

How to disable Generate button while we’re waiting for picture? 19:50

[@Sports-Made]

This is cheaper than Chat gpt plus?

[@mahendranath2504]

Thank you so much ❤🫡👌👍👋👏🥳🤝🙏🏻🎊🎉🫰🏻😊

[@PoojaSinha-ir3rw]

This code work on wix ?

[@ulamss5]

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

[@Daniel-qo9uv]

59:29 French translation have a missing word, what ChatGPT wrote: Quels sont les chambers que vous avez disposables. The correct version: Quels sont les chambers que vous avez __DE__ disposables.

[@smartcat5989]

which languages are used in this video

[@superduper6090]

react js, a library/framework for javascript

[@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 :D

[@GhostsOfSparta]

Same thing in the video can be achieved by asking ChatGPT "write react code to use chat gpt api" They took our jobs!

[@sacredgeometry]

@@GhostsOfSparta I mean yeah because its something that most developers could do in their sleep. Its not really an engineering task its a third party API consumption task with a basic UI thrown into the mix. If this is all you do in your job then maybe your job doesnt need to exist :D

[@superduper6090]

@@sacredgeometry you have no idea at all how hard it is to make an actual ai that has the same level of power that chatgpt does. If you actually thought it could be made in react, then maybe you should get better at developing and then comment on whether other peoples jobs are needed or not.

[@sacredgeometry]

@@superduper6090 I actually do I am a software engineer and have written neural nets (from scratch) and trained language models albeit not ARs. If I had the time, budget and inclination I could make one. You know that react has nothing to do with that side of things right? So what makes you think anyone else thinks that? But ChatGPT has a front end which react could handle. What cloning means is copying something. We are not copying ChatGPT we are literally just using its api. Thats the contention here and if you are too stupid to understand that you are for sure too stupid for me to want to continue a conversation with.

[@superduper6090]

@@sacredgeometry Yes, I know that react has nothing to do with it, but why did you come here expecting to see it if you saw react in the title? its obvious that hes not going to show us how to create an actual gpt clone. And I really doubt you could actually make anything as good as chatgpt on your own, of course given an unlimited budget anything is possible but otherwise I really doubt it.

[@neelampallinaveen7610]

Sir can you plz do with angular

[@superduper6090]

You should try and do it in angular, im sure it would be a fun project

[@rubenverster250]

Dude... I can probably do this in Angular and I don't know Angular... RTFM

[@codesoon9668]

20:00 what a screamer

[@johnathan4185]

dont use my API key had me rolling xD

[@PoliticalPanic]

So now we have two chatgpts.

[@elgustavo8117]

What is the name of the color theme?

[@_rtdp_]

I think it's one dark pro darker... I use this theme also...

[@elgustavo8117]

@@_rtdp_ Thanks 👍

[@karthikeyanrm3446]

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

[@macsolutions]

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

[@nomadybb1-66er7]

me too

[@infotration2225]

Really

[@mosqutio88]

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

[@zechariahhounwanou8462]

in the .env file created in the root directory of your project

[@rudy9546]

@@zechariahhounwanou8462 Mine wouldn't find the .env variable . I just set it in the app.jsx is this a bad idea ?

[@danieltian3422]

@@rudy9546 In general it's bad practice to hard code credentials in code because some one can take it and abuse it where you'd have to pay for usage that you aren't using.

[@tan8067]

I need a lot of practice🥴

[@laura9306]

Please note you will not be able to use openai without setting up a billing plan.

[@sharmarajat]

what about chatgpt server down everytime

[@elonfc]

Lol Andrej karpathy created the same tutorial yesterday

[@elonfc]

@@hyperadapted yes

[@filynz]

Wow, please can I have the full source code? I will appreciate if you can let me have it

[@superduper6090]

make your own or follow along

[@prashants5071]

I think github links are in the description

[@iamnimish]

getting a 400 error while clicking on the button

[@iamnimish]

what to do.. anyone ?

[@johnkim7783]

@@iamnimish I was able to resolve it by replacing env variable to an api variable

[@Jmfufghf]

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

[@superduper6090]

you could try using google voice, but then of course youd have to trust google with your data

[@Jmfufghf]

@@superduper6090 I tried and voip numbers are blocked 🤬

[@superduper6090]

@@Jmfufghf so just sign up with your real number and it should work

[@superduper6090]

@@Jmfufghf or you could also try just buying a cheap burner phone specifically for these cases

[@LazaroAlejo]

7:36 Let me see if I know how to write the word generate, I don’t care the whole world see I stumbled in a single English word, my language (coding) is not from this world, I’m in the future 🔥🔥🔥

[@developerjavalinux]

Hummm🤔

[@CRYPTODUNIA.]

IS THAT API FREE OR PAID?

[@lontongwho]

free until usage reached $18

[@radubradu]

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

[@NahidNouhan]

Ok finally my first comment!

[@abdirashiidwiif]

💀✌

[@saarza9991]

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

[@Catge]

Most dominant in using the street as a bathroom

[@drood78]

Who else is going to run the scam centers.

[@ritiksingh1445]

​@@drood78U mean who is going to lead Google😈? 🇮🇳🇮🇳

[@ritiksingh1445]

​@@CatgeYeah That's why 60% of doctors across world are indians. And btw that gmail account that u r using rn the ceo of that google is a Indian so think twice before writing anything stupid😑😑

[@Catge]

@@ritiksingh1445 okay Bangladesh > India

[@ihorv44]

it seems that the world do mad about ChatGPT

[@erwinmatys]

Just tell chatgpt to write a chatgpt clone

[@BeGhosting]

i am first

[@m.fatihyldz8159]

"make a clone of chatgpt by using react" enter

[@theelofiguy]

1:10

[@eotikurac]

beautiful accent ¬___¬

[@NikhilKumar-wh9gi]

1st person to comment 🥳

[@AdnanArch]

1st comment 😁😁 and thanks to freecodecamp for provide such kind of great content to learn. ❤

[@matbeedotcom]

Bruh you need a new voice over

[@kevinmehta5264]

First

[@thiagoleobons390]

this is not even close to a ChatGPT CLONE. Wheres the sidebar?

[@caw5v]

There is absolutely no reason to use react here lol

[@yasmeenm6435]

What would you use instead

[@BABABAKLOL]

Bhai india se h kya hindi me bol

[@Robytsu]

What a mess this tutorial was...

[@rupenedu]

dont waste your time here this is really broing and this not really work .

[@AlbertoVasquezOspina]

That's the reason because i love FreeCodeCamps. 😍😍

[@RAHULSHARMA-if4fs]

Great work

[@user-dj6cm1cf6c]

Thank you!