Build a Full Stack AI-Powered Web App with ChatGPT API

Key Takeaways

this video tutorial walks you through building a fully functional AI chat application using tools like the chat GPT API Google's Bert and the Deep seek R1 model along the way you'll gain hands-on experience with backend setup mongodb integration and hugging face models Harris from coding cleverly developed this course we're trying to build a full stack AI powered web app using the M which is basically mongod DB EXP press react node.js stack with chat GPD API and this is going to be an excellent project to learn web development and it's going to go with a step-by-step guide I ass sure that no one knows any kind of knowledge of uh programming and we're going to go by you know Bare Bones so basically we're first of all making sure that we know JavaScript HTML and CSS these are the course prerequisites then we'll put the development environment we TR we'll try to install nodejs we'll have npm which is the node package manager installed as well as mongod DB we'll use an editor like VSS code for this course as well as use git to set up GitHub for Version Control the project overview will include uh basically a mongod DB for storing user queries and responses expressjs for backend routing will have reactjs for building the user interface node.js as a server environment along with open AI chat GPT API for the API responses or the AI responses setting up the project basically going to do is initialize our backend so we're going to create a nodejs and express application and making sure we create all of the things that were required first thing I want to do is basically I would set up my back end I would use the mkdir command to basically create an uh okay so what I'm going to do is I'm going to call this application basically it's called a AI powered web app so I could say mkd AI powered app okay so I created a folder and you going to basically do AI powered app you're inside the folder if you go in here you'll see that there is an AI powered app folder inside there's nothing so essentially we're going to start out from here now the goal here what we have to do is we have to essentially get our backend uh you know set up so I'm going to create a a folder mkd AI chat app okay now I'm going to CD again basically the step that we repeated so I feel like we can just delete that one okay so I'm just going to shift and okay you could also do it using the the command so rmd and then AI chat app basically that removes that folder that was on there okay and now what we want to do is we want to install so we just initialize our um backend files so when I do npm init hyphen y I wrote to C users all this and this created a package.json which looks like this okay and it has the main as the index.js which have to which we have to create um and after that what we have to do is install some of the dependencies so I'm going to make sure I'm in Visual Studio code I'm going to use code and Dot this is going to open up my visual studio code window so we're going to install backend dependencies and uh let's start out with the beginning so first of all let me do that which is controll and B just making sure that this is down Okay so what I'm going to start out with is npm sorry so let me clear this CLS okay so we're going to say npm install we're going to install basically Express mongus EnV body parser course and we have more so open AI all right so some people might not know like what are the meanings behind this so basically the express um is essentially if you look at here it tells you that this is for backend routing okay mongus would be for your database andv would be for your environments and more and more would come along the way as I like go forward with the video so now that we have pressed enter you'll see that these things would be installing and our package.json basically would be updated and would have a nodecore modules so we go here in the package.json and cross this out you'd see that we have in the dependencies right we have the body parser we have the course we have the EnV it's Express mongos and open AI basically all the things that we needed create backend file structure so we have the AI chat app right AI powered app inside we have the backend folder and within the backend folder we should have something like this and making sure we have that so let me just fix up the structure here going here in the AI powered app I can name is as AI chat app so why not we just go back here and we just use F2 key and say AI chat app so I have to basically close my files so that it allows me to edit the folder so making sure that this is set to AI chat app is essentially would help it instead of char we'll say chat okay so this is there and over here we have to create a backend folder so control shift and N would create a folder and you could say backend control shift and end and we'll create another folder which is called the front end for the back end I think we could actually put all these things inside here and essentially if we just open up this within the um Visual Studio code we have a back end and front end folder respectively which is great now if you go back to the structure you would have the models folder the routes folder the EnV file and the server.js so in the back end basically you need all those F files so what I'm going to do is I'm going to actually now go into the backend and I'm going to make sure I have all the files that I need so again let's go back here bring I would I would basically dock this on the right and I would put this on the left and making sure when we're in the back back and we could create a folder which is called the models we could create another folder which is called the routes and let me just fix this up you create another folder which is called uh or basically a file which is called server.js and essentially I feel like I I did it correct okay and then we could create another file which is called EnV so dot EnV okay we're good with that in the front end we have setup Express server server.js now in the server.js file you can to express uh set up the express uh server using the following code essentially when I paste this in and let me explain line by line so what happens is that we have an Express require Express right and if you go to the um go to the package.json we did have you know added that so you know there wouldn't be an issue and we' have all these things that are you know basically being imported using from Express course body parser and then we configuration we set a configuration for theb we initialize our app using the express uh library and we use course policy and then we also use the body parts. Json so that you have Json you know results uh making sure that the port is set to a default and if not then we can set it to 3,000 and then we try to connect with so we try to connect with the mongod DB URI we'll try to make sure that new U uh the new use new URL parser and we have used Unified topology um we'll try to say make sure when if it's connected we'll say mongod DB connected and if it's an error we'll try to catch it and give a console log saying that it's an error right so if we just use the forward slash the request and response are in the body the response sends us a server's running message making sure that the P Port is listening uh the app is listening on the specific port and that would be essentially 3,000 and it would say servers running 3,000 um all of that is good now we're going to go into this mongod DB URI so we got to go go to the sorry thatv which is right here so I want to actually paste in uh the Envy file and this would contain the the mongodb URI along with the open a API key okay chat route so essentially what I'm going to do is I'm going to go here and I'm going to go here in this all all right so I'm going to actually go the left side and uh you know I'm going to go here a little all right so why not we actually bring in the URI and well as the open API key so I would actually use another window how to find the following Keys all right and then I just tell that I need these and it would provide me the instructions to find them and over here it says that the URI uh connection string can be found in mongodb adlas so if you go to mongodb atlas you log into your account you could basically create something like this it would actually have the URL string which has your username and the password and then it would tell that it's a cluster and everything you replace the placeholder with the username uh password and sometimes you'd have to change in the DB name uh like this one with your credentials and database name steps for mongodb instance use the default local URI uh the local mongodb this and then we're going to do the open API key afterwards I'm going to use an account so I'm actually going to one of my accounts and I'm going to use chat so basically first of all let's go to mongod db.com after that we're going to actually uh go here and try to sign up try for free we're going to use Google o authentication I do have a video on this on my channel so if you want to check it out I would recommend checking it out um after that what we're going to do is we're going to go into what's it called the you know cluster database so basically Al I had this uh organization um and what you want to do is you want to actually create a new create cluster and what you want to do is you want to make sure you're okay now mongod DB isn't free anymore so I remember there used to be a free one there the templates below or set up Advanced configuration options you can also add so how in the world will I be able to so the M21 basically was free now I don't know why for some reason name of the cluster is uh cluster you cannot change the name once created AWS Cloud Azure Virginia is the region and uh you know you could say try the no JS driver from mongod DB learn more and our mongod DB quick start guide create deployment I'll do this go to the configuration I'm hoping they don't ask for a card they do ask for a billing payment um which is unfortunate because this never ask asked for free I mean it used to always be for free so yeah we're going to do that so we're going to go and continue with the mongod DB setup and right now my current IP address not added so you will have to be able to connect to the database from this address I'll add my current IP address and that just adds it so you could see that there's my ID IP address which was added and you can see visit network access and modify your settings your organization does not have a designated Security contact add an an security Con in the organization settings so you can just add that as well right here atas Security contact information uh the designate atas Security contact will receive security related notification including a notification from the mongodb security team make note that this contact point is for notifications only and is not authorized for security decisions or approval so you can add your email address here if you want information on that so yeah I'm going to add my information uh details for my email and just save that okay so what we're going to be doing is we're going to go back to the mongodb you could see that there's a project zero as one cluster um and I'm just going to open up that project I'm going to make sure that I'm able to connect to that so I have the database access which is kind of like that the network access is allowing all of that so what you want to do you will be only able to connect to your cluster from the following list of IP addresses you can actually make uh everything accessible using allow access from anywhere using 0.0.0.0 and then SL zero and then just basically this entry is temporary and will be deleted no you don't need to do that just press confirm this will allow includes your current IP address to allow to be able to connect from anywhere now i' have to create a credential so I would go to the database section or basically I would go to the the home section and over here what I would do is I would actually go to the project zero and I will try to connect to this so the way to connect to this cluster zero is to the Shell or basically go to the drivers um I would basically use this driver section we go to node.js latest version or so making sure that it's installed and then this is your connection string so let's place this in the file over here so over here when the mongodb URI is you could just paste your uh thing that you got from there there's cluster zero which is the app name and making sure you have the password set properly which is actually the DB password um go into the password section you can actually create that using uh Advanced and in the advanced section uh basically it's not in the advance but you go to the what's it called clusters and within the Clusters um you can actually create connect view monitoring browse Collections and you can you know terminate and stuff do stuff like that I actually want to do is I want to have to create the password for this so edit password and we don't know the password so I would autog generate a secure password and copy that one so that is that and I would paste that password in this DB field so just zoom this in this is right here so I'm just going to paste that password right in here okay and then once we do that everything else seems to be good now let's go to the open API key so to go there I would actually have to go to the you know the instructions and it will tell me how to essentially create one so I would have to go to open AI to log in or create an account if you don't have one so what I'm going to do is I'm going to actually place this on the left side and I'm going to uh you know do this and hopefully find that all right so let's see what we can do about this so uh first of all let's go to the open AI uh website so essentially that's this one all right so after that create an account if you don't have one so I'm just going to make sure I have you know just log in using Google I'm going to have to navigate to API keys so this is the open AI platform um and then they would have some API keys somewhere over here just have to check them out uh click on the profile icon top right corner select API gam from the jop down uh top right corner so I'm going to actually go here and there should be like API keys somewhere API reference um and there you go there are some API keys right here and and uh so what I'm going to do here is create a a new AP create new secret key so it should be over here to create secret key all right so we're going to go to API Keys see over here and then as an owner of this organization you can view and manage all your API keys right in this organization do not share your API key with other or expose it in your browser or any other client side code to protect your account security open AI May automatically disable any API key that has leaked publicly view usage per API key on the usage policy so do not share your API key with others or expose it in the browser or other um basically what you have to do is you cannot share your API key with others all right or you cannot expose it in the browser or other client side code all right so essentially we're going to create a new secret key create an API key to access the open API key right I'm going to name this so you know CL create new secret key copy the key displayed make sure to save it as it won't be shown again do not expose these keys in your codebase use code environment environmental or secret management tools like files AWS Secrets manager or hashy environment variable setup making sure you have those I'm going to give a name to my uh key so I'm going to say my test key right and again this is just a tutorial so I'm going to delete these Keys later on this API key is tied to your user and can make requests against the selected project if you are removed from the organization of project this key will be disabled select a project I'll say default project and permissions all I can actually can make uh select project I actually can't able select s a default project so I'm unable to uh create that I think we have to create a new secret key um and we can't actually add anything my death key and then we have the default project and we'll just basically create this all right so this is my test K and re write API resources all right make sure your please save your secret key in a safe place since you won't be able to viw it again keep it secure as anyone with your API key can make request on your behalf you do lose it you'll need to regenerate a new one so basically we copied it and we go into the code and we just place it right here that's good we got the API key as well um and now we can go back here into the instructions which was which was back here all right so what we could do now is we could CL a chat route before that I wanted to test the you know the code so I would actually go and put this on the right side and I would just test out the application so far so let's see what happens so let's see control and back tick and let's just run the application so I'm going to go into this npm Ron Dev I believe we have to be in the back end so I'll say CD backend and then once I'm in here I could say npmi just one second and then I can to say npm run Dev now what's happening is that we don't have the script Dev so we have npm run so we could say npm run no test specified so life cycle scripts included this thing error out errored out so we're going to create these routes chat route and all that so what happened is that we went back here and uh we saw that the you know npm run Dev wasn't working so I basically copy this part and I see over here it'll tell me what's the issue all right thereor indicates indic uh that the script Dev is not defined in your package.json to fix this issue follow the steps verify the package.json file open the package.json file in the back end directory check for the script section ensure that the dev script is defined it should look something like this so you could just Define this and it should uh update it by itself all right um add or update the dev script if the dev script is missing you can add it to the script section in the package for example if you're using node.js with Mod modon you could use this using nextjs you can use Dev next Dev it's all dependencies you would need uh you would basically need the nodemon uh so you could use that or verify the fix and then it should work out all right so let's fix this up I'm going to add this uh script so so I'm just going to within the package.json which is right here so you could see over here there's a uh script section which is right here so over here would have comma and I would put in uh Dev all right and then we have see node Monon index.js right so that is basically it but you can see over here it's not index but server so I'm just going to change it to server.js now what we need is the node modon installed so I'm going to do control and back tick and you could see over here I could essentially go back here all right Cs and I would say npm I nodon uh now when you do noemon you want to have this hyphen ien save Dev all right so let's go back here and just say hyphen I save Dev hyphen Dev so this installs no noemon package you could see that it's verified uh right here should be over here that node man is installed in the dev dependencies now if I do npm runev what happens is I get this server started and then I see that there's warnings mongod DB driver warnings all right and then we have this uh server connected on Port 5000 and mongodb connected if I go back here um there's Local Host so I say Local Host Port 5,000 so let me see 5,000 because I think something is running on some other ones so I do that I just want to make sure that I don't have um that uh you know those warnings so I can actually just paste that in it would basically tell the application started successfully but the mongod DB driver warning indicates that you're using a deprecated option in your mongodb connection string or configuration the unified the use unified topology option is no longer needed as a uh DB driver 4.0 0.0 right so unified topology option is no longer needed so what you can do is locate your mongod DB connection code remove use unified topology so uh right this option can be removed and then you won't have that issue again if you're using if you are using mongodb's nodejs driver update the mongod db. connect call to uh remove this option so I believe if we go here and uh you could see over here we have a unified topology um is basically removed here and within the uhv I don't know if you have it over here but use unified topology I think sometimes it's written but I feel like no uh it does not have it and let's say yes or no so okay we still have an issue okay so you could go to the connection and uh use unified topology I'm just going to search if I find it here sorry over here uh use Unified no uh I don't see anything like that so I even say Unified no topology nope so I don't see anything like that and uh it's deleted here as well all right and then you can keep dependencies L updated uh and then you can just say that I want these latest all right so you can say no and what you can do is you can paste in these install the latest and I think it would install mongod DB it install mongodb latest Mongoose and mongodb latest so let me just mongodb latest and latest it should work out let's do npm runev now um and we still have that issue so what I could say is what I would give is this is my server.js and this is my error so if I go here and you can see over here this is what's happening or I'll say this is my warning all right so let's see what happens the warning indicates that the use new URL option is also duplicated and no longer required so you don't need that as well you can safely remove this option from your doc connect call so you can remove that and just make sure remove the de deprecated option let's go back here so you can actually just remove these options um and I feel like that should fix up the issue I feel like it because if I go here so you could see over here that uh it just says connect to the process.env u. then and I feel like that's pretty much it let's go and run this up um no all right so I had to basically save that up and I think that's that that was the reason so whenever I make a change mongod doie would have have to automatically refresh it and I feel like everything seems to work and yeah we're good to go so let's go to the next step um in this application part so let's go here and the'll put this on the right so we essentially just to you know backtrack what we did uh we had created a backend folder and a front end folder it was empty and we had models so I basically created models folder had nothing um there was a routes folder had nothing and then we had EMV file and then we had the server.js file um and then we had a front end separately but over here if you look at the setup Express uh server we have the server.js and inside here we have uh you know the thing that we were talking about the use new URL pars true and use unified topology set to true this was causing warnings I removed them I created the EnV file and put it the connection string as well as the open API key after that what we did was the chat route so we're going to the chat route over here and we have to create a chat. JS file so what I'm going to do is I'm going to create a chad. JS file and in here we're just going to make sure we're using uh some of the code so what we're going to do is I'm actually going to paste this code and just want to see if it works out so what is saying is that it's con I'm going to close this out as well and uh just make it a little bigger so you can see properly all right yeah so we can see over here that there is you know the con Express and then it's requiring Express and then we have the configuration open API key and it's requiring the open API so you could see over here we have require and then we have uh express. router and then we have the router right now what happens is that we have this configuration and we use this uh open API key create put in a configuration variable and then we have the open AI API and um we set the configuration and then create it as a variable which is called open AI we have a router. poost and whenever we create a chat suppose whenever we use the SL chat option we have a body response right we collect and we make sure that we're using the no so we're basically collecting the what's it called the response from the request right the requestbody is now in the message and the message would basically be within the prompt Max tokens is 150 and we have text D Vin sheet 003 right so we're using this model and it would generate a response saying data. choices sub z. text this would be the uh chat GPD response if we don't have an issue I mean if we have an issue we'll have this 500 server error uh uh ER communicating with chat GPT and then there you go module. exports is equal to router so that's pretty much it connect the rout route in server.js so we go to server.js and we make sure we have this route set so what I would do is I normally like after the connection I could use app right so I would say first of all would say const app or chat route is equal to require and then we have do/ routes and then we have slash chat all right and then within this we have app.use and then we could say slash API or SL chat but in this case we're making it simple and we just say SL API SL chat sorry or you can just say SL API and then it would go to the chat route all right so create a react app we're just going to create a simple react app at the moment so we're going to go to our front end react so create react app over there so what I'm going to do is I'm going to collapse that go to the front end and to go there I'll just do uh alt and back tick sorry sorry control and back tick and you could see that app crashed for some reason and uh you know it should work out soon so what we have is routes um essentially we have we have all of it ready um so over here we have configuration configuration is not a structure so it says over here configuration cons configuration so if you go to the chat we have an issue with this configuration I believe so what we can do is is do this and go back to our app over here and just say um this is an error all right and then just give it that and then we just say that we created this chat. JS uh this is chat. JS so we'll go and see what's the issue right and it indicates that the configuration is not recognized as a Constructor in your chat. JS file this likely happens because the open AI package version you have installed does not match the code you're using so you can verify the installed open AI version npm list open AI up upgrade or downgrade the open AI so and make sure you're using the correct one that's always a big issue so the error indicates that the configuration is not recognized as a Constructor in your uh Chad j uh chat chat. JS file so over here remember when I said that it had an issue in saying like um configuration not a Constructor right it it didn't understand what it was um this likely happens because the open AI package your uh version you have installed does not match the code you're using so basically to St resolve the step you have to verify the installed open AI version you have to run the following command to check the installed version of the open AI package so this command would like you could turn off the server so terminate batch job you can just say yes all right so what it could do over here is um npm list open AI so npm we say list open Ai and this should uh tell me that I have uh the 4.78 point1 right so we' have to upgrade or downgrade the open AI package if you're using an older version of the open AI package it does not support the configuration and open AI classes use these classes show using uh open AI version 3.2 or higher so making sure that you have the latest version you I do have a higher so uh I'll say npm install open AI at latest when I do this this updates the open AI and then what we could do is for open AI version 3 orx your chat. JS file is correct and should work so for open AI versions older than configuration open not available use this alternative setup instead so this is older way and uh you know you already understand like that's the older way and then what's the newer way so the older way wasn't I mean the newer way wasn't working just making sure if we work without the configuration and see if that actually works uh if not we can just uh return back to our you know existing stuff so let's see okay it seems like it worked out uh um you know without that Constructor and uh you know because I was actually using the older version and it had a complaint mhm so it says over here verify that the open API key is correctly set in the EnV file check for typos for in dependency ens sure that the EnV is properly configured at the top of your server.js so you can see over here we have the require env. config is showing that the correct open AI version and so this is for like how you can use uh you know EnV files within your code uh you can use this require. env. config so that would allow you to do that body parser will allow you to receive things through Json responses and uh now now we can go and move forward to the next step of this part of the application where we're going to create a what's it called a react front end so we go into the front unfolder and I'm going to Simply create an npx so npx uh create uh react app so npx create react app and we say front end all right now the thing is it creates a front end folder and then we have to install uh and we have install AOS so the thing is I would uh go here to the folders now I know I have a front-end folder before but I would just delete that one that's gone so I know that I don't have a folder anymore so even if I do that I just have to remove that I'm in the base right so I'm actually in the base and what I would do is I would uh one quick thing is difference between or El say npx or npm so what is the difference between npx or npm medium so what thing is npm is a package manager that is used to install uninstall and update JavaScript packages on your workstation whereas npx is a package executor that is used to directly execute JavaScript packages without installing them all right so basically like borrowing and having them in your package we're going to use npx at the moment just it's because it's faster uh the primary code role of npx is to execute packages unlike npm which requires installing packages before you can use them npx allows you to create execute packages directly from the npm registry without installing them this is particularly used for packages you only need to run once or infrequently so as State on the npm blog and npx packages npm exit should be used instead so yeah I mean npx or PM would work uh I would just use this because we're you know uh trying to create a quick and easy understanding it's you know targeted for beginners so npx create react app front end let's do this do you need to install the following packages create react app uh and I'll say yes um and then it would install this and you could see this all of this is depricated installing packages might take a couple of minutes installing react react Dom and react Scripts and the CRA templates um and what you can do over here is you can say yeah just cross that out sorry all right so what would say is for installing react front end react let's use npm all right so we're just going to use this one and then we're going to go move forward I'm just trying to make it a little more you know what's it called updated so let's go here you could see that if actually created everything for me but you know it has some kind of uh deprecations and that's why I don't want to like end up using something old and not supported so let's go back here and just delete this front end folder all right and once it's done I'm going to run this command which is npm init react app front end all right just going to put this on the right side and it should be delet uh it should be deleted hopefully once it is and I'm going to make sure that we do this one more time so let's just say npm in it npm in it react app front end and I say yeah I want to install this and I don't know why that's happening but um so you can actually do another one and just say the warning is that you see in the installation number your react app indicate that some of the dependencies using by the create react app are outdated or deprecated These Warnings are common when using older versions of packages or tools here's why you can here's what you can do install the comp uh install complete the installation let the installation complete uh despite the warnings create react op should set up your project successfully okay check installed versions CD front end npm list uh down upgrade dependencies you can just say mpm outdated to and verify that the project Works consider upgrading the Project's dependencies uh use the latest tools okay switch to V optional and then verify project setup so you can use the latest front end so this is one solution so instead of you know that command so if I go back to U you know this front end folder I would just delete this again and you know it would delete the whole thing you can use this app uh latest thing this would install the latest version uh official method to basically if you're uh starting a new react project you can use the latest official method to create a react app such as you know this one and it would use npx this UR that you're using the latest version of create react app and minimizes deprecated dependencies once you do that you can actually switch to V uh if if performance is a concern or if you would like a more modern alternative you can use V instead of create react app V is faster and uses few outdated dependencies and this is another really great approach npm create V at latest front end so that's also very good but you know let's just keep it with the uh this one this is going to install uh this package we're just going to keep it for now um and this is what we're going to be doing for this video so make sure you type this one in npx create react app at latest front end all right so once we have this completed we'll move on to the next part um so just making sure that this is completed soon and you can see over here with installing packages and packages like react react Dom react Scripts and C template all right and then you could see that a lot of things had this issue so I just wanted to make sure like suppose you don't you're not sure what these you know red things are just basically paste it here and say that I've used this all right say go here say I used this and I got this all right and let's see what happens so and it's saying that the issue arises because react creator app is attempting to install dependencies with conflicting versions particularly this react 19 which doesn't exist as of now and dependencies like testing Library react and require this here's how you can resolve them clean up uh previous attempts remove the partially created front end folder um use correct react versions explicitly specify react 18 to ensure compatibility with current ecosystem so you could just say what latest react version and it says over here that the latest version of react is 19.0 which was released on December 5 but what we're going to do is we're going to use react 18 all right just to make sure that we you know manage to have everything so I'm going to remove the partially dependencies so I'm just going to say RM hyphen RF and we have front end should delete our folder no so RM di front end Al CH will be removed with the item yes and it should remove the folder it's kind of like slow honestly I felt that before too um but you know you can see that the front end still exists so I could just delete it from here just leave it let it delete all right so the front end is deleted um and use uh we're going to use npx create react app front end use npmc specify react 18 to ensure compatibility if you still encounter proceeded with the Next Step uh use the force uh to buy by strict dependency checks manual dependency fix and then we have CD and we have this stuff so yeah so I'm going to actually use this one create react app front end uh let's see npx create react app front end use npm so I'll just say what does this do right so what does use npm do so it says use npm flag in the npx create uh react app front and use npm command tells create react app to use npm as the package manager uh for installing dependencies instead of yarn uh by default uh create react app may try to use yarn if it is installed on your system the use okay and then you could see that the errors okay there was err but you can see at the end of the day it does create everything for us so I think we're good to go uh summary without use if yarn is available crate react app will use yarn to install dependencies use npm forces the use of npm even if yarn is available on the system all right so great uh let's go back to this part um let's move into the front end folder CD front end so we're in the front end folder you could see over here um we have node modules public and we have all of that um in this Source folder we have all of this we have a package. package.json j JS sorry package.json so what I'm going to do is I'm going to install exos so I'm just going to say copy and let say that okay now we have uh this package okay to moderate so we have uh the exos library if you go to the package.json for the front end I'm actually going to yeah I'm just going to let me just say package.json just click on it so you could see over here we have exos installed C template react react Dom react scripts so it should be working um just say npmi it's just going to install that I'm going to say npm start and the front end should start working all right so it's it's on local Port 3000 okay module found it has an issue compiled with problems so yeah so what we're going to do is we're going to say go back here and uh I think it's over here so just go back here see so that indicates because the uh you see packages either missing or incorrectly referenced in your project you can install the web vitals so just turn off the server install web vitals verify the uh web vitals report so report web vital. JS file already you see and still see make sure the import the is correct if you go to the source in the front end there's a web uh I don't actually see that so okay there you go report web vitals making sure that the import is over here and uh just folder or pocket H lock can cause issues you can try deleting both and reinstalling so remove the node modules and remove the uh package lock and then install again okay so what I'm going to do is I'm going to actually run it again so let's see what happens now so we have report web buts no module failed because uh already been declared so I feel like maybe we could just remove that and yeah there you go we just had to install it and we got our react application running all right cool so now that we have our react app on we go on to the next step where what we have to do is we have to create components and stuff like that so let's go to the front end and let's go here which is right here so you can see over here we have install AOS and we have the front end Source uh so front end source and inside here we have components folder don't have a components folder so I'm going to create one all right then in the components folder we should have like a chat. JS file all right so inside here I'm just going to create a chat. j s file now over here you could see over here that we have a source folder and inside source folder we have an app.js and we also have an index.js right so report web vitals is over here and you can see over here this render root render we have this application so this is part of the app and you could see that uh the app.js is essentially what you were seeing learn react this was an anchor tag link had the image you could see uh the image you were seeing of the react you know in a logo moving around that was basically this entire thing react functional component so we go to this chat. JS file right and we create a component and you know we're going to use exio so we're actually going to run like this so if you go here and see I actually wanted to uh test out the backend API as well so if I do uh control and T back tick you can see that's running I was running the uh back end so if I go to Local Host Port 5000 right you can see that the server is running you can use a tool like suppose thunderc or Postman I don't know if um it needs a let setup but uh let's see we go here and if I just like suppose run this send you could get a server is running response if I say API right and this is also I think it's a post request you can go here how you can check this is go to your back end and server so you see that there's this. use API go to the routes and then you go to the chat this was a post request right um so what you could do is you can do Post API and and uh you know let's just see what it requires cannot post okay error there was a response over here authorization headers and body so body you going have uh you know you could have a what's it called the just make this a little out post and then body headers off you can have we we'll look into it we'll dig it in so let me just uh go here and exit this out so I'm going back here into the front end and you can see over here in the chat. JS file which is not here but here in the front end in the source in the components in the chat so you could see over here that we have a import react use react from react and then we have import AOS we have the chat functional component and we have export default chat so what you could see over here that we have a message use State message and we have a another so this is a hook I mean sorry this is basically a used State react and then this is a used State okay so you can see over here if I say copy and I say over here let's suppose like like over here I say are are these react hooks right let's see what they say yes the lines your provider are react hooks so use State hook this is a built-in react hook that allows you to add state to functional components so this allows you to initialize a state variable message with an empty string like like this as its initial value the set message is basically a function to you it is used to update the value of a message right we have also the initializes is a state basically it's called a Ed State hook so we have another one which is initializes a state variable chat with an empty array like this as its initial value the set chat function is used to update the value of chat and these are UST State hooks uh UST state is a hook that allows functional components to manage state which was previously only possible in class components the array dist structing syntax this thing is used to separate the state value message or chat um from the function used to update set message or set chat the pattern is common in react functional components for managing state so again we have a send message asynchronous function and you could see that we're trying to send a message set chat and we got the old chat and we got the user you and then we have the text message so the message is basically going to be in the UST St hook and we're going to set the message to initial and then we're going to call this back in API chat I guess it's not chat but it's it's essentially like/ API I feel like if I go back to this one you could see over here/ API it should be let's see mhm so if I go to the server it's only API H interesting so let's go here and then we check it out over here so let's see so API because I I even saw over here we just had SL chat so why not we go into it a little deeper right and you could see over here that we have a just a really simple page we have a div chat map and then you could see over here this is input text enter a message and it would return this response right um app component app.js so if you go to the app component which is I saw over here app.js um we have a react logo and the app CSS you can just delete that I would say and then you have the function app and then inside here we have a return and then we have a div AI chat app and then we have a chat um functional component which is this one where importing it should be imported then from the you know chat components and it should return uh the app just like how it's doing there so just copy this one and replace it and then after that you would recommend just control and back tick uh so let's see what happens um go to the front end okay so AI chat app so let's say hello so before testing this out right I know that this was you know the UI um and uh it contained what is it called a form and everything right before t t in it out I would say because look this is a form uh this one right we have a text message on value placeholder and a button send a message right all of this you're seeing uh how to test the uh backend chat API endpoint using let's say thunder client all right nvs code just go and uh see this and let's see what it says so what you would do is you would have a you know extension I have it installed it's called Thunder client you can go to the uh what's it called the extensions here and just type in Thunder client and you would get this uh very nice Thunder client extension which is this one I highly recommend this one after that what you do is you open it up all right and you could go back here again and what I would do is I create a new request right close all this out and what I would do is I would post in this URL endpoint this one so I don't yeah so this one is SL API chat then request body click on the body tab in the ThunderClan so you could see over body Tab and in the Json response you would say this message all right sending the request make sure that this is a post request it's going to say its method should be post because it was set like that the reply should be error communicating with chat GPT all right if there's an error check the following ens sure your backend server is running so make sure control and back tick back and server should be running I'll just I'll just turn off both of them and see what happens so I'll say this and I'll say this all right so the yeah the front end is nothing the back end should be working at at the moment but it has this issue and uh let's go back here make sure your url Point match the back ends configuration if there's a course I ensure the course is enabled for in your background using app.use doour so there's not a course issue at all if you look at the server.js I actually saw that it's using course as well so AB I used course uh this setup allows you to easily test your backend end points with thunder client um so if I go here um which is right here I guess but I feel like it gave the pack uh yeah so if I go here which is right here right which is this one this is the new configuration setup but you can see over here uh uh doesn't the router me mean uh the endp should be and then you could just say uh API okay so there's a chat over here as well so that's why I feel like maybe now I understand because we had chat over here but when I go here yeah so we when I go back to that one it was API right so that's why API SL chat or API chat so let's see that press enter give me the route definition and back end you're absolutely right give me the route definition and back end should be indeed this one why because the base path is API is indicated by how you set up the route uh in your server.js right so if you look at the uh route in the server.js which is over here you're using SL API chat route right the specific route this is the base path uh specific rout with the post request is SL chat so uh so combining the base pad API the route slh results in the full path there you go um and you know it's not working so if you go here and copy and you know I was trying to do it can I get okay you have to use the post method and we're trying to do that uh with post um let's see body let's see so hello CH GPT send we could say getting this error on um so I go back here into the application make sure it's on the left uh for the Endo uh I get a five 00 server error all right so one other thing just making sure I mean everything looks to be good uh it was the chat route we go in the chat. JS so why not we just um see if that would work the O older one uh old chat route which is going to be right here I know there has a Constructor issue so there was a Constructor issue it crashed because it does not recognize this configuration is not a Constructor so I I just like left it back um this is my uh chat. JS file in the back end all right so let's see what happens so it says the issue you encounter uh could be due to a couple of reasons such as the incorrect API key configuration such as the opena or network configurations steps to debug and fix the inue make sure the has the correct open API key then after that make sure you have this set up after that check the open API Library version ensure you're using the correct open AI Library version right it has to be more than that uh open AI SDK making sure you have that updated code with the correct open AI Library so making sure that you're using the you know the entire thing to just make sure that it's all being placed uh gbd 5 point turbo so making sure you go here in the chat um sorry over here and just paste that in here right and um after that we have a the code uses this gbd 3.5 turbo which