Build and Deploy Your Own ChatGPT AI App in JavaScript | OpenAI, Machine Learning
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- With an elegant user interface that resembles the ChatGPT app, communication with advanced GPT3 model API, and most importantly, the ability to ask the AI for help regarding JavaScript, React, or any other programming language, giving it code and translating it to another programming language, and much more, this CodeGPT is the best AI-based web application that you can currently find on TH-cam.
⭐JS Mastery Pro - jsmastery.pro/youtube
📚 Materials/References:
GitHub Code (give it a star ⭐) - github.com/adrianhajdin/proje...
Assets - drive.google.com/file/d/1Rhtf...
Styles - gist.github.com/adrianhajdin/...
If you're experiencing 401, 429, or similar issues, here are some potential solutions:
- Proper API key from OpenAI: It's possible that you are not using a valid API key from OpenAI. You can get an API key by visiting beta.openai.com/account/api-keys.
- Free credits offered by OpenAI: If you are using the free credits offered by OpenAI to use their models, you can check your usage at beta.openai.com/account/usage. If you have used up your free credits, you can check the pricing and upgrade your account at openai.com/api/pricing/.
- Proper server deployment: Make sure you use the deployed link from Render at render.com/. If you are unsure how to deploy the project, follow the steps mentioned in the video.
- After successfully deploying the link, make sure to paste the link in the script file of the client and push it to GitHub. This will allow Vercel to detect and deploy the application properly. Also, please note that the server link used in the Codex repository shared on GitHub has used all of its credits, so it will throw a 429 error and will not work. You will need to use your own server link by deploying it on Render or using another hosting service.
🐛Got stuck? Get your bugs resolved immediately - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 Intro
00:02:29 Demo
00:04:54 Setup
00:11:26 ChatGPT Frontend
00:25:58 OpenAI Server
00:39:05 Connecting client and server
00:50:57 Deployment
Just completed the JavaScript course provided by you and now this project will act as good way to learn JavaScript in more advance way. Thank You Adrian
I will surely start working on this ASAP
Amazing, enjoy!
I was looking for this in weeks. Thanks to you I finally found it. I have no enough words to thank you. Great job. keep it up ❤️😍
You're welcome 😊
Wow, this is no doubt the best channel on TH-cam at the moment for web development especially with the incorporation with JavaScript. You are the best! Thank you thank you for the journey you're taking me. I'm seriously following you up trying to master every line of the code and really it's working 🙏🏾👍🏾👍🏾
Thank You Adrian , for someone who hasn't started out with react yet , this a great Vanilla J.S project.Completed it in one sitting.
absolutely amazing! Would love an extended tutorial about creating a complete webapp with registration, login, payment processing, customer area and all the other things to make a full product! The quality of your tutorials is mind-blowing!
My solution was to this application behind a service like webflow, or Editor X, or even some of the supabase build templates that has user login functionality
@@gregcharles92 I’m curious to know how to do this on webflow. How?
@@gregcharles92 show us how you did it lol
+1
Wow sir you are always updated with the latest news, great tutorial. Thank you so much 🙏
Thanks and welcome
You provide what we need in time. This is phenomenal. Thanks for your great effort.
I’ve been improving on my own gpt3 and 3.5 turbo models… ported to mobile terminal on my iPhone: It’s so neat having the AI in a window that I can leave on and pick up whenever without having to log back in, no waiting in line from congestion. Using the API is the way to go… and they added images to the completions API I think today or yesterday. 🔥
Seriously, it was phenomenal. For once in my life I followed the tutorial like watching an action movie and got extremally interested in AI projects. Thank You so much Sir!
how did it turn out? It works?
i keep getting error 401 not sure why is yours working ?
@@Bitches_Love_Me Did you get an answer? Im getting the same!
@@Bitches_Love_Me
it 's does not work, always error😇😇
I will sure do this and test it out , learning something new is always fun thank you for awesome content❤
Good luck!
Loved the course, very practical and easy to follow. Great hands on experience and I was able to finish it in one sitting.
A very informative, well-organized, and smoothly delivered presentation. Thanks. I learned a lot.
There is only one word to describe this content. AWESOME. Keep up the good work Adrian. I'm working on some really huge project myself and this stuff will be and amazing addition to it. Thank you. Here come 2023, a year of AI.
Thanks! Will do!
By the way, I've told you to build a stunning app using vanilla JS and you made it here. Thanks for accepting my suggestion and building a stupendous app with vanilla JS!🙏🙏
My pleasure 😊
Can’t really describe how awesome your content are ! I’d love to see more react videos.
Awesome man! I have been trying to do this on my own without much luck for a few weeks! I consider myself blessed to have stumbled upon your video. Much thanks and appreciation!
Amazing one sir ❤
Always up to date channel
The thing others are talking about you build it..
Thank you!
This is the first tutorial I’ve done from start to finish with no mistakes. Thank you
Did you get it to run live and make requests after the vercel and render configurations?
i got error when deployed@@allan.adimoolah
Thank you for your efforts, all is well, app worked locally, pushed to Git, published to Render and Vercel with no problems. You are the MAN!
Dude, you are a legend in the making. I can't even get through all of these. How are you making these so quickly?
I owe you at least a big fat donation. Mark my words!
We would love to have some more deep dives into react from you, especially how to integrate the backend into our projects and create full stack applications, thanks Adrian..
More to come!
@@javascriptmastery I feel inspired by you to go back to programming.
I don't have words to express for your efforts, you are the best teacher 😭
Thank you! 😊
Road to success
You made one?
oOoOO so sad🥺🥺🥺🥺😒😥😢😥😀😀😀😀
@@ZainUlabideen-fb8zm really so much embarasing api.how it will works sir im not able to fetch the api??
Incredible! Thank you for taking time to do this!!
Awesome between this video and Adrian Tawrog's I was able to push my own iteration. Thanks JS Mastery!
Mate you’ve out done yourself! Great video right here!
Your ChatGPT videos are phenomenal, Adrian!
I am sure that both the videos are great. One is for the non developers..While the other is for developers. Interestingly, JSMastery video surfaced after I searched 'ChatGPT Clone'.
I don't want your video. I want my money
@@javascriptmastery I want my money back...
Great video as usual Adrian! I personally prefer React projects but a vanilla JS one once in a while is a good change of pace 👍
Thank you! 😊
Me too
Usually I don't and can't follow tutorials that are longer then 15 minutes.
But someone you've made this very interesting for me in 1 hour and doing it without other annoying JS frameworks
Thanks you my friend!!!
This is the best tutorial I've seen on using the OpenAI API. Thank You.!
Video we all are waiting from our favourite Javascript channel.
.
I made the whole website for my client using ChatGPT, and some of the animation that I didnt know like GSAP and ThreeJs , it code that too.
It's just Wow for any developer.
Thank you!
Seriously? What is the application you used on top of ChatGPT to get AI generated code for animations?
I am looking forward to the coming of GPT4, I wonder how good could it be? 🤔
@@invictuz4803 I command ChatGPT that, "Use react functional component and gsap, when user scroll pin an image and on scroll zoom in to the other page.
Other ThreeJs one is, I told to make interactive rotating earth planet.
Some basic layout and advance CSS
@@mindbodyps That sounds so sick! Do you have it hosted so I can see?
Hi Adrian, this is just a perfect tutorial, explainations are very clear and really enjoyable to follow. I'm interested in learning how to enable the chatbot to remember information from our previous conversations so that our subsequent interactions can be more precise. Can you explain how to implement this in the code?
thank you Adrian also just completed this project thanks for such a nice tutorial 🤗,you are awesome and btw more projects using vanilla js are appreciated now its time to complete the web3 project
Your video was excellent and well presented. In response to the question asked, I would appreciate the opportunity to see both Vanilla applications and more advanced React applications. Thank you for your contributions to the community. Wishing you a happy holiday season. 🙏😍💗💗
You always amaze me with your projects ALWAYS!!! I've been a subscriber of yours since you had 100K subs and now look where you reached straight up coding the ChatGPT clone oh my gosh ure fabbbbbb 😭😭😭✨✨✨✨
Thank you so much! ❤️ ❤️
My great teacher in Tech! You can never disappoint! If words were enough to appreciate you for your effort towards my learning journey in Tech, I would've written a Wikipedia for you. Keep it up Sir.☺️❤️
You rock!
Another unique and well-crafted project. Awesome work jsm :)
Great Job! My brain can't work as fast as yours, but thankfully, there are pause and rewind buttons. Much appreciation for your efforts!
Absolutely insane that this is available for free. You're amazing man, keep doing these, I'm learning so much by actively doing these projects
Glad you enjoy it!
@@javascriptmastery can u make it as also can u train him to make apps android like social media app by him self and create ui for the app by him self
Hey
I want to create a chatbot, but with your system I can´t use a "stop" command, and without a stop command for my
Chatbot:
Customer:
he is not able to understand my prompt
Love the way u keep the debugging part, teaching also how we can effectively solve errors by console logging
Always! :)
You’ve made sense of so much knowledge I lacked. Thank you
This is really excellent and hard work - thank you very much for your prime content, please keep the good work !
Great job, but I suggest you do a follow up video on how to avoid the 401 error. The dependencies on OpenAI and Render requiring paid accounts before your great app actually works.
I'd love to see more Vanilla JS from the channel , awsome work btw, you have such a talent to teach and to build things , i truly apreciate your effort .
Appreciate it!
Thank you so much for creating this great tutorial! I'm so happy I reached the end of it and deployed it! Congratulations on 500K subs! 🥳
Thank you!
bro how you deployed it when i deploy it it shows 401 please do reply me
Absolutely Amazing !! Please do more videos like this, and thank you so much for the great content.
Anything you put on YT is complete gold. Can you do an Udemy clone next?! With AI reccomendations for courses you may like. That would be fire!!!
Very nice, thanks! would be nice to see more vanilla JS examples
More to come!
@@javascriptmastery May I suggest Stable Diffusion prompting example?
great video as always Adrian, it really took me way back when I begun coding 👍
Thanks!!! This is incredible!! New follower from Argentina!
Thanks for this quality content 🤩
Thank you for watching!
I'd love to see both (Vanilla applications and Advanced React applications) on different playlists.
I must say, your method of delivering content to your students is top tier.
Thank you!
@@javascriptmastery source code please
After I deployed everything online, I had an issue with my key, for some reason. I had to generate a new key. It made me 20 years older because I was already close to tears as I had not idea what is going on. But it worked. Yesss!!! Thanks again :)
Awesome tutorial as always !!! Keep it up man ! You're a legend 😊❤
Thank you!
Again a fantastic video, well delivered! in respect to the question asked, I would go for more Vanilla Javascript videos as to React. Thank you for all you do for the community....... Compliments of the season to you ❤❤❤❤
Appreciate it!
@@javascriptmastery hey I need help, my chatbot said null what is happening?
============ HOW TO FIX 401 ERROR ============
For everyone struggling with error 401, here is how I fixed it and now it works as expected.
First, to explain why that happens, the way the project was created and made, for some reason the .gitignore file does not ignore .env and modules. This will in turn make your API key visible once it's pushed to GitHub, and the OpenAI has something in place that renews the key whenever it's made public (via pushing to the github repository), so everytime you try to make a request, the error 401 is handed over, meaning the API Authorization failed in this case.
To get around this you must do the following:
1. Access your project files folder and MOVE the .env file out of the folder completely
2. Go into VSCode and make sure the .env file is not anymore part of the project
3. Once you've made sure the .env file is no more, push the current project AND make sure the env file is also removed from your Github Repo by accessing it via browser
4. Now that .env is out of everywhere, you should only have a local copy. Open the local .env file in VSCode and put a renewed API Key from beta.openai.com/account/api-keys
5. Once you've refreshed the key, go to render.com/ -> Dashboard -> open your deployed project -> Environment -> Enter "Secret Files" tab
6. In the Secret Files Tab, enter as the "Filename" ".env" / "Contents" [here you copy all contents of the .env local file exactly as they are wrote in the local copy] for ex "OPENAI_API_KEY ="sk-Sh2akcOFEvelbd5bIReX...T3B"
7. Back in VSCode -> server.js -> modify the following:
dotenv.config({path: '/etc/secrets/.env'})
const configuration = new Configuration ({
organization: "org-K7....wAv",
Seriously, it was phenomenal. Thank you so much sir!
I included this video in my AI project and I was also successful😍😍😍😍😍😍
Thanks for the simple to follow tutorial. I found it very intriguing and I might use it on one of my websites that I own!
Please do a Stable Diffusion + React tutorial! So much potential for learning especially in terms of how to host a private Stable Diffusion API, set up a lambda function, etc :)
Great idea!
@@javascriptmastery I want my money..please send immediately. I have shared the account number
wow, Adrian's subscribers are increasing rapidly - the project is magnificent!
Thank you
I'm stronger day by day.Thanks for promoting me. Stay with chatGPT official channel.
@chatGPT official do you know. How can I deploy this project on my website, not free/ 3rd party website.
Still hasn't reach 20k like
@@timmygilbert4102 of course it hasn't, but you'll see it soon! 😉
Excellent work JSM I've really learned a lot. Thank you for this nice tutorial.
Thank you so much, Adrian! Your tutorials are absolutely amazing and incredibly helpful. I recently completed your JavaScript course, and this project is the perfect next step to deepen my understanding and skills. Your clear explanations and engaging teaching style make complex topics so much easier to grasp. I appreciate all the hard work you put into these videos-it's truly making a difference in my learning journey. Keep up the fantastic work! 🌟
i would love to see you implement this as React Chat Bot element. Looking forward to it. and Thank you for this awesome tutorial.
Thanks for the idea!
i think it is much clearer to use VanillaJS (tm) instead of React as any Vanilla app can easily be converted to React or something more CDN friendly depending on deployment strategy. I loved seeing the React habits creeping in, well done! Also cool your copilot AI attempting to autocomplete code for you but again resisting the temptation. Thank you so much.
yes, VanillaJS is a much better idea for beginners
wtf?
@@permacultureecuador2925
@@CeedMedia wut?
This is the best TH-cam channel for web developers for sure.
Words can't express my gratitude for your efforts Sir! I'm looking forward to the JSM Bootcamp
Very soon!
Thank you Adrian! this was AMAZING, do more AI videos please, I prefer React and NextJS but vanilla JS once in a while is good
again Thank you very very much
Thank you!@
Amazing Sir, I'd love to see more amazing Vanilla JS projects. I also want to emphasize that, while AI tools are becoming increasingly sophisticated, they cannot replace you. 😅
Exactly!
what is your age?
Yeah unless someone has a strong understanding of the fundamentals of development, I don't see how someone could give the proper prompts to chatgpt.
Send my money
depends on the "you" after all alot of people already lost their jobs because of AI.
Thank you for such an amazing video that can help me to make my own application where I can use ChatGPT for asking random questions and code. You have been a great source of knowledge and inspiration to me. Thank you for being such an amazing teacher!
This is that
Thank you so much for sharing such an informative and useful video on building and deploying a ChatGPT AI app in JavaScript. USER and I will definitely be giving this a try in an upcoming video. Keep up the amazing work, JavaScript Mastery!
Hello Adrian can you also create a tutorial for creating AI art using DALL.E in JS
Great tutorial by the way...love your videos
Great suggestion!
Thanks for the tutorial! could you please update it to work with the new GPT 3.5 API?
yes please
awesome tutorial as always adrian... hoping to join the masterclass soon!
This is the best thing I've ever done! Thank you so much for your help.
OpenAI all the API''s had paid. Anyone have idea to get it free??
If you are getting 429 or 500 status errors, then generate another API key from another account.
Say thanks using the like button.
For help Teleqram me 👆...
not helping me
@@usomine_af i need help
Why does this problem occur?
It is well with both of the technologies I am comfortable with both of them I mastered js and react with other framework by following your provided roadmap for frontend and now mastering the backend as well.... Big fan sir great motivation from you.... KEEP SMILING😇🙂
For help Teleqram me 👆..
Edit: Oh wow. I got it. Until the end. And it works. Thank you so much!!!
Old comment:
I just type exactly every bit of code as you do. I have no clue about coding, aside from some very basic HTML+PHP many years ago (and learned that in the same way, following someone with step by step copying what he is typing on the screen).
I'm at Minute 26 and deeply hope you haven't skipped something thinking we all are coder that know what to do 🤣
But I am already grateful for such a good step by step tutorial. Good thing you explain most of what you are typing. If necessary I will just ask the AI what this and that means lol - amazing times coming ahead...
I'm always getting the 401 error.... i even tried generating new secret key for the API... but still, i'm stuck with the same error
Same error man
Use react js for projects instead of vanilla js because we can.use react js in our dapp development more easily as compared to simple vanilla js.. So it is my humble suggestion to carry on.with react and next js..Thanks A lot😊
My thoughts exactly, Nextjs13 and TS.
I'll do that more! :)
Best Teacher Ever. I learned MERN, WEB3 and Build Own CHATGPT because of you :D
Wow, thanks!
Hey you are making difference. This is all we need I mean chatGpt is all over the internet everyone is talking about it but you, you made it more clear what we could be able to do with it
This was an amazing application and I loved it? Hats off for your dedication 🎉🎉. But I am getting 401 error when I type and press enter. This problem occurs after deployment, but in localhost it's working fine. Can you please help me to resolve this error?
Hi there, here are a few possible reasons why you might be experiencing issues, along with some potential solutions:
Proper API key from OpenAI: It's possible that you are not using a valid API key from OpenAI. You can get an API key by visiting beta.openai.com/account/api-keys.
Free credits offered by OpenAI: If you are using the free credits offered by OpenAI to use their models, you can check your usage at beta.openai.com/account/usage. If you have used up your free credits, you can check the pricing and upgrade your account at openai.com/api/pricing/.
Proper server deployment: Make sure that you are using the properly deployed link from Render at render.com/. If you are not sure how to deploy the project, follow the steps mentioned in the video.
After successful deployment of the link, make sure to paste the link in the script file of the client and push it to GitHub. This will allow Vercel to detect and deploy the application properly. Also, please note that the server link used in the Codex repository shared on GitHub has used all of its credits, so it will throw a 429 error and will not work. You will need to use your own server link, either by deploying it on Render or using another hosting service.
I hope these suggestions help resolve your issue. If you have any further questions, please don't hesitate to ask.
@@javascriptmastery okay, thank you so much for resolving my doubt😃😃👍🙏
which localhost you used i m using localhost 3000 but getting 429 status code error
wow... Just wow
Appreciate it!
@@javascriptmastery sir I want source code
This is my first time watching you and it is impossible not to be amazed. Greate job
Thank you!
this is incredibly valuable tutorial! I can't express how much I've learnt from it. Interesting fact - the chat bot we built thinks that today's date is August 11, 2020
any idea how to fix this?
Thanks for this one !!! I feel like this is a wonderful project! Can you please make a video teaching all the things you need to know in JavaScript before diving into react?
Absolutely brilliant! Yesterday i was thinking that what if i develop something like chatgpt with unique idea and today i got your pop up notification
You can do it!
Plz don't waste your extraordinary work on vanilla JS ... there are too many resources on that anyway ... plz give us more React.js, Blockchain (Solidity), JS & AI (OpenAI), Node.js/Express, and of course GraphQL, GraphQL & more GraphQL. Typescript is also a great idea. Plz, remember your best audience is the intermediate devs. There has been no content for us here before you (on JS). I mean something we can use to build a Portfolio with ... this has been my 2 cents. Unlimited thanks and more thanks in advance.
Thank you for the feedback! :)
This tutorial blew my mind. Its an amazing course. Thank you
For help Teleqram me 👆...
I would love and am interested to see and practice more vanilla JS videos! Thanks a hell lotttt and please!
This was amazing, please do more!!! Maybe add a tutorial for a simple app using Dalle as well with prompt and image return
Love the project. I will definitely refer people to your channel.
Man ,you introduction is amazing
thank you vary much man, with the raising demand of chatgp, now i have my own chatgpt on my computer at any time, without needing to log in to any traffic database. thanks alot man.
Wow, this tutorial was so helpful! I was able to follow along and create my own project using the Chat GPT API. The explanations were clear and easy to understand, and the final result is impressive. Thank you for sharing this tutorial, it was a great learning experience!
PS: this comment is generated by ChatGPT
You're very welcome!
I am gonna print this video and frame it on my room. THANK YOU SO MUCH!
really love the vanilla JavaScript tutorial cause I get lost whenever I use react. More Vanilla JavaScript content please.
Hi Adrian I have learned javascript and react in a much better way through your videos than anyone else on youtube. Kudos to you. I would really want you to add a registration to this app.
For help Teleqram me 👆..
Thanks to you, that was so clear and will help us make more advanced ideas with AI bots ❤️❤️
I Love you and Lots of Love From India. We want tutors who taught from Zero to Advance taking everyone as beginners because one skipped step can waste someone's lots of time. I am Pro Developer But Still love the way you teach.
Thanks a lot for this session. Lots of learning in one hour only.