Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!

ChatGPT clone using the latest React JS and simple HTML and CSS. Built on top of Node JavaScript and Express, this will let you run your own instance of ChatGPT on your own PC!
⭐ New - Teach Me OpenAI Digital Book ⭐
enhanceui.gumroad.com/l/teach...
I've put together a easy to understand book with ~60 pages about OpenAI and GPT with how to get started to integrate it into projects, code examples, and much more!
Chat GPT Starter Kit:
enhanceui.gumroad.com/l/chatg...
OpenAI Template:
enhanceui.gumroad.com/l/chatg...
This video will cover how to code from scratch a Chat GPT interface for the frontend and a backend using Open AI latest package! It is a beginner-friendly tutorial for using the OpenAI API and working with models that are provided like DaVinci, ada, etc. You can build your own chatbot interface and this guide is also intended to help build the foundations to work with prompts and outputs from the chatgpt models.
00:00 - Introduction
00:12 - Coding ChatGPT preview
00:34 - OpenAI Template Starter Kit
00:57 - ChatGPT Starter Kit
01:22 - Initialising Project
02:47 - Starting Frontend with Create React App
03:03 - Designing ChatGPT Side menu
05:51 - Styling ChatGPT Side menu
12:34 - Designing Prompt Input
13:42 - Styling Chat GPT Input
18:52 - Coding Chatbot Interface
20:31 - Styling the Chat message interface
28:15 - Adding OpenAI SVG Logo
28:53 - Starting Backend with Express
29:54 - Preparing OpenAI Configuration and API Key
32:48 - Creating Express API Routes
34:03 - React Frontend handle Submit function
37:11 - Cleaning up the React Components
41:54 - Creating Frontend API Request using Fetch
47:17 - Frontend Backend integration
53:02 - Adding Features to Select OpenAI Models
01:02:02 - Conclusion
#chatgpt #ai #openai

[@Shammmmmmm]

I am no developer but I used this as a foundation to learn css and js. Perfect instructions and this so well thought out as far as matching everything to the ChatGPT UI. Well done.

[@markemerson98]

bravo - particularly appreciate your agile development process; specifically, how you begin with the UI layouts and then refactor into react components...

[@jamesradford4558]

Followed this through and loved every minute of it, now having so much fun playing with my own ChatGPT! Thank you for the content :)

[@anshvashisht8519]

hey congrats on completing, can you please share your source code?

[@abuxinegaming7600]

I was waiting for such ChatGPT React app. Thank you Adrian.

[@contractorwolf]

Absolutely the best. Appreciate your clear explanations and watching your coding process in real time. Subscribed.

[@alanhenderson1977]

Just bought the template - can't wait to try it. Thank you for your videos!

[@zaksorel]

is it worth it? i thought of buying it

[@germancadenatv]

Adrian, you are not only a great programmer/developer but also a superb instructor as well. It is very rare to find these two unique qualities working perfectly in one person at the same time. On top of that, the tone of your voice, tone, teaching style and professionalism makes it enjoyable to listen to you and pay attention to all details you share. Keep up the amazing job you are doing - you are the best from any angle in my opinion. Whatever your business or personal goals are, I have no doubt you will reach them. Your level of knowledge is solid and you share it in such an interesting and exquisite manner that it is quite enjoyable. I will keep an eye on how to move forward with this amazing technology is coming to all of us. Let´s hope our paths cross in the near future. Cheers!

[@haloworld1776]

3lf 0:04 ò

[@green_universe]

In the past, I have shied away from learning about AI, coding, or utilizing it, however, with the quick advancements in AI in recent times, I now feel the urge to educate myself in these areas, to not fall behind and to not miss out on a powerful resource that could greatly speed up my development as a software engineer. This changes today.

[@michaelb1099]

Love you and your step by step very precise and intuitive. I am very much a beginner and just learning but you are a great help but do have to replay lots to understand and comprehend what you mean in certain areas.

[@TheNeo2k]

I used ChatGPT to improve itself, essentially creating it into its own Alexa... Voice recognition and TTS responses... its so fun...

[@georgeallen77]

I would be interested in getting your speech code? Can you contact me please?

[@retrobehavior]

Would you please share your code and speech rec software choose. LET'S GROW TOGETHER

[@sultanhanga]

@@retrobehavior he is so selfish

[@vaibhavsinhbihola1]

Hello I want know how you can add this speech system I am only able to translate speech to text but can't able to put on it

[@errorgradov8050]

@@vaibhavsinhbihola1 hi bro,i think you should use 'vosk' library for python,it works offline and you can recognize speech :)

[@ernestj8000]

Excellent instruction and what a generous person to take the time to explain integration of this new and emerging technology with React! Thank you for making this content available!

[@Dinesh-nf1hg]

45:56 it's not returning the value can you correct that

[@yemanerussom9462]

You are the best instructor and you make it easy to understand. Keep up the good work.

[@RealLexable]

That's what we can call a real christmas present i guess! You deserve a subscription for sure.

[@TrentMcfarlane]

Just finished this. YOU ARE AN ABSOLUTE GEM. I cannot thank you enough for this. I learned a lot from this experience. Thank you :-D

[@sultanhanga]

Can anyone please provide me the code of java script from the minute 18:50 to 20: 35. I was suffering for 2 days just to get this right. The code is just too complex and I seem to not understand all this Nasted "Divs" which Is confusing me.

[@JohnSmith-ts2od]

@@sultanhanga Ask ChatGPT

[@amardeephazarika8537]

Someone please tell me why I am getting blank responses while interacting with my bot??

[@jonathanpratte8836]

A big thank you, I didn't do HTML, CSS, Java-script for 15 years and thanks to you, I have now replicated your app completely. I expose the Number of completion too.

[@lymarenko]

Adrian, thanks a lot for this video. I got great practice and cool experience in developing openai clients.

[@_slickyricky]

99 bucks much better staring price than 500. This is great specially for devs that already know what they are doing. So we can plug and play and be on our way. Ty for saving me the time.

[@ScarletEdge]

ChatGPT helped me design RPG system for my custom campaign in Cold War setting. It's absolutely brilliant as assistant. I can't praise it enough.

[@abenjamin13]

I greatly appreciate this tutorial and setup. Thank you very much. I built my first OpenAI project over the weekend with the help of JavaScript Mastery | Build and Deploy Your Own ChatGPT AI App in JavaScript | OpenAI, Machine Learning.

[@hedgefund996]

Wow this is great Content, Thanks and will be supporting shortly.

[@1Chitus]

You are a master on ChatGPT Adrian and as a React dev, this is perfect for me

[@twarogchat___my__Teleqram_id]

ꜰᴇᴇᴅʙᴀᴄᴋ ᴀᴘᴘʀᴇᴄɪᴀᴛᴇᴅ 👍. ᴇɴᴅᴇᴀᴠᴏᴜʀ ᴛᴏ ꜱᴇɴᴅ ᴀ ᴅᴍ ɪꜰ ʏᴏᴜ ɴᴇᴇᴅ ʜᴇʟᴘ/ꜱᴜᴘᴘᴏʀᴛ ᴀᴛ ᴀɴʏᴛɪᴍᴇ.

[@robert301990]

I bought it for support, but will for sure use it very soon!

[@dylan_curious]

The video shows how to create an app using React and how to use it with chat GPT. The speaker installs create-react-app and creates a client and server folder. She then goes on to customize the app's look and style, including creating a side menu and main section, changing the background color, and adding padding. She also explains how to use chat GPT in business and work, such as scanning through resumes, writing a cover letter for a developer, and asking chat GPT to write any type of code. Overall, the video provides a useful guide for those interested in building an app with chat GPT.

[@SakuYozakura]

This is amazing man. exactly what I needed for my first saas project

[@ashleybasson5664]

Brilliant! 👌🏾👏🏾 You’re the man! 💪🏾😎

[@mcgyverbasaya6748]

chatGPT is awesome. I'm impressed. hopefully they will fix the overloaded request of their server soon as possible because I'm so excited to explore this smart chatbot.

[@aastro87]

Thank you for the informative video on chat GPT.

[@syedusmanhassan]

Thanks for uploading here

[@uminhtetoo]

Thank you so much for sharing, Adrian.

[@JohnSmith-ts2od]

Wow! you are such a good teacher! Thank you so much :)) Will follow :))

[@shahbazahmadsiddiqui]

Adrian you are simply awesome... loved the video...!!!

[@CodingExpress]

Now I can see what you've been working on for the past 2 weeks!

[@gustavosmoiras1750]

Thank you for sharing, I will try to do this when I get some money. This really made my day. I am an entrepreneur I am going to make my own brand. When I make some money, I will share some with you for this priceless knowledge

[@seyittumturk3769]

Thank you for your time.

[@EventcentrAl]

Thanks. Purchased previous, an I-ill purchase this template.

[@moulics]

Awesome I loved every minute of the video

[@leandroadagbe]

No word, you are the best

[@rocaivan]

Great work. Thanks

[@tonywatters_uisce]

Hello Adrian, I just wanted to say that I really enjoyed your video and found your explanations to be clear and helpful. It took me a whole day to finish, but I finally managed to do so. I was curious to know what your paid videos cover in terms of the next steps in the process? Do they build on what we covered in this video or will they cover different topics? Thanks Tony

[@raphaeljaggerd3585]

Dude thank you so much for the amazing content. You are awesome. If i ever make money with this and get out of my current situation i will owe it all to you.🙏

[@AdrianTwarog]

Yay!!! I hope you and many others do!!

[@RavNivara]

@@AdrianTwarog any way to grant it access to the internet?

[@mrcosta6963]

​@@AdrianTwarog Hi Adrian, I purchased your ChatGPT Starter Kit but don´t know how to install this and use it on my Windows PC. Any video or guide about this, please?

[@shivamshrivastava6530]

​@@AdrianTwarog which vs code theme you use?

[@pradeeppawar3622]

Thank you sir for making this video Superb 🔥🔥

[@AdrianTwarog]

Exactly what I wanted to hear!

[@JodyLeeSchroeder]

dude , you are a legend

[@charleskofibuckman3327]

Great stuff, thank you!!!

[@cryptonicity]

Thanks for the video! What is the difference between the 2 starter kits you offer?

[@bmouhammou7201]

Thank you for this information

[@TJYouToob]

Well done! Thanks!

[@nagaprasadts]

You made my resume filled with interesting projects 😃☺️🤔🙂😉😜

[@AdrianTwarog]

nice!

[@Oriciel]

Thank you for this video.

[@dukedadson774]

Amazing…this is Gold

[@AdrianTwarog]

The way it should be!

[@LuKeBf]

just finished the tutorial! super exciting, can't wait for the next ones 🤩

[@AdrianTwarog]

The real question is, what should I do next?!

[@RealLexable]

Did you noticed the bug at 55:50 in the video as well or haven't you tried to restart it yet to see that the list disappears again :D

[@mythored8054]

@@AdrianTwarog react native app

[@Michael_AI]

@Adrian Twarog Course on how to integrate any type of authentication and payment system to this app?

[@camfuinrules]

@@AdrianTwarog how hard would it be to take this set up and implament it for discord usage? im thinking about picking up what you have made for the gpt but if you make something that is like this but taylored to be personal use with a discord bot plugin so i could have it in my discord server and potentially allow a friend to use it aswell.. that would be awesome.. ide pay . take my money :P lol. setting up discord bots on the developer portal is something easey enough for the common noob to learn so im sure others would be interested in that to.

[@NickWindham]

Very good idea!

[@boot5672]

this is so friggin cool

[@bitmammothOG]

lol I couldn't get my messages to output from the response to the ui correctly so I just put this code in chatgpt and asked what I did wrong... boom now it works and it improved some of the processes

[@aharef]

This is really helpful. Thanks

[@aharef]

For anyone stuck when "data.models.data" or comes up: It's "data.models" by now.

[@fitly7080]

This is Amazing!

[@RavNivara]

must be able to grant it access and privilege to the internet

[@SonnySangha]

Hmmm… the title looks awfully familiar 😅 On the level though - Awesome job with this build Adrian keep it up💯

[@AdrianTwarog]

Make enough videos, and you end up making every title alive, also great content on your own stuff!

[@davehug]

I appreciate this because all of char GPT's responses are specifically geared toward officially santioned and rubber stamped information which as we all know has shown to be unreliable at best.

[@AdrianTwarog]

yep, your model will behave how you train it!

[@timobrien4190]

At first I didn't understand why you were passing the entire log of messages instead of the input, but then when you did the steve jobs example I remembered we were building a clone of chatgpt that remembers what you have passed before LOL thanks for this video.😃

[@TheNicoanthony]

Thanks so much Adrian! this has been a great project for a beginner. I was just wondering if there was an error somewhere in my code because the 'gpt' response is limited in characters and seems to always be cut off. also, once I've asked enough questions that the log gets down to the 'chat input holder' it gets cut off and can't read the responses. How do I fix these issues please?

[@harmatodlamstel6435]

SOMEBODY SPONSER THIS MAN

[@czar1703]

Adrian, thank you very much for the video! Very insightful and excellent delivery. Will you be providing updated versions of the kits that are on offer right now?

[@philosophyindepth.3696]

You earned a subscriber

[@acinomletap1]

Thank you, super helpful and thus need for humans always.

[@aakashsonics]

would this project include frontend backend and a database?

[@uchieunguyen8026]

Fantastic video! What extention are you using to generate code by comment in VS Code?

[@mike.czarnota]

That's so impressive... I have one question though, in 48:00 - why are trying to `await setWhateverState()`? State setters are always sync

[@flippinginnovations]

Thank you for the demonstration. I am looking for a plug-and-play for I am not a coder. Could you let me know if your template provides everything you have shown? For example the chat is placed at the bottom?

[@drychicken509]

This was a big help to me, what theme are you using for VSCode?

[@georgeallen77]

Great job on the video, Adrian. FYI, your buy button is not working, or its very slow?

[@FloodGold]

This is so funny and scary at the same time because I'm working on a similar project in a different framework haha

[@itjourney-novicetoexpert6121]

Other framework like programming language or things that are added on like what React is to JS? I'm really stepping outside my lane right now. At best I know some Python.

[@john_blues]

Thanks for the video. Does the hosted version still have the character limits? Currently it only outputs a limited amount of characters.

[@yorinis]

Thanks for tutorial ! Just a question : Why not use only React JS to catch the response into const and display it ? What is the point of Node server ?

[@thefinancialmuppet5552]

hey boss thanks alot for this, will this write code exacly like the chat.openai does? i mean inside the black background and stuff? thanks

[@bbstriker]

Thank you for your well produced and well presented videos. Could you please relist the the links to the ready adequate GPT templates you mentioned in your video? Thank you

[@jacoblarsson4456]

Hello Adrian! Amazing video and amazing template. I just bought the template and I would like to know how to implement stripe with this because I can't seem to figure it out. Much appreciated if you could make a separate video of that!

[@shibmobileverse468]

ROFL

[@siywl_classics]

You are perfect. Just wondering how do I make the model remember past conversations?

[@Lotpite]

Nice) but I have a question: how to show appropriate the code examples provided by AI in chat flow? It appears as simple text

[@Kumawatlalit912]

it would be very helpful if you could provide the github link for the code, as a beginner i have to understand things how they are working ,and that github code will help in some references, I love your videos,they tach me a lot💖💖💖💖

[@matthew_brown]

Is it possible to save the chats in the left column like the latest ChatGPT does? That is actually very useful when you want or need to refer back to a previous conversation. I actually purchased this and your other Starter Template.

[@bongimusprime7981]

@matthew very curious in this too

[@atanupaul489]

The openai API is not for free to use. It's need to use a billing account to get responses form API. Is there any way to get the API for free ??

[@KevHnh]

Great video! I have one question though. Is it optimal to send the entire chatlog to the API or would just the most recent input suffice?

[@cband8030]

The api wouldn’t have reference to your questions and answers previously submitted.

[@ILAN12346]

I made the same thing. Thanks for the model list thing. Add memory about 1000 tokens should be finde. I added longterm memory for persons and so on. With this you can set an baseline like an Charakter of the ki you interact with.

[@AdrianTwarog]

Nice work!

[@bongimusprime7981]

Mind sharing how did you add a long term memory to this? :)

[@RubenDax]

I'm interested in how you are implementing memory. Feeding the full chat history back into the prompt prefix seems like the simplest solution but it would quickly eat up lots of tokens.

[@LOVEGODFM]

Wonderful and God bless you

[@parinsheth4971]

Amazing Learning Session! I would be grateful if you deploy the app so we can share it elsewhere. Kindly create a follow up tutorial to this video sir! Ty

[@augustoocchiuzzi5722]

Hi there! Thanks so much for this video. I did the code in my pc and it’s working great. The thing is that when I send multiple questions (15/20 questions), the token exceeds its 4.000 limit and the server cuts off. How can we do to make it work after many questions?

[@nurhakkeles7633]

Mr. Adrian, which plugins did you use in the program?

[@apricotcomputers3943]

I'm buying!!

[@ahmadbaba3260]

I appreciate the clear explanation in the video, but I'm having trouble purchasing the code because my location is not accepted "Sorry, this item is not available in your location.". I tried using a VPN, but it ended up costing me more due to taxes for using a different country's server. Could you help please?

[@ashishmundra]

Hi Adrian, thanks for the video. Does the chat viewer also can show code e.g. if I ask question to ChatGPT on give me a code to add 2 numbers, can this viewer that we have now show that source code and allow to copy code? Thanks.

[@WiredWisdom524]

Thanks

[@AdrianTwarog]

Very much appreciated :) thank you

[@bmouhammou7201]

you can create a video haw can i use an AI tool that generates social media posts for my app users. How do we incorporate your tools in our mobile app rather than building a completely separate functional website for it

[@alanfleming8474]

This was the first thing I thought of when I 1st found gpt but I'm in mi 50s and know where near tech savvy, next to you Adrian I look like a stone age man lol. So basically I can build my own website for my drone business and make me an app?

[@josephross927]

Having spent the past few days working on a similiar project, would love to see the code.. I believe you aren't really "ChatGpt'ing". A good test would be to ask it to write hello world in java and make your next prompt "how about python". That shows the context spans across individual Completions.prompts. To do this currently you need to basically add the context for your previous prompts to the prompt to davici-3 or wait for them to publicly release their "Chat" api instead of the Completions api

[@andresletelier]

Adrian, thank you very much. I bought the starter kit and have issues running the client(it rans, but there are exception). I sent you an email, thank you again.

[@Funnyplanet818]

i was wondering, is this method can be use also for making ai prompt art? using chat box?

[@VladBatalin]

hey, Adrian what is this extension that you use to write faster code?

[@johelpastorino8845]

Is possible to add custom prompts for specific topics?

[@YasinNabi]

The easiest way to succeed in any field is to work on it consistantly, and consistancy is the key to success. I experienced my self. By the way, thanks for the uploads , a fellow creator

[@OkatuLegends]

best video

[@dapperdan567]

8:54 here is the code html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *::before, *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

[@AdrianTwarog]

Damn that's what I was looking for!