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
Пікірлер: 470
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 :)
@anshvashisht8519
Жыл бұрын
hey congrats on completing, can you please share your source code?
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
8 ай бұрын
3lf 0:04 ò
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.
bravo - particularly appreciate your agile development process; specifically, how you begin with the UI layouts and then refactor into react components...
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
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
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
11 ай бұрын
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.
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 :)
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.
Adrian, thanks a lot for this video. I got great practice and cool experience in developing openai clients.
That's what we can call a real christmas present i guess! You deserve a subscription for sure.
You are a master on ChatGPT Adrian and as a React dev, this is perfect for me
@twarogchat___my__Teleqram_id
Жыл бұрын
ꜰᴇᴇᴅʙᴀᴄᴋ ᴀᴘᴘʀᴇᴄɪᴀᴛᴇᴅ 👍. ᴇɴᴅᴇᴀᴠᴏᴜʀ ᴛᴏ ꜱᴇɴᴅ ᴀ ᴅᴍ ɪꜰ ʏᴏᴜ ɴᴇᴇᴅ ʜᴇʟᴘ/ꜱᴜᴘᴘᴏʀᴛ ᴀᴛ ᴀɴʏᴛɪᴍᴇ.
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.
This is amazing man. exactly what I needed for my first saas project
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 this is great Content, Thanks and will be supporting shortly.
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
Thanks for the video! What is the difference between the 2 starter kits you offer?
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.
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.
Brilliant! 👌🏾👏🏾 You’re the man! 💪🏾😎
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.
I bought it for support, but will for sure use it very soon!
Wow! you are such a good teacher! Thank you so much :)) Will follow :))
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.
Awesome I loved every minute of the video
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?
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?
Thank you so much for sharing, Adrian.
Thank you for the informative video on chat GPT.
Thanks for uploading here
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.
would this project include frontend backend and a database?
Now I can see what you've been working on for the past 2 weeks!
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
Thank you sir for making this video Superb 🔥🔥
@AdrianTwarog
Жыл бұрын
Exactly what I wanted to hear!
Great stuff, thank you!!!
Thanks. Purchased previous, an I-ill purchase this template.
Great work. Thanks
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?
Fantastic video! What extention are you using to generate code by comment in VS Code?
No word, you are the best
This is really helpful. Thanks
@aharef
Жыл бұрын
For anyone stuck when "data.models.data" or comes up: It's "data.models" by now.
You made my resume filled with interesting projects 😃☺️🤔🙂😉😜
@AdrianTwarog
Жыл бұрын
nice!
dude , you are a legend
Thanks for the video. Does the hosted version still have the character limits? Currently it only outputs a limited amount of characters.
Great job on the video, Adrian. FYI, your buy button is not working, or its very slow?
Well done! Thanks!
Thank you 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 ?
That's so impressive... I have one question though, in 48:00 - why are trying to `await setWhateverState()`? State setters are always sync
Thank you for this information
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?
Amazing…this is Gold
@AdrianTwarog
Жыл бұрын
The way it should be!
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💖💖💖💖
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
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?
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
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!
Thank you for your time.
This is Amazing!
@RavNivara
Жыл бұрын
must be able to grant it access and privilege to the internet
Nice) but I have a question: how to show appropriate the code examples provided by AI in chat flow? It appears as simple text
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?
Mr. Adrian, which plugins did you use in the program?
Very good idea!
This was a big help to me, what theme are you using for VSCode?
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.
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
i was wondering, is this method can be use also for making ai prompt art? using chat box?
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
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 ??
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.
this is so friggin cool
SOMEBODY SPONSER THIS MAN
You are perfect. Just wondering how do I make the model remember past conversations?
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.
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.
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.
hey, Adrian what is this extension that you use to write faster code?
You earned a subscriber
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.
Why did you use express instead of a full-stack react framework that already has API integration like Next or Blitz?
Good morning Adrian, can I use it in a different language or just English?
@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 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?
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!
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
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?
could you possibly explain how we can use our custom pdf or txt data set for the api to reference in responding with chatgpt? I have everything working so far after watching video several times i have found my errors. Hope to hear back from you
Do we have to buy the APi for using chat gpt in our own projects?
Hey does this need a lot of modification to implement the new chatgpt 3.5 model api?
Hello @AdrianTwarog, I purchased your OpenAI Tempalte and followed all of the videos, I use the username and password provided in readme to login and it does not get past login screen. Please help, and how else can I contact you? Thanks.
Can we use await for setState hooks? I have searched the internet and it seems you cannot (unless its wrapped in a promise)
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.😃
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?
@henrybrown5107
Жыл бұрын
Yes, there's a limit for the length of your requests
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