Let's Build ChatGPT 2.0 with React JS and OpenAI on your PC!
Vložit
- čas přidán 28. 06. 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 - Věda a technologie
I was waiting for such ChatGPT React app. Thank you Adrian.
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 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 :)
Just bought the template - can't wait to try it. Thank you for your videos!
is it worth it? i thought of buying it
Absolutely the best. Appreciate your clear explanations and watching your coding process in real time. Subscribed.
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.
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...
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
Wow this is great Content, Thanks and will be supporting shortly.
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.
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??
You are the best instructor and you make it easy to understand. Keep up the good work.
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.
You are a master on ChatGPT Adrian and as a React dev, this is perfect for me
ꜰᴇᴇᴅʙᴀᴄᴋ ᴀᴘᴘʀᴇᴄɪᴀᴛᴇᴅ 👍. ᴇɴᴅᴇᴀᴠᴏᴜʀ ᴛᴏ ꜱᴇɴᴅ ᴀ ᴅᴍ ɪꜰ ʏᴏᴜ ɴᴇᴇᴅ ʜᴇʟᴘ/ꜱᴜᴘᴘᴏʀᴛ ᴀᴛ ᴀɴʏᴛɪᴍᴇ.
Adrian, thanks a lot for this video.
I got great practice and cool experience in developing openai clients.
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.
This is amazing man. exactly what I needed for my first saas project
Adrian you are simply awesome... loved the video...!!!
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.
I bought it for support, but will for sure use it very soon!
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.
Great work. Thanks
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.
Brilliant! 👌🏾👏🏾 You’re the man! 💪🏾😎
Thanks for uploading here
Awesome I loved every minute of the video
Wow! you are such a good teacher! Thank you so much :)) Will follow :))
Great stuff, thank you!!!
Thank you so much for sharing, Adrian.
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.
Very good idea!
Well done! Thanks!
Thank you for the informative video on chat GPT.
Thank you for this video.
Thanks. Purchased previous, an I-ill purchase this template.
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.
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
You made my resume filled with interesting projects 😃☺️🤔🙂😉😜
nice!
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?
No word, you are the best
Thanks for the video! What is the difference between the 2 starter kits you offer?
This is really helpful. Thanks
For anyone stuck when "data.models.data" or comes up: It's "data.models" by now.
Amazing…this is Gold
The way it should be!
Thank you for this information
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!
Thank you sir for making this video
Superb 🔥🔥
Exactly what I wanted to hear!
Now I can see what you've been working on for the past 2 weeks!
Thank you for your time.
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
dude , you are a legend
This is Amazing!
must be able to grant it access and privilege to the internet
this is so friggin cool
You earned a subscriber
Great job on the video, Adrian. FYI, your buy button is not working, or its very slow?
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?
SOMEBODY SPONSER THIS MAN
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?
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
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?
Fantastic video! What extention are you using to generate code by comment in VS Code?
This was a big help to me, what theme are you using for VSCode?
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
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
You are perfect. Just wondering how do I make the model remember past conversations?
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
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 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 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
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.
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 the video. Does the hosted version still have the character limits? Currently it only outputs a limited amount of characters.
Thank you, super helpful and thus need for humans always.
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.😃
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 ?
Nice) but I have a question: how to show appropriate the code examples provided by AI in chat flow? It appears as simple text
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.
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.
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?
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 ??
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?
awesome, is recommended buying both or which is the main difference?
ChatGPT one is basically a simpler version of what is built in this video, but refined for your own use, OpenAI is a complex mini SaaS with strict prompts rather than a chatbot
Wonderful and God bless you
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
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.
Nice work!
Mind sharing how did you add a long term memory to this? :)
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.
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.
Mr. Adrian, which plugins did you use in the program?
I'm buying!!
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.
Do we have to buy the APi for using chat gpt in our own projects?
Adrian, I enjoyed watching this segment. So, much so that I got your template for the ChatGPT-3. Then I realized that you have a Mac, and I have a PC. Your template should work, right? Do I need something to unzip with? I am confused about it. If you or anyone could give a noob to the AI scene that would be awesome.
umm Windows, please forgive :)
hey, Adrian what is this extension that you use to write faster code?
Thanks
Very much appreciated :) thank you
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
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!
How do you add a proprietary data source ?
30:01 The way he said "And delete later"
This is using the old OpenAI models. ChatGPT might be a bit more censored but it is more advanced than these models.
i was wondering, is this method can be use also for making ai prompt art? using chat box?