Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!
HTML-код
- Опубликовано: 6 июн 2024
- 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 
Наука
Followed this through and loved every minute of it, now having so much fun playing with my own ChatGPT! Thank you for the content :)
hey congrats on completing, can you please share your source code?
I was waiting for such ChatGPT React app. Thank you Adrian.
Just bought the template - can't wait to try it. Thank you for your videos!
is it worth it? i thought of buying it
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.
Absolutely the best. Appreciate your clear explanations and watching your coding process in real time. Subscribed.
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!
45:56 it's not returning the value can you correct that
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
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.
@@sultanhanga Ask ChatGPT
Someone please tell me why I am getting blank responses while interacting with my bot??
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!
3lf 0:04 ò
That's what we can call a real christmas present i guess! You deserve a subscription for sure.
bravo - particularly appreciate your agile development process; specifically, how you begin with the UI layouts and then refactor into react components...
You are the best instructor and you make it easy to understand. Keep up the good work.
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.
I used ChatGPT to improve itself, essentially creating it into its own Alexa... Voice recognition and TTS responses... its so fun...
I would be interested in getting your speech code? Can you contact me please?
Would you please share your code and speech rec software choose. LET'S GROW TOGETHER
@@retrobehavior he is so selfish
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
@@vaibhavsinhbihola1 hi bro,i think you should use 'vosk' library for python,it works offline and you can recognize speech :)
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.
You are a master on ChatGPT Adrian and as a React dev, this is perfect for me
ꜰᴇᴇᴅʙᴀᴄᴋ ᴀᴘᴘʀᴇᴄɪᴀᴛᴇᴅ 👍. ᴇɴᴅᴇᴀᴠᴏᴜʀ ᴛᴏ ꜱᴇɴᴅ ᴀ ᴅᴍ ɪꜰ ʏᴏᴜ ɴᴇᴇᴅ ʜᴇʟᴘ/ꜱᴜᴘᴘᴏʀᴛ ᴀᴛ ᴀɴʏᴛɪᴍᴇ.
Wow this is great Content, Thanks and will be supporting shortly.
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.
Adrian, thanks a lot for this video.
I got great practice and cool experience in developing openai clients.
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.
Adrian you are simply awesome... loved the video...!!!
This is amazing man. exactly what I needed for my first saas project
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.
Brilliant! 👌🏾👏🏾 You’re the man! 💪🏾😎
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.
Wow! you are such a good teacher! Thank you so much :)) Will follow :))
Awesome I loved every minute of the video
I bought it for support, but will for sure use it very soon!
You made my resume filled with interesting projects 😃☺️🤔🙂😉😜
nice!
Thank you so much for sharing, Adrian.
Thank you for the informative video on chat GPT.
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.🙏
Yay!!! I hope you and many others do!!
@@AdrianTwarog any way to grant it access to the internet?
@@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?
@@AdrianTwarog which vs code theme you use?
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
Thanks for uploading here
Thank you sir for making this video
Superb 🔥🔥
Exactly what I wanted to hear!
Great work. Thanks
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.
Thank you for this video.
Now I can see what you've been working on for the past 2 weeks!
Great stuff, thank you!!!
Thanks. Purchased previous, an I-ill purchase this template.
Thanks for the video! What is the difference between the 2 starter kits you offer?
Very good idea!
Amazing…this is Gold
The way it should be!
No word, you are the best
Well done! Thanks!
This is really helpful. Thanks
For anyone stuck when "data.models.data" or comes up: It's "data.models" by now.
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.
Thank you for this information
Thank you for your time.
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
dude , you are a legend
This is Amazing!
must be able to grant it access and privilege to the internet
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?
this is so friggin cool
You earned a subscriber
SOMEBODY SPONSER THIS MAN
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
just finished the tutorial! super exciting, can't wait for the next ones 🤩
The real question is, what should I do next?!
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
@@AdrianTwarog react native app
@Adrian Twarog Course on how to integrate any type of authentication and payment system to this app?
@@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.
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
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.
yep, your model will behave how you train it!
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?
I have a question. Maybe one of the projects you are selling can help me with this but it isn't clear to me. I'd like to run chatGPT locally and feed it somewhat large json data sets and then converse with chatGPT to help me find insights in the data. Which I try doing this on openai's site I have to paste a very very small portion of the data which isn't very useful other than proof of concept.
Does using the API allow me to "send" larger datasets to the chatbot? If not, is it feasible to run chatGPT or a variant of it local to my machine (in otherwords no API) and train my own local bot?
Again, if one of your products solves for this I'd be very interested. Thanks!
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.😃
That's so impressive...
I have one question though, in 48:00 - why are trying to `await setWhateverState()`? State setters are always sync
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 ?
Thank you, super helpful and thus need for humans always.
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?
Great job on the video, Adrian. FYI, your buy button is not working, or its very slow?
Nice) but I have a question: how to show appropriate the code examples provided by AI in chat flow? It appears as simple text
Fantastic video! What extention are you using to generate code by comment in VS Code?
Thanks for the video. Does the hosted version still have the character limits? Currently it only outputs a limited amount of characters.
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.
@matthew very curious in this too
This is so funny and scary at the same time because I'm working on a similar project in a different framework haha
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.
Hmmm… the title looks awfully familiar 😅
On the level though - Awesome job with this build Adrian keep it up💯
Make enough videos, and you end up making every title alive, also great content on your own stuff!
This was a big help to me, what theme are you using for VSCode?
Mr. Adrian, which plugins did you use in the program?
hey, Adrian what is this extension that you use to write faster code?
i was wondering, is this method can be use also for making ai prompt art? using chat box?
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?
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?
The api wouldn’t have reference to your questions and answers previously submitted.
How do we contact you if we are having a problem with the templates we purchased? When I get on and type something simple the screen the only thing that shows up is what I type and not the green icon. Also my dropdown menus are empty.
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💖💖💖💖
I'm buying!!
What will happen when you will finish the 4000 tokens limit? I think in that way the chat cannot be long enought. Or i'm missing something?
Yes, there's a limit for the length of your requests
Can someone explain why things are out of order at 49:59? Why do we need to assign a new variable chatLogNew instead of using setState for chatLog directly?
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?
Newbie programmer question, I've made it to 32:51 where the code is auto completing for Adrian. On lines 26 and 30 I am stumped trying to recreate the symbol that looks like => and I think I may be over complicating things or something. Any help would be greatly appreciated.
You are perfect. Just wondering how do I make the model remember past conversations?
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.
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!
ROFL
Hey there, so, I purchased the template, and when I kick it up after installing the npm packages, I am able to get into the site. However, the chat doesn't respond to anything! Any ideas to troubleshoot?
does it keep the chat context, when asked a follow up question?
Why did you use express instead of a full-stack react framework that already has API integration like Next or Blitz?
@Adrian Twarog 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?
Hey does this need a lot of modification to implement the new chatgpt 3.5 model api?
Is possible to add custom prompts for specific topics?
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
Wonderful and God bless you
Do we have to buy the APi for using chat gpt in our own projects?
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 ??