Build a Chat App with NEW ChatGPT API | Full stack, React, Redux Toolkit, Node, OpenAI
HTML-код
- Опубликовано: 2 июн 2024
- Build a Chat Application with ChatEngine and OpenAI and ChatGPT integration tutorial. The frontend will consist of ChatEngine for our chat application, Redux Toolkit for our state management, Redux Toolkit Query for making api calls, Hero icons for our Icons and React Router for Navigation. For the backend we will be using Node Js as our runtime, Express Js as our backend framework, and OpenAI for Ai integration with our chat. We will be able to talk through our chat application like with ChatGPT.
Important*
When using Chat Engine and creating a new project, if you want your project to be hosted free forever, in the Promo Code type 'edward'. I do receive commission if you upgrade to get more features but it is not necessary to purchase for it to be hosted forever.
Links:
node: nodejs.org/en/download/
npx: www.npmjs.com/package/npx
vscode: code.visualstudio.com/download
nodemon: github.com/remy/nodemon
vite: vitejs.dev/guide/
react router: reactrouter.com/en/v6.3.0/get...
react dropzone: github.com/react-dropzone/rea...
redux toolkit: redux-toolkit.js.org/introduc...
redux toolkit query: redux-toolkit.js.org/rtk-quer...
hero icons: heroicons.com/
dotenv: github.com/motdotla/dotenv
chatengine docs: chatengine.io/docs/react/v2
chatengine storybook: chatengine-io.github.io/react...
chatengine api: rest.chatengine.io/
chatengine styling: chatengine.io/docs/react/v1/c...
openai node npm: github.com/openai/openai-node
openai completion docs: platform.openai.com/docs/api-...
openai playground: platform.openai.com/playground
openai api chatgpt update new: openai.com/blog/introducing-c...
openai api gpt-3.5 docs: platform.openai.com/docs/guid...
Completed Code:
github: github.com/ed-roh/chat-app
css: github.com/ed-roh/chat-app/bl...
code for openai-updated: github.com/ed-roh/chat-app/bl...
Chapters:
0:00 Building a Fullstack Chat Application with ChatGPT
3:44 Frontend Installations and Packages
13:06 Main Chat Application and React Chat Engine Setup
35:33 Chat Custom Header
43:35 Chat Custom Message Form
1:06:47 What is OpenAI and how is it related to ChatGPT
1:09:50 Backend Installations and Packages
1:21:10 AI Chat
2:01:30 AI Code
2:11:25 AI Assist
2:28:27 Authentication and Authorization
2:54:15 Complete Build Fullstack Chat Applaction
-----------
Subscribe to my channel: / @edrohdev for more web development and web 3.0 blockchain tutorials!
My NEW Discord: / discord
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now. 
Наука
![Roddy Ricch - Survivors Remorse [Official Music Video]](http://i.ytimg.com/vi/J5IeFzr2GgE/mqdefault.jpg)
Hey all, I’m back and recovered! So glad to be posting new content again.
Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX
Can you make some Vuejs tutorials?
I’m glad to see that you are back. I have missed your content so much and I am still hoping for the day you will respond to my email. Thanks
Hey Edroh, Can you make a roles+permissions react app? I believe it could be an amazing one!!! tyvm for your amazing job man!!!
Thanks for the awesome application, next can you build clubhouse clone or tinder clone (web application) using NEXTjs
Its good to see you back, full of health and hope u feeling great...
ayy glad you're feeling better!
Glad to hear you are recovered and Thanks for your great tutorial video as always! Stay healthy!
This was a fantastic tutorial. Extremely well done @EdRoh! Ive been in this field for a lot of years and its so refreshing to watch a video like this from someone with actual experience in the "real world" who gives real advice. Keep up the awesome work!
This is the first of your tutorials I'm watching, and it certainly won't be the last. What I really enjoy about these is that I have to stop the video to keep up. Why do I say that? Because SO MANY presenters overexplain, and I find myself waiting, and waiting, and waiting, and waiting, and waiting - and I can't stand waiting for the instructor to pontificate the same way I do about everything else. While I haven't had to do that once with you teaching, at the same time you give good, concise explanations as to why you're doing what you're doing. Enough for the new guy, without bogging down someone with a bit more experience. It's a perfect blend. I'm watching this video for a very specific project, but I can't wait to see what else you teach.
This is the most captivating video I have seen on RUclips! Thanks, EdRoh!
I was starting to get worried there for a sec, glad you're back!
We are so glad to see you back this is what we have been waiting for
thanks, ed. Never change man, you're doing helping us noobs so much tbh
glad you back, take care and thanks for all your video🥰
Wooohooo you are back!! The dashboard is huge tho I'm still on it!! Can't wait to dive into this one after dashboard!
Man, you are the GOAT. You create all this content by yourself and share with us for free. WOW. You are very much underappreciated. Wish you more subs and get better soon!
Saved this tutorial! definitely gonna work on this, thanks
Nice to see you are back
Thank you for this tutorial ! Gonna learn alot from this!
Well come back. I'm so happy to see you again.
i jope you're doing well, thank you so much for this!!!! please keep posting videos like this
WOW! Amazing tutorial on Chat GPT
How can someone create such a masterpiece for free. Hats off to you. love you, big brother🙏
Glad you're back! Love your content, can you make a complete guide on CRM all other guides on the net are always partial
I may consider it. Are you talking about using an already existing CRM like Salesforce or creating one from scratch?
@@EdRohDev it would be awesome 🔥
@@EdRohDev Creating one from scretch :) customer, customer profile, orders, settings, notification etc.
So happy your back!
awsome tutorial, thanks for sharing!!
Long time no see glad you are back brother.
thank you. glad to be back
thanks a ton Ed!
Great content as usual.
good content as usual
Get well soon, i hope you get better soon.🤗🙂
Great video, although from the title I was expecting you married Chat GPT and let it build your backend :D This could be awesome.
Great tutorial 💅🏼🔥
Thanks Ed, i hope you could also teach us a best practice on building a Knowledgedbase app with admin dashboard 🙂
nice to c you again...bro.best wishes...
Welcome back, get well soon 😊
You are awesome ❤️🔥
Great work Ed and glad you are better. Have not gone through the whole video but I notice in the github there is no install instructions like what API keys do you need and where you should put them to get this up and running quickly. Do you need any other keys except open ai key like a chat app engine acc and key? If so where do they go?
Thanks for sharing!
Love your content
Making developers happy 😋
Nice to see you back, May God give you long healthy life..your videos are great , please make project on Nextjs with Nestjs and graphql, prisma and postgres ,
try Coder's Gyaan yt channel
next js with prisma is on the way!
DUDEEEEE, learned SO F MUCH
Thanks for sharing 🤩🙏🏽
Thanks a lot brother
you should make videos about making websites and apps for influencers because they are starting to realize they can make their own websites and apps instead of relying on 3rd party apps for anything! once they all start thinking like this that is gonna create a huge boom in the web development market I think :).
thanx my man, it's cool, but now I am learnig Javascript from scratch I am gonna watch it when I learned redux and react ts
thank you man
welcome back Ed
Good I will practice it
Hey EdRoh , Great work Bro ! Thank you for this great content. Hope you are doing well now.
Next time can you please make content on React Native application and it's best practices. Thanks in advanced
great VIDEO
A tutorial for mern stack blog app with comment and like functionality will be very helpful 🤞
Great video! I'm following the tutorial, but I keep having this warning on the console, and it keeps piling up: "WebSocket connection to '' failed: WebSocket is closed before the connection is established."
Absolutely Beast
stay healthy bro and thank for your dedication to putting out content
Wel come back
long time no see ser!
Nice 💓
glad you are okay!
thank you a lot for this video. but do you know how to stream the response from the api? So the message keeps popping up like the chatGPT instead of showing up all at once
Your the best
Thank you so much. As a beginner, I followed your tutorial to the core but I am having problems deploying it. On dev, everything works fine at the end. When I did yarn build and yarn preview, nothing loads on the page. When I checked the console, I get the error: require is not defined. When I tried debugging, I found out the error was coming from require("websocket"). I have searched the web tirelessly for solution to this problem, but I couldn't seem to get around it. It appears this is a dependency of the react-chat-engine-advanced. Please, how can I resolve this? Thanks.
I have the same issue plz help us!
Thanks for the new video! I was wondering if you can do a project on NextJs with maybe the SWR library.
a Next js project is on the way for sure! Just need to make the final touches.
"I'm thrilled to see you again!"
i hope next time you create a real time chat app just like WhatsApp.
is this tutorial beginner-friendly? (like almost total beginner) or it's for intermediate level specialists?
Wouldn't be great if you create some projects in angular. thanks
love the vido misse you
thanks, :D
That's a very common mistake, but it's (not intuitively),
Should be spelled as "vEEt", and not "vAit".
Thanks for the video, and stay healthy!
Great content! Normally this kind of project what's your deployment platform you'll be using?
I haven't watched the video yet. But generally you deploy to heroku, firebase, digital ocean, or to cloud hosting providers like google cloud, AWS.
Or you can split your web app as well and host the frontend to a different provider and the backend to a different provider.
Which is often the best approach for security and if one is down you can quickly create a temporary alternative as you handle the problem.
For example you deploy your frontend to Vercel or netlify and setup your domain then you host your backend to let's say AWS. In your app you configure the API endpoints of your backend to accept requests from the frontend domain. In the front end you configure your post requests to the backend url.
For both approaches you will need to add some package to your backend like PM2 or Forever and many others. You just need one. Because once you deploy the backend there is no terminal to run the backend command let's say 'node app.js' you'll need to use a package like PM2 in your code to make sure your backend server is live.
Also note that most hosting platforms can host both backend and frontend.
You can even use platforms like Hostinger or siteground among others to host your frontend using their shared plan or buy a plan that offers more features depending on the platform.
Also remember you won't just deploy your files the way they are during development. You need to bundle them to a deployable file. Like for the frontend you'll run 'npm build' that's if you used ' create-react-app' or 'npm run build ' if you used 'create vite' ( this is Incase you didn't change the commands in your package.json). Then you can bundle the backend with webpack.
This was a generalized response make sure to check the docs of your hosting provider for guidelines.
It seems complicated but it is easy.
probably DigitalOcean, Linode or AWS
@@theadarshprasad did you deploy the project ??
@@RahulKumar-xl3dd i didn't started it as currently i'm working on some other project
welcome back
Does this code allow "remembering", inside the same chat window? Can you converse with the API and it remembers what has been said?
Does this app use a database for storing chat info? how to share chat info with others?
Get well soon man
Hello sir, I requested a laundry management system project using MERN, I really support your channel sir
Hi, is it possible to add voice note, video call and voice call also a feed for post like on facebook. I'm working on my final 3rd year project as IT Student Software Developer. Thanks in advance
facing issue regarding export and import of custom header file so i can't see chat page on running the project at 40:16
OnSubmit function is not defined.. can you please help?
Awesome!👍👍
Awesome work! I deployed the client to Vercel and also tried in Netlify but got an Uncaught ReferenceError: require is not defined even though we haven't used require on the client side. Any chance you know what may have caused this?
I think you should use render to deploy the back end part and Vercel/Netlify to deploy the front end part. It should work I guess.
Have you solved this problem now?
@@nattapongCcwr i was anle to deploy it in vercel by transferring the code to create react app instead.
@@nattapongCcwr wow! This will come in handy. Thanks mate
i don't understand how this is helpful to people learning, it's a bunch of copy/paste.
it's a cool project and looks great, I just don't think I'm actually learning much from this
I created a chat app with the old free chat GPT. I'm definitely the goat because I created all of it by myself without the need of any fancy GPT upgrade
Can i make it as a basic full stack developer?? 🤔
Hey, it’s amazing but login and signup is not working what to do ?
Hello there! Do you know if Chatgpt can be trained with business data in order to answer questions related to the business scope only?
it can be a pain to set up. May need an expert on that one, as I've been attempting to fine tune ChatGPT but it does require some time. you'd need to do embeddings within openai apis. There were some AI tools out there that do what you are looking for, but i forgot the name and also haven't tested it myself
Fine-tuning isn't available yet but you probably will be that's some point. The best you can do for now is paying more attention to prompt engineering. You kind of have to experiment and see what works best.
Can this chat application be MERN stack with integration of OPEN AI ?????
Which icona theme do you use?
great
Would’ve been nice to include how to deploy the application
he showed that in this video:
Build a MERN React Admin Dashboard | Redux Toolkit Query, Backend Focus, Deployment, Data Modeling
@@Yag116 once it’s deployed does that mean you essential have a working live product (assuming you use stripe for payments) that can hold new users and scale?
@@J3R3MI6”product” would be the wrong word since it wouldn’t be an original idea, I think it’d work better as an auxiliary project on your portfolio
Thanks for great tutorial! btw, I used your promo code but I got email it's expired and need to upgrade :D
Followed everything exactly as you have done and when I send a message to the Ai chatbot user there is a 500 internal server error. Further digging int he terminal of the server directory shows that there is a status: 429 error which means too many requests. There's no obvious fix for this.
To "fix" this issue I added a debit card to my openai account, then setup a new api key, this worked for some reason. Hope it helps anyone else if this happens to them.
@@rorymcdonnell7491 did you also make any payment?
@@vishwadoshi7134 it made a small payment, but you receive it back within one week
please give me your github link to grab css file, as you mentioned in the video. thanks
In this can two users also talk to each other oe only with gpt
Can anyone guide me how to deploy it on netlify or vercel or render, and what changed in the code we need to do to do so
could you do the Dashboard application l but use TDD to develop React + TypeScript application ? I can't find any contents on RUclips. is TDD no value for senior developer?
TDD can be a pain and not always a viable option. It requires a functioning product team that can deliver proper business reqs...which you'd be surprised not many companies have. Not to mention TDD is a big disadvantage when it comes to companies that have individuals who love to change business requirements all the time. Also in videos like mine, it'd be a struggle for me to include because what I already do in the videos is quite time consuming
@@EdRohDev ok, let's forget TDD, how about this things, Google has been released their USM model last week. could you add one more thing on this application but we can use USM to told with ChatGPT? I think that's awesome. Then we can think more, add one more AI vice generator to let the user can choose the voice of the famous people.
Has anyone hosted a clone of this and can you link it please
Also thank you ed great tutorial as always
Can I follow this for windows10 ?
Thank you for your sharing, but I always encounter 403 error. I am very sure that my OPENAI API KEY, Project ID and Private Key are all correct. How can I solve the problem?
anyone get any resolution for this?
hey did you find a solution for this? I am facing 404 errors and I think it is something similar. I also was a heavy copy and paster from github
is the mongoDB inside this project ?
This is great learning materials but i went through the video but i have error of 404 failed to load
👏👍
when passing {chat} in CustomerHeader 39:11 it's not passing as a Prop...can anyone knows why?
Bro Plz Make Another Ecommerce Project with Firebase and stripe Payment gateway and make it fully functional plz sir
has anyone had any 404 issues with this? I think I have all the code in place perfectly from the repo but im stuck on a 404 error...