Build a Chat App with NEW ChatGPT API | Full stack, React, Redux Toolkit, Node, OpenAI

hey guys this is Ed row I know it's been quite some time since I last posted but I have been sick with covet for a very long time and I'm just now close to being fully recovered I'm so glad and excited to come back and bring you guys some content again but anyways today we are going to be building this complete full stack chat application along with chat GPT and open AI integration and we're going to be building all of this from scratch alright so in this application we have this interface we have a list of chats that we are a part of and then we have a chat section where we can see the messages we can say hey and we can post it and other users in this section can see and we can also send an image across and we can open it and we have a little preview over here we can cancel it if we want to but let's actually add it and we can go and send our image and once we have this image over here it will be posted so everyone else can see also we're going to have more AI integration so if I go over here into AI chats underscore test let's say I'm going how is everything going so if I ask a message and I send it we can actually see we have Mr AI bot named Steve to be answering everything is going well thank you for asking we're talking to the open AI API and he is responding back so we have this integration but not only that we can go to this section which has AI code and we can just say give me a function that gives me random number JavaScript and let's say we send that and here he's going to give us a message that's going to give us a random number a function in JavaScript and then from here we can go to AI assist and in this case we're going to be using this to autocomplete so if if I say how to do and then if I wait just a little bit after typing it's going to give me an autocomplete suggestion so I have all of this and if I hit tab or enter all of this is going to be filled out also not only that we can go to our login page so this is a previous page and we can write test user five one two three four we can hit register once we've registered we can choose whether we want to log in and once we hit login we are now signed in as a new user so for the Technologies we'll be using for this particular application will range from front end to back end so the front end will consist of chat engine or chat application Redux toolkit for Estate Management Redux toolkit query for making API calls react router for navigation and hero icons for the icons for the back end we'll be using node.js as a runtime express.js as our backend framework and open AI for AI integration with our chat now I'll show you how to build this application from the ground up and as with all my other videos I'm dedicating this tutorial for both beginners who need step-by-step process of how to build everything and experience developers who just want to learn most of the best practices and understanding how to use certain packages and finally with all my apps this website is completely designed all by me I've created all of this ground up so you're free to use parts or even the whole project for your portfolio I hope you enjoy this application so let's get started the first thing we're going to do is we're going to be installing node.js so you can go to the description or the link in the description below to this website and you can download whatever is recommended for you for mine is Mac I've already had this installed so I'm not going to do that but node.js is basically it allows developers to build and run server-side applications using JavaScript which is traditionally used for client-side scripting and web browsers but we can use this for our server-side applications and then after that we're going to be installing npx so also a link in the description you can go here and you can do npmi-g npx so this is a package that will execute npm binaries for us and it's something we'll be using and finally if you don't have a code editor or like a text editor for writing code you can go to another Link in the description for vs code and you can go to this website download the vs code version that you will need and this will allow us to use our text editor and after installing those we're going to be using something called Vite so if you know create react app Vite is an alternative to that which is growing in popularity it's basically like create react app it doesn't have as many pre-configurations and opinions as great react app does but it is a lot faster when you do hot module replacement basically when you load up the server it's going to be a lot faster compared to react create react app but there are some things that you do have to kind of set up all right with that having being explained we're going to be installing Vite and we're going to be doing that I'm going to go into our terminal of vs code I'm going to write npm create Vite at latest so we have that it's going to ask you for a project name and I'm going to call this client I'm going to choose react over here I'm going to choose JavaScript as well and what I'm going to do from here I'm going to do CD client and I'm going to run npm I we're going to wait for that to finish after that's installed I want you guys to install some vs code extensions which I'll be using and if you go to this button right here it says extensions we're going to click over you're going to be installing this one es7 plus react slash Radix react native Snippets we're going to be using this to create boilerplate code for us for react components it makes it pretty easy and then from here we're also going to install prettier if you haven't already but prettier is a nice extension that will format our JavaScript and typescript and we'll make sure our package will be utilizing prettier to format our code and then from here we're going to be installing some packages by the way if you see this dot vs code this is some extra settings that I set this is more for me personally when I record so you don't have to worry about this you probably won't have this but I'll need it in my case so I'm going to close this and we're going to be installing certain packages so we're going to be installing react Redux and Redux JS toolkit so to explain what this is doing this is a state management library and Redux toolkit is probably by far the most recommended State Management library that I suggest you guys use you can use something like Joe tie or you can use zest stand those are all very popular and very simple to use but Redux by far is one of the most established libraries and it's good because a lot of people have used it and a lot of edge cases are being utilized and making sure they're taken care of so that's why you recommend Redux but on top of that toolkit which is just basically code on top of Redux that makes it much more easy to write so that's why I highly recommend it and then from here we're going to be installing hero icon slash react so this is basically I think it's by Tailwind but basically it's an icon library that we can use for different use cases and I'm going to install react router Dom and this will allow us to route to different pages of react and also I'm going to install actually this should not be at so be careful making sure you don't have that now I'm going to install react drop zone so this will allow me to add files into our into our Pages for later for the chat and then we're going to finally install react chat engine Advanced so this is a chat package library that we'll be using so make sure you have this written correctly and potentially if in the future I don't think any of these will change too much but make sure you have the correct versions and I will show you if you have any kind of installation problems I'll show you the package.json that will show you the correct versions and you can install them you can install those versions directly by doing for example react Redux something like npmi react Redux at whatever version you want so for example in my case react Dash Redux I'm using at 8.0 5 if in the future these versions get upgraded to a higher version and it breaks then you can go back and install this and it will fix your problems so just be aware of that sometimes I have no control over what these packages change as opposed to like what they upgrade you can go directly to those versions but a lot of times especially with these older established libraries like most of these I would say they will not cause you to break maybe reaction chat engine if he Updates this particular package then you might want to use this particular version so it just depends on your use case now after we have downloaded those packages we're going to go up open our folder directory and we're going to go into clients and in our source directory we're going to go to app CSS and we're actually just going to delete this because we don't need that then we can go to app jsx and over here I'm going to just delete everything inside here I'm just going to write app and change this to a lowercase remove the count in use state and remove all of the Imports in this file and then from here I'm going to go to index.css I'm going to select everything over here and I'm going to save it we don't need anything in here actually we're just going to rename this to scss as well and then if you go into a link in the description below I have a link to the GitHub page where it includes all the CSS and all you have to do is copy all the CSS in that file and we're just going to paste it in here so this includes all the styling we're going to need for this entire application now the reason why I'm not focusing on CSS and any kind of styling for this project is because I really want to focus on the chat engine I want to focus on uh basically a chat GPT and the open AI Integrations as well as the chat application itself so this video does not focus on any kind of CSS or styling now after copying the CSS into this file we're going to be going to main.jsx and we're going to change this to scss because we change the name of the file and we're going to save that and also we're going to open up our terminal and we're going to make sure we run this once so we're going to run npm run Dev so with that Vite is going to be able to show you that it's running on this port or this URL so we're gonna hit command or control click to open it up and if you look we do have a problem with dependency SAS not found so we're going to be installing that so we're forgetting one thing to install so I'm gonna cancel out of this with Ctrl C and over here I'm going to write npm I Dash D s a s s so that means we're using this scss file which is SAS and we're installing the dependency of SAS into our package Json so over here you can see now we have SAS and we're going to rerun the server I'm going to click open and now we can see we have our app written from the app jsx file like over here so everything is working as expected and we're going to close out and we're going to be doing some installation and setup for our react component chat app so the next thing we're going to be installing is going to be chat engine so basically chat engine is a package which simplifies the process of building chat services so if you were to build a chat application from scratch there's a lot of infrastructure and complications when it comes to setting up communications and connecting users to other users so using a service like this generally helps your project that makes it very easy to create chat applications with minimal effort so with having said that you can go to the link in the description below to go to this website and what we're going to do is we're going to hit up sign up and we're going to sign up to whatever email you want now once you signed in you'll see this dashboard and from here we can create new project and we can create our own title and here I'm just going to say chat app and if you look at this we have free trials that last 30 days and plans start at seven dollars per month however I have a promo code and by the way I do receive commission for this but if you use this promo code that I have and you just write Edward right here you'll get a free trial that will last forever so make sure you use this promo code or else your trial will last 30 days so we're going to be creating a project like that and once we have it set up we're going to have an app that's set up with a basic and will be led to this page and we'll have a project ID as well as a private key The Next Step would be to create a user and we're just going to call this test user and the secret I'm just going to say one two three four one two three four doesn't really matter I'm not going to fill any of this out I don't need much of it maybe I can choose an avatar and once I have it Avatar I'm just going to hit create person and this is going to be a user that we've created in our project now once we here we can see our chats if we want to create a new chat and we can probably just do that and call this test chat something like that and we'll have a chat in our application all right and then with that we can go and I'm going to show you some of the documentation before we start I want to show you where to find the documentation so if I go back to chat engine you can go over here and you can see the documentation over here however there is an updated version of this so you want to go to react chat engine and we're going to go reactant engine Advanced and this will provide us a little more functionality and a little more um customizability in our application using this one so this is the documentation you can go in the link below make sure you see doc slash react V2 and that's over here once we have that you can also go to this link this is the rest API of chat engine so in cases where you want to use the API and call chat engine directly for more customized usability you can go to this particular website with rest and I'll show you the API documentation that you can use if some of the opponents are not doing what you need and then over here you can go to storybook and you can see all the components that this is consisting of and I'll show you all the props of each component but for each one I will show you what we're going to be using so don't worry about that unless you want to really look at this now before we start coding I want to show you one last thing which is the customize UI section of the documentation so if you want to change the styling or customize how the chat engine looks which is what something I already did you can go to this link over here with custom CSS there's multiple ways to do it with render function you can just use their pre-made render functions inside the component itself or you can change the components and replace the components as you need or you can just modify the CSS and for my case or for our cases I customize a CSS itself as you can see in the SAS file it has a lot of different CSS classes that I've customized to make our website look nice so if you want to customize it for your own needs you can do it over here all right now apologize for all that explaining but we need to get that out of the way so we can actually start coding so we're going to go to our app jsx file and we're going to start writing our Imports so I'm going to do import use State now notice I'm writing you state over here this pops up which is intellisense and once you click it it's automatically going to write your Imports for you so always make sure you're using intellisense if you haven't watched my videos I'm very big on it make sure you use intellisense because it prevents typos if you accidentally type it wrong yourself and also saves you the headache of writing the code sometime so from here I'm going to do import browser router with routes I don't know why intellisense doesn't pick this up for react router Dom but we're just gonna have to write it manually sometimes it just doesn't work I'm not exactly sure why so we're going to do react router Dom so we're going to have that so now we're going to be doing authentication but we'll be doing it later in the video so we're going to start with more of the chat application and some of the UI first and then we'll cover some of the authentication parts so from here inside our app we're going to go to div class name app and inside here I'm going to set up browser router like so and inside here actually I'm going to save it so we get proper intellisense or proper linting and over here I'm going to set routes and inside here I'm going to set up our route and I'm going to set path is equal to slash chat and we're going to set element to equal in component that we have not created and we're going to call this chat like this and I'm going to close that so what this is doing we're using react router Dom you need to set up the browser router over here to surround the routes that we want to use and then inside our route this is the URLs that we can go and this is the element that will be rendered when we go to this particular path and now from here we're going to be actually creating our environment variables so I'm going to create a file called dot EnV .local so now if you're not used to Vite technically uses.emv.local because git ignore we're going to be ignoring the local files but we don't ignore dot EMV so you got to be careful we're going to be using this for our local directory and what we're going to write is we're going to do Vite base URL and we are going to set this to a URL that we're going to set the back end to but we haven't created the back end but the port is going to be on one three three seven so this is the URL that we will call to reach our back end and then from here we're going to create our Vite project ID so now this is a project ID that we're going to grab from chat engine and that's how we're going to grab the URL so if I go to my projects back on our chat application we can go to our settings and you can make sure you copy your project ID over here make sure you don't copy mine so just use your own API key over here so we're going to have that and we can save it as well all right with that being set up we can go back to our app and I want to show you one thing and this is going to be cool to set up so if you have if you race route we don't get like the big uh intellisense that tells you that this is incorrect right here with the import it just gives you a three dot showing that it might be incorrect now we want a better intellisense so what we're going to do is we're going to install something and we're going to open up our terminal we're going to do npmi Dash D E S lint and then eslint config react app so we're going to make sure we install this so basically we're installing the eslint configurations that create react app has light does not have default es link configurations so we want to make sure we have this and also make sure if you don't have it installed already you want to install eslint this particular extension into vs code so that you have the proper eslinting going on so we're going to close that I'm going to go to our directory again and there's also one file that I do need to create and I'm going to create a new file and then call this dot ES lint or c dot Json and we're gonna I need to move this into the client make sure it's in the client folder not the outside folder and we're going to have a Json object over here I'm going to write extends colon react app like so and we're going to save that and now over here now you can see all these warnings and errors that actually pop up now we can see chat has not been defined and we are going to be creating that but we just haven't gotten to that but our eslint is now showing and these are showing the warnings that this is not never use it's just being read same with this so eslint will help us with a lot of problems that we might have so with our intellisense set up now we can create our component but before we do that let me explain some code architecture so here in our client folder we're gonna inside our source directory I'm going to create a folder called components now typically in a normal code base I usually have a folder called components and then scenes and then the state we're not going to have a scenes folder because this this code base is not going to be so complicated we need those separations but generally you can just have a components folder if your code base is small enough because just remember codebase architecture just because one app is set up in this particular way doesn't mean it's the right fit for another application just remember that architect and code bases is as simple as make it easy to find what you're looking for so the whole idea is if you have lots and lots of files let's imagine you have a thousand files and components and you they're on all on one level of components and not they're not nested that would make it very difficult to find a component you're looking for if there's like a thousand files in here so you wanna in that case you can create more folders to separate and organize what you're looking for however if you have other cases where you're nesting too many files into each other you're gonna have to dig deep into 20 different folders just to find what you're looking for that's also a problem so you always want to make sure that your components has a decent length or decent number of files but not too many it's always a balance between too many files and too many folders you don't want to over organize you don't want to under organize so you always want to make sure you have that right balance and that's the basis of code architecture and generally you split code architecture between UI components which is like the front-facing elements versus the state components things that hold the data because those require separation of architecture and helps manager to stay so hopefully that makes sense I know I'm not giving you any visual examples here but it's kind of hard to show that but either way in our code base right here we're just going to create a folder called components and I'm going to create a folder in here and we're going to call this chat and in here you can see that's kind of nested if I open this up you can see that's kind of nested for the sake of my own Saturday I like not having to deal with that so I'm just going to create another folder called login which is something we'll create later I'm not going to touch it right now but now you can see we have a components folder and we can see the chat right here and inside here I'm going to call this index.jsx and this will be our chat application so now if you remember our vs code extension if I do rfce this will pop up a default component based on the file name and we're going to call this actually chat all right and then from here we're just going to make sure we test it um I want to just make sure we see the components from here so we're going to go to app.jsx so I'm going to import chat from component slash chat and we're going to save it and I want to see if we go to let's make sure our server oh yeah make sure your server is running so we're going to do npm run Dev you run our server it seems like we are seeing nothing and I think that's actually expected yeah that is expected because we are using react router Dom and routes are not set up for the default page but if we go to slash chat we can now see our chat component like this so voila everything's working now if you see this URL this is fine like this is not hard to read for the import but we can make this easier to always start from the source directory so sometimes we might have a situation where it goes like this goes like this you need to constantly just go through different folders just to figure out what you're looking for and that's kind of very messy so we're going to be setting up one last thing for our Vite configuration and that is going to be setting Alias for our default path so the way to do this is I'm going to close out our terminal so we're going to cancel this out over here make sure we're clear so we have nothing in there I want to show you that we can install npm I Dash D at types slash node make sure it closes so it's not very distracting so this will allow us to go to our Vite config over here and we can import path from path like this and once we have that we can go to resolve actually let me close this so we have more space you guys can see better so we have resolve over here and I'm going to write alias and over here I'm going to do square brackets and then curly braces I'm going to do find Colon at replacement colon path.resolve dashed underscore underscore is what this is called if you have two underscores their name comma source now it's a little complicated but basically all it's doing is we're just going to find anytime we see an at configuration we're going to replace it with our current folder directory that leads up to our source directory that's all it's doing we're going to save that we're going to save that and then we're going to go and create a new file inside our client directory and we're going to call this jsconfig.js Json and inside here all I need to do is do compiler options colon and then we're going to set paths colon and do at slash star colon dot slash Source comma or slash store so this will set up our path so that we can go to app.jsx and I can do this with an at instead so now we if we have a lot of nested folders this will help us significantly all right and once we have that I'm just going to run our server just to make sure everything's working so I go to this page we can see our chat is still there so it's working as expected I'm going to open up the console in our uh web dev inspector make sure there's no errors so make sure you see that and check there's no errors over there we're going to close this and we're going to move on to the next thing all right then from here I'm going to close out all of this except for index.jsx and over here in our track component we're going to be importing a number of things so I'm going to import use multi chat logic so as I mentioned react chat engine Advanced is where we are getting this from so in our documentation this is what we need and we're also going to import multi-chat socket and multi-chat window and I'll show you what each of these will do so over here I'm going to create the chat prompts using use multi-chat logic like this and inside here we need to pass in a few things so the first thing I'm going to import is a project ID we set up in the dot env.local over here so Vite project ID so the way to import using Vite is going to be import meta Dot env.vite project ID so this will configure or this will grab this environment variable over here oops and it'll allow us to use that in our use multi-chat logic and then from here we need the user of the react chat engine that we created and in our case we're going to have it Dynamic later on once we have authentication but for now just to see we have our test user we're going to be using this so we're going to set this to be oops test user like so we're going to hard code this for now so we can have access and create the chat application first and then the third argument that this takes is going to be the pass word of this user so I just made it simple one two three four so this will give us the chat props and authentication that we need to connect to our chat engine project all right and then from here I'm going to do the one styling I do need is I'm going to set this Flex basis to be a hundred percent and I'll I'll cover what this will do so we can take the full width of the entire window and inside here I'm going to erase the chat and I'm gonna put multi chat socket like so and the only thing we actually need to pass into this socket is for us to connect and we're just going to pass in chat props so this will render our component and it'll give us authentication that will provide us to connect to react chat engine website and then from here I'm going to create multi-chat window and this is where we're going to actually do a lot more logic with creating the components and styling it so I'm also going to pass in chat props because this one also needs it and if you take a look we're just going to have a style and we're going to set the height to be a hundred viewport height so it takes the entire height of the application and we're going to do render chat header and this will basically allow us to customize the header of our component so I'm going to go over here I'm going to write Heather like that and we're going to pass in we're actually going to pass in the chat prop that this passes in from here all right so now you may be wondering where I'm getting all this information and how I can how you can customize it if you want to customize it yourself and we're just going to go back and I have all the links loaded up over here if you go back to the react chat engine Advanced section you can see in the overview tab you have the component and the socket so I have the socket over here and then the component over here so generally with the socket you don't have to do that much but with the chat window this is where we can do much more styling and customization of how it looks and how it works so this part right here render chat header you can get that information over here when you see how it works you can see there's a lot more information on how to do this but you can also go to the components list to show you what each part represents so if I go down you can see render chat header that represents this section and if I want to customize it I can do render chat header and I can customize my own version and that's exactly what we're going to be doing with this header component over here so this will replace this particular component we'll have a lot of the same things so we don't have to render and customize every part of this chat application but we're going to be customizing parts of it so we can use all right so with that I'm going to go back to our app give us more space over here and I'm going to import header from at slash components slash Heather we haven't created this yet but as you can see with the at again that means we always start from the source so we don't have to do something messy that looks like this we can just always start from at so we know where it starts from it's just a cleaner way to do these things and sometimes it can get very complex when you have very a big code base so here I'm going to create a new folder I'm going to call this custom header and inside this file I'm going to call this index.jsx again and actually this should be yeah this should actually be custom header like that so make sure you fix that so we can go over here and it represents it goes to this location so over here I'm going to do rfce again to get r get our base get our component basically so in here we're going to import a number of things and now we installed react hero icons and we're going to be using some of the icons that they have so I'm going to use chat bubble left right Icon phone icon and we're gonna grab it from oops at hero icons slash react slash 24 slash solid so now where I'm getting this from is you can get this from heroicons.com and you can check what we're looking at over here so chat bubble Left Right icon so I'm using this one right here so the way to do this is always just copy the text of the name left right and then you just have to add an icon and you can import depending on whether you want solid or outline so I'm using the solid version so I'm over here making sure you're importing from the solid and this is the size of the icon that you're using so inside here I'm going to run and add some divs like so and I'm going to give this a class name of chat header so now again just a reminder I have all this styled for us so chat Heather so dot chat header is going to represent a lot of items of flex Center space between padding I'm not going to cover this you can look at the CSS that you've copied over and you can see what's happening with that and over here I'm going to set the class name to be Flex between which is essentially doing a flex and making sure everything's aligned separately from each other and I'm going to pass in chat bubble Left Right icon and give this a class name of Icon chat like so and over here I'm going to set the H3 like this with a class name of Heather text and pass in over here we're actually this is something I've forgotten we want to make sure we're passing in chat over here and with that we can access to chat dot title using that particular prop and then from here I'm going to create another div and we're going to create a class name of flex between like this and I'm going to pass in phone icon class name with icon phone like this and give this a paragraph tag I'm going to call this class name Heather text and I'm going to say chat dot description like so also one thing we want to do because of some warnings that we don't really need to worry about we're going to go to our main.jsx and we're going to remove the strict mode we don't really need stroke mode and it has no bearing on what the application will do so we're going to get rid of that now we can get rid of that so if we go to our Vite application you're going to see that in small screens we're going to have this configuration but on bigger screens we can now see our chat application if you look at this everything is similar to what you would see on the documentation very similar we just changed some of the colors or at least I change the colors with the CSS so we have a darker theme there are some or there are some nuances that we'll need to fix but if you take a look here this is our header and that is everything we set up here when we when to app.js or sorry uh index.jsx this is what this header is representing it customize this replace the header and now we can render out this particular thing now with this one of the weird things about our header right now is because of these these little arrows so basically this shows up when you haven't selected the chat so we're gonna have to kind of customize what we're doing so I'm going to use console log chat and I'm going to say chat description just to see what we're dealing with so description like so and we're going to save it so by the way the way I did this I'm using something I'm using a console log extension and I believe it's called Rocket something rocket I believe oh sorry turbo console log so this is what you're looking for and what it allows you to do is just highlight over here I'm just going to press Ctrl alt L and that will console log whatever you're highlighting over so make sure you have that if you want to use what I'm doing and once I have that saved I'm going to open up our terminal or our console log over here and we can see that we kind of have some of these arrows as our text so what we're going to do is I'm going to write chat dot description if that's equal to or arrows like this or at least if it's not equal to or arrows then we render out what we've already written so let me actually close this so we have more space and we're going to do a ternary operator and I'm going to write close it like that so if it's not equal to this then we render out our description otherwise what we're going to do is we're going to show p over here and we're just going to write no chat selected like so we're going to save that and I need to make sure we close and then we can see we have no chat selected over here so now you can probably have a more elegant solution to make it look better on smaller screens but generally you don't have to worry about that since generally they'll have like a full screen that they're using so it's going to look more like this all right then from here I'm going to erase our console log I'm going to save it I'm going to close our our app GSX as well as a custom header and now we can go back to our index.jsx and we're going to be customizing another component so this is where it's going to be most of the functionality so we want to be able to do a lot more things for our message Forum but we're going to first style it out first so we're going to do render message form like this and this one is going to take a props value and here I'm going to return something called standard message form so this is a component that we have not created yet but we will so we're going to do props over here I'm going to pass in props here but we also need to know the active chat we want to have the props and the information of the currently active chat so to do that we're going to do active chat like so and I'm going to pass in chat props dot chat like so and this is where we are going to create our component so I'm going to go over here I'm going to import standard message form from at slash components slash custom message form plural I'm going to do standard message form we're going to have multiple of these forms and they're going to be different forms for different purposes and like I mentioned in the intro we're going to have ai generated messages or AI response by an AI bot all right the first thing is I'm going to create a folder in the components directory actually make sure I save this so I'm going to create a new folder over here call this custom message forms and I'm going to create a file called standard message form jsx the reason why this is not index.jsx is because we're going to have multiple of these custom message forms so we're going to have multiple of these files so I'm going to use rfce again with standard message form and we're going to make sure we have this all set up and it's working so I'm going to save it and it seems like it doesn't seem to exist all right so I found out why it's showing that and I just restarted it I saved it I restarted if you need to you can restart the server this is the one thing I don't like about fight sometimes it just doesn't reload properly at I'm not exactly sure create react app never had this problem but basically I just saved this I restarted it and then it's now working so make sure you can restart it because this this URL was correct all right with this we can double check our application it's having our standard message form existing over here and now we can see it however we want to customize this to look a little bit different so we're going to have this is our final application we have a send a message we're going to have an attachment that we can add files and then we have a send so it's styled a little bit differently but we're also going to customize the submit so it can do various things so we're going to go back to our code I'm going to close this close that close our terminal over here and inside our application I'm going to do const message set message so this will save the message that we are going to be using I'm going to pass in use State over here so again use intellisense for that and we can just pass in a string inside U State and over here I'm going to do const attachment and then set attachment like so I'm going to pass in use State again and pass in an empty string over here now I'm going to save it I'm also going to have one more we're going to set preview and then set preview so this will be the preview image that we want and this will be an empty string as well over here I'm going to say class name with a message form container so this will be the outer container to contain our div and we're going to start by adding the preview so we're gonna implement the preview section so what I'm looking for I'm going to go back to our image over here I'm gonna I'm gonna choose a random image of these speakers over here and now you can see our little preview and it has an x mark that we can cancel out if we want so this is our preview and what it's doing so if I go back to my code I can go to our preview I'm going to write div and I'm going to close this div as well and inside here I'm going to say class name message form preview inside here I'm going to pass the image and we're going to do class name with message form preview image and again this is not a CSS video so we're going to do Source preview in Brackets like that actually it should be singular and I'm going to do on load we're going to pass in url dot revoke object URL preview I'm going to close this like that so now what this onload is basically doing is it just frees up resources when you don't need the image anymore so this is just kind of a Nuance when you're using it for something like the preview so we want to make sure we have that and now we're getting a warning and thankfully with our tone sets it's going to tell us that we need an ALT tag and I'm just going to have this as the same as the class and we're actually just going to remove the image so I'm going to save that and now it's going to be split onto different lines and then we don't have a warning anymore I'm gonna get an import icon from xmark icon so that's the close icon I'm going to close this I'm going to pass in a class name message form icon X like so I'm going to write on click we are going to remove the preview like so and we're also going to remove the attachment and we're going to save that so that should establish our preview of our image I'm going to save that so right now if you look at the website um we have nothing right now and that's because we don't have anything for our preview so what we can do instead is we're going to create a div and here is where we're going to actually have logic we're just going to miser form something like that and you can see it's already placing our text over here um we're going to go back but we don't really need this for now so I'm going to say class name message form like this and I'm going to pass in another div and this is going to represent the input so this is where we're going to be able to type so I'm going to write class name message form input container and inside here I'm going to write input like so and we're going to give it a number of props so I'm going to write class name is equal to message form Dash input so again all the styling is done with all these class I'm going to give this a type of text and the value of the message that we created earlier so right here from the U state and over here I'm going to do on change and right here I'm going to set e like this we're going to set the message over here so we're going to set e dot Target dot value and you want I actually want this to be separated out into a different function so I'm going to call this handle change I'm going to move this up here I'm going to write const handle change I'm going to pass that in just like that so now it's separated from our component and then from here I'm going to go over here I'm going to write place holder and all right send a message dot dot and now I'm going to save that and we are going to double check on our website that we have that so now the styling is not as is expected but we'll be handling it we can still type so once we have the other icons this is going to be a lot bigger and then from here we're going to create another div over here and this is going to have class name of message form icons like that and inside here we're actually going to do the attachment so we're going to use react drop zone so basically this is a package that will allow you to drop any kind of file and in this case we're going to drop like an image and you're going to be able to drag it onto the UI and it's going to be able to accept that image and we can then upload it so here it's going to take accepted files and we're going to say dot jpg Dot JPEG and dot PNG I'm going to make sure we close Drop Zone but we're going to add a few more props so we're going to make sure we can't add multiple so we're going to say multiple is equal to false we're going to say no click is equal to true and we're going to run a function called on drop so this is the function that will be running once we drop a file onto this particular component and it will give us an argument of accepted files so it's going to give us the file that we dropped onto it and we're going to set the attachment as accepted files zero and we're gonna place it in that state and also we're going to set preview and if you remember we did URL dot revoke object URL but here this is we're going to use URL create object URL so this is what you have to do when you want to create some kind of object for preview we're going to add the accepted files over here and then we remove it once we exit out where when we click on the X and actually we're going to make sure this is we're going to have like an inner component over here as a child and we're going to have get root props get input props and then open like so and inside here we're going to have a div I'm going to make sure that's closed then we're going to have dot dot dot get root props close that and inside here I'm going to have input I'm going to put dot dot dot get input props like this and close it so if you're not familiar with react Drop Zone this is essentially what you have to do to work with this particular component but this is basically the default and then from here we can kind of customize and what we're going to add is that we're going to add a paper clip icon from react hero icons make sure you use the intellisense to grab the import I'm going to do a class name of message form icon clip and on click we're going to have it open and we're going to make sure we close this and we are going to save it and with that we can actually check if this is working so over here we can see we have our input we have an attachment icon and we can click it once we click it let's add some random engine image doesn't matter where we can see the preview now so it's being saved in our state and then we can close it by clicking the x button so perfect and then from here below our Drop Zone we just want to add a little horizontal line so we're going to do HR class name horizontal rule basically gives us a line but we're going to do it vertically and we do that with CSS so we're going to set this vertical dash line so it's pretty simple and then from here I'm going to add another icon and this is going to be paper airplane icon so make sure you use intellisense so we have the import so we're going to have a class name of message form icon airplane and I'm going to say on click we have this running and then we could say set preview and then we can pass in an empty string because we want to clear out the preview once we hit this submit button and then we're going to have a function called handle submit like that we haven't created this function yet but let's comment that out let's make sure everything is working so over here we go over here we can write a message we can add some random image and we can hit submit and it's going to clear it out we haven't cleared out this in particular but we can change that in the handle submit so we can go back over here and now we are going to be creating our handle submit function so we can create it up here at this top let me close this we're going to have const handle submit and what we're going to do is we're going to do some asynchronous calls to the back end so we're going to have this labeled as async and before we go and run this function I want to I want to add some props over here so I'm going to add the props and the active chat so if you go back if you remember into our chat component we have the props being passed as well as the active chat and for your sake we're just gonna console log both of these out so we can see what's happening so if I save it and open it up right now we don't have a particular active chat but we do have props we have the on submit function so this is the on submit function that we're gonna we're going to need to save and send our message to the back end so right now we can create our own chat we're going to call this test chat and we're going to have our new chat over here and you can see that I am a member so over here we're going to go back and you can see I'm a member over here and now if you take a look at our active chat prop you can see that we now have information and this represents the current chat that we're wondering so admin is basically me or the user which is test user and we don't have any attachment blah blah blah and people it includes our personal user right now so right now this is working but if I click this button it's not going to do anything because we aren't handling that function so to handle submit we're going to be using this particular prop over here if you see on their props maybe I can zoom this in so you guys can see a little better so over here we have props and on submit this is the function that we need to call so that we can save the message so even if I send anything nothing happens so we want to make sure that's going to work so to do this I'm going to remove this and in handle submit I'm going to create a new date so on submit requires a few properties it's going to include attachments created sender username text and active chat ID so that's what on submit is needing so the first thing we're going to do is we're going to create a date so we're going to say new date like this and we're going to do we're going to change this to ISO string so we're going to make sure we're formatting this in the proper way and I am going to replace the T when it comes from this ISO string now you can probably use a date library for this but doing this manually is fine too we're going to replace also Z as well and we're going to add a time to it so we're going to say math dot floor math dot random and we're going to multiply this by a thousand and I'm going to say plus 0 0 colon 0 0. and actually this should be on the outside of the curly braces so like right there so once you save it it's going to format it so we have it on separate lines make sure I close this and then we're also going to create an attachment so we're gonna I'm just going to call this at instead I'm going to say if we do have an attachment we actually need to format this into a particular format like this this is just what chat engine accepts we need to add the attachment to something called blob and then file is going to be the attachment name so that will allow us to attach it to the handle submit and I'm going to put an empty brackets if it doesn't exist or else it'll error out and then finally I'm going to create the form which is just an object and I'm going to say attachments and the pass in at with created and we're going to pass in the date and we're going to say sender user name props.username we're going to say text colon message and then active chat ID and we're going to give it activechat dot ID so if you're wondering where I'm getting this information it's all in the basically the rest API over here you can find the on submit and it'll give you some examples of what to send so going back to our code here I'm going to call the on submit which is on our props so Props dot on submit and we are going to pass in the form and after we submit the form we also want to make sure our message gets emptied out like so I'm also going to set the attachment to empty string like so and then finally I'm going to go down since handle submit is not being called we are going to make sure we call that and with that I'm going to be saving it and now we're going to check if everything works so we're going to go back I'm just going to clear everything so clear should clear our console and over here we're going to do test and I can submit and our message gets saved so perfect I can also add an image let's add this test image and I can send and our image will load and there we go we can see our image so perfect everything is working as expected so now what we just did if I go back to the code what we just did is basically we created our new component and we styled it a little bit differently from the main chat engine and the reason why we're not we're doing that is not because so we can just style it a little bit differently it's so that we are going to be using we're going to have a chat like a chat a particular chat where we can talk to open Ai and the open AI will respond to our chat message and by doing so we need to create our custom component and create our own handle submit and we'll do this in a little bit but we're going to have to Now set up the back end to do so with that being said before we create our backend let's actually go to open AI so now open AI is kind of part of chat GPT it's the company behind chat gbt however they have their own website where you can deal with their API instead of chat GPT is more of a front-end modified version fine-tuned version of GPT model but open AI has their GPT 3 Model that allows us to use their basic machine learning or their machine learning capabilities and we can use it through in API versus just a front-end interface now note that chat gbt is built on GPT 3.5 which is not available in the documentation just yet however they are opening up GPT 3.5 very very soon so this is currently the documentation for GPT three but GPT 3.5 is the underlying underlying API that powers chat GPT so it'll be very close to what you would see hey this is Ed Rogue from the future I'm doing a little bit of a post editing because as soon as I say gbt 3.5 was not available it becomes available a week after I record so we now have gbt 3.5 available through the API so we have the power of chat GPT through the API documentation if you go to this particular blog it's going to tell you all about it and you can go to chat completion on open AI documentation and this is the documentation for chat GPT API so if you go down you're going to see some slight differences I will show you how to do them in the final GitHub repo there will be another file and I'll show you where that file is so that you can use the newer version however this recording is still going to be using the older version but switching over to the newer version will be easy I suggest just following the video and at the end you can change the file and you can see the differences the result will be the same except it'll just be a more powerful version of what you see in the completed app of the current recording anyways back to the video so now make sure you sign up and log in I have a link in the description below and you can get a free trial from my understanding the free trial gives you like 18 Worth or something like that I don't know if it's still the same but that's what happened when I got it so you can use it for free and the 18 is a lot but make sure you realize it expires for me it expired so now I am paying for the usage but the usage is extremely cheap like there's no way if you even make it to one dollars a payment it you've used the API quite a bit so even if you use it quite a bit you can see I've I've I haven't even managed to use one dollars worth so right here I used one cent so far and I've used it a number of times just for developer purposes I'm not using it extensively but still you're you're not going to pay that much if you're paying so if you go back over here you can see the API Keys now the secret key if you create a new secret key you can go like this and I'll show you the secret create don't worry I'm going to be deleting this so I'm going to copy this this is a secret key you'll get these and once you have the secret key you can never um see the secret key again you have to copy it at that point in time so if I have this secret key I can never see this so if you just mess up you can just obviously revoke the key you're also going to have to have like at least one secret key but um you can just delete whichever one you want so I'm going to regenerate delete this key I'm going to be using this just for purposes of you you can use this so once we go in now that we have the secret key now we can set up our back end all right with that I'm going to open up the terminal and I'm going to close the server for now and I'm going to do CD dot dot so I can go into the Parent Directory of this folder and I'm going to create a folder called server I'm going to go into that server for my terminal and here I'm going to run npm init Dash y so this will initialize our npm packages so we have a package.json and then Dash y represents saying yes to every prompt that it gives you because there you were just using the defaults of the prompts okay and then from here I want to create a DOT EMV file dot EnV and I'm going to set the port to be one three three seven so now if you remember back in the dot emv.local we set the Local Host to be one three three seven this is the gonna be the port that we're going to be using and over here we can create our open API key like this and I'm going to copy and paste what we had for the opening eye key over here and this is the secret key that we're going to be using to connect to our open AI or open AI API and I'm going to save it and over here I'm also going to create a new file called dot get ignore so that when we push this repo up we do not want this to be exposed publicly so we want to make sure this is getting ignored so we're going to have to add the environment variables on whatever hosting platform we set up later on but this is for local usage only and we need to make sure we ignore that and we do that by the dot EMB we also want to ignore node modules because usually that's too big of a package and we just the user can install them the packages themselves okay and then from here I'm going to install a number of packages for the back end so I'm going to install Express which is a backend framework for our apis body parser which is a simple package that will allow us to grab requests and be able to parse our bodies and then from course is going to be allowing cross-origin resource sharing we're allowing that to happen dot EMV will allow us to read the environment variables that we just created helmet is just going to be giving us a little more Security on our apis Morgan will allow us to log anytime the API gets called it's just going to automatically give us information and those are the packages that we want to start by installing and while it's installing we can go to package.json and we can add some Scripts or we can change we can add type colon module so generally when you have a node you can only use what was it require because es5 because that's es5 syntax but type module allows to use es6 which is using the import I mean not necessarily es6 per se but it allows us to use the importing system that es6 has and then from here we have the scripts and I can write Dev like so and I can write nodemon index.js so we haven't installed known men which is the next thing I want to do so I'm going to do npmi Dash capital D so we want to install this as a Dev dependency so it only exists in the development environment so here I'm going to write node Mount like that so the packages will be created in a separate little property over here and it seems like okay so I did mess up I'm going to not save this because I installed it but also change this so I have to rewrite the type like this yeah the reason why that happened is because I installed it and then it added Dev dependency over here but I also tried to change it at the same time so it's going to cause a conflict so I'm rewriting what I wrote so Dev and I'm going to have node men index.js so now I can save it this will be able to run our index.js file that we have not created yet so that's what we're going to be doing so create a new file and call this index.js and in here I'm going to do a lot of imports and I'm going to be setting up our server so to do that let's do import Express from Express like so and then I'm going to import body parser from body parser and we should use intellisense so import course from Chorus this one doesn't seem to pop up I'm going to import dot EnV IR from dot Envy import helmet from the helmet package import Morgan on the Morgan package like that and then also I'm gonna create a comment say configurations and I'm going to use Dot env.config I'm going to run our app so this is a lot of just boilerplate code that you generally just have to write it's generally the same usually every single time especially for these packages but these are one of those things you just have to set up once and then your package or your server or app is basically ready to go sorry you app using express.json and then we're gonna set up helmet like so and then for helmet we need to configure cross origin resource policy or else we'll be denied access to access from the same or from a different server then app.use Morgan and we're just going to set the settings to be common so this sets up the Morgan settings body parser has to be set up as well we're going to set this as Json we're going to set a limit of 30 megabytes and we're going to say extended is going to be true and then we're also going to have to set up the body parser that URL encoded and I'm going to set this a limit of 30 megabytes as well and then we're going to set extended to be true and then I'm going to do app.use course and then from here we're going to make sure we start the server so to start our server with Express I'm going to set the port like this set process.env.port so that is the environment variable over here and sometimes the environment variable might not exist so we just want to make sure we have a backup so 9000 will be the backup Port but primarily we're going to use 1337 as our main and then we're going to do app.listen I'm going to set this as port with a callback function over here I'm going to say console log I'm going to put this in template strings I'm going to say example app listening at http colon slash localhost and we're going to set our Port so this is just a console log showing that our server is running at this point so to do this I want to make sure our server is being run so I'm going to open up our terminal and then we can run the command that we wrote so npm run Dev and as you can see we have our console log everything's running so now this there's no point going to it because it's going to show nothing there's nothing there so we can just cancel it for now we just want to make sure there's no errors so make sure you don't have any errors going from now another thing we want to set up is going to be open Ai and making sure we're connecting to our index.js with that so I'm going to close this terminal and there's a package that we want to use for node and it's a link in the description below you're going to go to this GitHub with openai node.js and we're going to be installing open AI so this gives us more refined access to using open Ai and it's kind of how they want you to use it so I'm going to do npmi with our terminal open AI while that's installing we can go back to the GitHub and we can essentially copy most of this I'm just going to copy these two lines this is what we're going to be using in our routes but we're just going to ignore that for now so open AI setup is pretty pretty simple so over here I'm going to just say open AI configuration and I'm going to paste what I had so this is basically the import so I'm going to move this up and I'm going to be changing this to an import instead so I'm going to do import configuration and this should be from openai get rid of the the prints so we have that imported and over here we have this and we also have our open AI API key which is essentially did I is that correct open AI API key no that is not correct so make sure you have the same environment variables and we're going to pass that in over here and then from here we have new open a configuration this will allow us to basically call our routes anytime we need so using that we can save that and we can be using open AI for our configurations and one thing to note I want to make sure this is exported we're going to be using this particular variable in or in another folder or another file we're going to create a route file for that and so to do that let me close this terminal I'm going to close all these files it's a little messy close all of this and I'm going to go back to index.js and then I want to create a new folder and we're going to call this routes and one of the route files we're going to have is going to be open ai.js so this will represent all the routes that will point to open AI typically we're gonna usually have another folder called controllers so that's like the standard best practice where you can put the functions of the routes or what the routes are doing into another file and place all the functions that are relevant over there but because this is a much simpler app it's much better to just have the routes over here we don't really need to decouple the routes and the controllers in this case so we're just going to have that all in one section and again if you remember the code architecture like I mentioned your code architecture is very dependent on how big your application is how many files and what best suits the application so in this case we don't need to create more files for no reason so we're going to import Express from Express like so oops so this will allow us to use a router and I'm going to import axios from axial so we have not installed axios so I'm going to do that I'm going to do npm I axios like so we'll close that so axios is basically a way to call apis this is a convenient way to do so I'm going to pass in dot EMV because we're going to need to use the environment variables and you always need to configure it for each file and I'm also going to import open AI so this will grab the open AI file from the index.js so I'm not exactly sure I think you need to be very direct with what you import but I might be wrong but either way this will for sure work and then we're gonna configure our DOT EnV over here and then from here I'm going to set up our router and this is going to be Express dot rather like so so this will allow us to use our routes in a different file so I'm going to do router dot post and the route that we want to use for this I'm going to call this text so this endpoint will have a slash text to call and we're going to have an async function because this is going to require some API calls and I'm going to do a try catch block over here I'm going to say error over here and I'm going to say console Dot error it's an error like that along with passing the error message just in case it doesn't work out and I'm going to do res dot status 500. I'm going to pass in dot Json and I'm going to pass our error message in our response so this will return an error if this part doesn't work and what we want from the body is going to be the text and the active chat ID and I'll come back to what this will will be doing but before that we have this router.post text we also need to export our router because we'll be using this in our index.js to make sure we connect it and then once we go to our index.js file I'm going to have a routes section and I'm going to say app.use slash open AI comma open AI routes which is something we haven't defined just yet and I'm going to go up here and I'm going to import open AI routes from the routes file so slash routes and then open AI dot JS make sure when you're viewing this you need to identify the file type it is not like with fight you don't have to ignore this but you do have to keep these to work so once you do that we have this route basically set up and actually I messed up the capitalization so make sure these are correct so open AI routes like that so when you want to hit this particular route right here you're going to have to call HTTP colon slash localhost colon1337 slash open AI and then slash text that's how you hit this particular route so anytime you have this and it opens up to routers this will be the parent route so this is always going to be a prefixed prior to this right here and whatever routes we want to add later and for now we're just going to keep it like this and we're going to keep it simple I want to make sure we console log the text when we get it back and also I'm just going to return the text that we get just for testing purposes and we're going to be doing other stuff with it so I'm just going to pass in text like that so we're just basically returning the text that gets inputted so I'm going to save that and save this as well all right so from here for now I'm going to create a new folder in our source directory I'm going to call this state and inside the state folder we're going to create a file called api.js so what we're going to be doing is we're going to be using Redux toolkit and Redux toolkit query for that matter so what this essentially does is we are basically using Redux except Redux toolkit is basically a way to abstract out all the complicated all the complicated boilerplate so it's like it shortens the amount of boil pick code that you have to write and then the Redux toolkit query allows us to make API calls in a very simple way and store it in our Redux store so by using redox toolkit and Redux toolkit query we can make very simple API requests and then save those values into Redux toolkit with you know some differences there's going to be some differences but it makes it makes it pretty convenient so in our file api.js I'm going to be importing create API fetch base query as well and we're gonna grab it from at reduxjs slash toolkit query slash react and then from here I'm going to do export const API I'm going to create the API so essentially we're creating the slice that's what they call the store in basically like a section of the store in the Redux Redux store basically so we're going to have create API that allows us to do that and then we're going to have a base query so this will give us the base URL and if you remember we're going to be using the environment variable that consists of the base URL we created before so I'm going to do import dot meta dot EnV dot Vite base URL so by providing this we can make API calls with this particular URL starting from here so we can do the base URL localhost and then we can do slash open AI right here in the routes and then we can also hit the slash text as well so we'll be doing that in the following lines so I'm going to say reducer path and we're going to call this main so reducer path represents the name of this particular slice and then tag types represent where the files or where the text or like the data that we're going to be saving but in this case we don't really need to save any kind of data it's just going to be automatically posted into the backend servers so we don't really need to store any data on the front end really we just have to retrieve the information from their API and then from here I can do post I'm going to call this endpoint post AI text so this is basically the query call that we'll be using to make an API request over here and we're going to use build dot mutation now I know these are all these fancy terms for Redux took a query and that's the one thing I don't like about Redux toolkit Corey per se is because of all the abstraction it's not quite evident of what some of these things do in the documentation I will say is a little bit confusing despite being comprehensive this is essentially any time we're using like a post call that's why I prefix this post build mutation will allow us to make a post API call to the back end and we're going to call this query over here and the query will give us a payload so we can pass in whatever payload and I'll show you when we use this we can pass this in over here I'm going to create the URL and we're going to say open AI slash text so that represents the URL we just I was mentioning before the base URL will be prefixed onto this and this is the URL endpoint that it calls and we're going to call this method post like so and we're going to give the body of the payload that we will send to the back end I'm going to save that so we have that particular endpoint and all we have to do is if we want to actually use this API so this is not actually calling the API this is just creating basically the function that will call the API so we need to have a hook so used post AI text mutation and it's going to come from our API component so now actually if you just did this first you can just do use post and now it will automatically pop up but anytime you use a post mutation it's gonna it's going to start with use NB suffix with mutation if you're using a get it'll be a little bit different so just be aware of that it's different for using a mutation versus like a get request I'm going to close all this and then from here I'm going to go to our main file and we're going to be setting up the last parts of Redux toolkit so this is the only thing we really have to set up once and it's pretty short so first I'm going to import provider from react Redux and then I'm going to import configure store from redux.js toolkit and I'm going to import setup listeners as you notice I'm writing it over here not in curly braces because if you do curly braces the intellisense doesn't pick it up so if I do that it pops up and this actually should be from my understanding no dist like that and then I'm going to import API from our DOT slash state API but I'm going to just do at because we configured our path before and then from here I'm going to do export const store and we're going to configure the store and we're going to pass the reducer of the API dot reducer path that we created like this and we want to just pass in the reducer from the API so this will set up the reducer that we have and then middleware is we're going to pass in get default and we just need to do get default Dot concat API Dot middleware so these are just setups that you want to use and this is by default what you need to do for Redux toolkit and using Redux toolkit query so we just want to pass it in to our reducer just like that set up listeners and we're going to do store dot dispatch and the last thing is around this app we're going to set provider store is equal to store like this I'm going to make sure we close this over here and once we save it this will essentially allow us to use Redux toolkit so not even that bad we've already set up Redux toolkit but just creating this API slice we created an endpoint that we want to call and then we are setting up this configuration of the store and that's all we need to do and now if I go to our components we can then use this particular hook and make an API call essentially we're going to be using this use post AI text mutation in a new component over here I'm going to call this ai.jsx and I'm going to use rfce to create our code for this and what we want to do is we're going to have most of the jsx and the UI elements from the standard message form and we're going to be reusing them in the aigsx however there's going to be some custom logic that we don't want from this same component for example the handle submit we want our own handle submit that's going to hit our backend instead of the chat engine back end and we want to be able to call open AI on our back end using our own version of the handle submit so to do that we are going to take out most of this these elements and we're going to create a new component as well and we're going to call this message form ui.jsx and we're also going to use the rfce to create the boilerplate so I'm going to save that so now if you're thinking about reusability and reusability with components in react this is like a prime use case because we're going to be using this particular standard message form in multiple locations now I always recommend some people when you first start the Temptation is to make everything reusable but you have to understand when you make something reusable it's very time consuming and takes a lot of effort to make components reusable especially if you're using like some massive form and you have a second massive form and you're trying to make that massive form reusable even though the forms are very different then you're going to waste time trying to make that one component that's extremely reusable and then if you never use that component again you just waste a lot of time so you always have to consider when you're truly reusing a component I've seen so many people just waste so much time just by trying to make things reusable I've been I've had to build tables that are reusable in like 20 different locations but sometimes it would have just been better to just build Separate Tables for certain situations sometimes making things reusable is not as easy as it seems so it doesn't always save you time so you have to be very careful of what you make reusable people over abstract and it's a huge problem I've seen it's always over as I keep your code dry that's one thing but trying to make everything dry as possible is not always the best option anyways forget my rent let's go to message form UI I'm going to go and paste everything that was in our standard message form over here in our message form UI so now we just have a lot of squiggly errors so we're gonna have to go back and we're just going to go and copy and paste everything up here so I'm just gonna paste it we have you stay we have all of these but now in this we want to be able to pass some props in here so that we can definitely change and have different versions of the message form UI depending on the component that we want so we're going to do set attachment message handle change handle submit so we want to be able to show all of this but also I'm going to pass in preview inside because this is going to be Universal throughout multiple components so I'm going to do use State like that and pass that in and we shouldn't have any errors after that so notice I didn't change anything in here particularly I just added some props over here so we can pass them in so if we're going to use message form UI we can pass in the proper properties so notice I'm passing and handle submit so that we can have different handle submits depending on the component that we're using so over here what I'm going to do is I'm going to import message form UI and I'm going to just grab all of this and place in our message form UI like this and what we want to do is going to pass in set attachment message as well and then handle change I'm going to pass in the handle change we had like so and then handle submit as well as handle submit over here so we're going to keep this handle submit the same and everything else we're just passing in we do not need preview anymore so we could just delete that and then the standard message should be exactly what it was before now we do have some warnings so we'll just get rid of this because we're not using them in this particular component anymore and I'm going to save that I'm going to open up my terminal right now my website is running so I'm going to go back I'm going to refresh and make sure we don't have any errors in our console so let's go back to console we can see no errors everything is working as expected is it working and let's send it and as you can see it's still working all right so I'm going to close this out and now I want to do the same exact thing for AI right here so now we can use the same component that we've done or we used before and we could just pretty much go down over here in our standard message form I'm going to copy this I'm going to close this over here and I'm going to paste it inside our return and I'm going to make sure we import message form UI as well and for now I'm going to go back I'm just going to copy and paste all of this and we can just make sure we have a react and use State over here we're going to paste paste that in so now we'll have most of what we need so we also need to pass in the AI and the components and the props because if you see standard message form has these props over here we need to make sure we pass that in so now we haven't used this particular component or it's not being rendered out anywhere so what we're going to do and to pass that in so we're going to go over here or we're going to make sure we save it we want to go to the chat folder go to our index.jsx and we want to take a look over return this is rendering out our standards meshes form but we need a conditional where we render out this particular component AI component instead in certain conditions so the way we are going to do it is we're going to depend depending on the chat title like the name of the chat room we're going to render out different components so the way we do this is we're going to grab the chat props dot chat if it exists we need that conditional just in case and then we do starts with AI chat so if the title of the chat room starts with AI chat then we're going to render out our AI component so depending on the title we are going to have a different component or different functionality for our send function and we also make sure we have to pass in our props as well as our active chat now of course you can change the functionality depending on whatever your use case or whatever you would like to do but in this case we're just going to go by the title which makes it kind of easy so from here I'm going to import AI from Custom message forms now I'm going to change this to even though it's a little longer I'm going to change this to components like that because this is cleaner that way without all the dots it's hard to know where it's coming from but with the at slash components it makes it kind of easy to understand what's happening so we're going to save that and as you can see with the handle submit we still haven't changed anything over here so now what we're going to do is we're going to use the use post AI text mutation finally we haven't done any API calls yet but this is how we can make an API call using this particular hook so what I'm going to do is I'm going to say const trigger and I'm going to set use post AI text mutation making sure I'm using the intellisense to import it as well so when you so there's a difference between if you use Redux toolkit query this is a little different if you're using a get call or a get query or something that just reads information this will look a little different it'll just be like use get something query instead and it will instead of returning an array where you destructure an array you would be the structuring object instead and it'll be called Data so you would grab the data information however we're using mutation so that we have a trigger and this is a function that will trigger the actual call and we want to be able to trigger that call in our handle submit function and so most of this is going to remain the same so we're going to have blob attachment we're going to pass that into our attachment over here with the date the username message and active chat ID the only difference is that we're going to both submit our message but we're also going to trigger our API call and our API call in the back end if you remember we're going to be calling open Ai and open AI will submit a message or we are going to get openai to grab a message or respond to the message that we have and then send them back and post it as another like a chat bot user and I'll show you what I mean so if I go back to my completed application over here so if I go to AI chat test I would say how's it going if you wait a little bit AI bot Steve responds is going well thanks for asking so basically this is a response coming from openai so basically what I'm doing is I'm grabbing this information I'm submitting it to open Ai and then open AI will come back with the response and in the back end we are going to post this as a different user and submit a message on the chat application so it feels like you're talking to open AI or a bot but before we create the chat room and test that out we need to create the logic on the back end now but first i'm going to say we trigger and we want to submit the form to the back end and just to test if that is working so essentially what we're doing right here is we're grabbing this form we're sending it with the trigger which means it triggers this particular endpoint in the API file and it's sending the payload to our URL so in the body of our post API call we're sending the form data so but we're basically sending this particular form information to the back end and let's make sure everything is working so we're going to go and open up our terminal make sure our server is running with npm run Dev and let's go and create a new chat form and we're going to call this AI chat so it's case sensitive so I got to make sure everything's correct so if you go back to chat I said AI chat underscore so that needs to start with that and test we're just going to create it and we have our test application and we're just going to say hello and we're gonna it's gonna create the message but also we should be hitting the back end as well so right now we're essentially grabbing let's see yeah if I open over here we're just grabbing the text for now so that's all we're sending to the back end at the moment actually sorry it's not that's not all we're sending but I mean we're just grabbing the text from our form so this form is it provides all this information but we don't need all this information we just need essentially the text and the active chat ID so right now everything is working as expected and as you can see right here this is just a response from malter or sorry Morgan sorry Morgan Morgan is logging these messages it shows you when it the API endpoint has been hit and the status code is 200 which means it's a success so it shows you which endpoints we're hitting and gives you information so it's pretty useful to have that on hey guys this is Ed bro from the future again with some post editing so the following section you're going to see is you're going to see me build this openai.js file and you're going to see something like this await open AI that create completion just note that this is old GPT 3 versioning now if you want to use gbt 3.5 in the routes folder I have a file called openai new DOT JS so in this file I have a comment right here that you can uncommon out and this is basically everything you see in the video except upgraded for 3.5 now most of the code is pretty much the same there's going to be slight differences like create chat completion versus crate completion and you're going to see model and you're going to see messages I wrote a lot of notes that you can see and read to see the differences that you might see with gbt 3.5 now the video is going to go through using gpt3 you can follow that but at the end you can just copy this over on the GitHub repo replace this file with this code and it should work exactly the same so most of the code is going to be the same with minor changes and what you'll see in the result is that there if you see right here what I did I did some testing and this is essentially right here this is a result of some of the chat GPT version so there are much more it explains things much more clearly and a lot with a lot more detail versus hi how's it going over here and it says go it's going well thanks for asking this is the old version it's much more straightforward and it doesn't really spend the time to explain things so this verbose model is the newer chat GPT version and they do they it does sound a little more cheeky in my opinion so you can do some stuff with that but anyways let's go back to the video just wanted you to note that this is what's going to happen in the future sections all right so in our code in our backend we're now going to make the open Ai call or we're going to be writing the code that will make the call so I'm just going to delete this console log and over here I'm going to write response is going to be equal to a weight open AI dot create completion so this is coming from the package open AI that we created earlier so this is basically going to make our API call to open AI for us and all we need to do is submit the properties that we need to complete this response and the first thing we want to do is get the model so text DaVinci zero zero three so now I'll give you a brief rundown of some of the open Ai and the parameters that you're going to have to send so over here if you go to the playground section of open AI so this is right now I'm in the docs if you go to the playground section you can see all the models that are available to us that we can use now the difference between all of these models is pretty subtle but the text DaVinci 003 is gpt3 and basically it is the one that you most likely want it is the most accurate and most recent version so if you use c da Vinci zero zero two that means it's an older version now these other ones Curie Babbage Ada now these are all in a way a more inferior version of DaVinci however these do have use cases because they're cheaper so if you ever use a situation where you're just classifying something or doing different things these are the models that you would use so you can save more money on these models and you can even show more models and see other versions but these are generally not what they recommend but you can see all their information on the models section of these documentations so it'll explain what you use every single one for but for the most part if you're just experimenting text DaVinci zero zero three is the one you want it is the most expensive most expensive but it's still quite cheap and then from here the next thing we're going to add is going to be the prompt which is just a string so this is the string that we're going to be using and then over here the next element is going to be temperature so temperature is pretty easy to understand so if you have higher values it'll make it more random or low lower values will be more focused now if you understand machine learning generally it you can kind of see it as a creativity Factor but it's not always a creativity factor it's just more random when it comes to higher values and lower values is just you're more likely to get repeated values and a more strict definition of like a more accurate version of what you would like uh response it will directly answer your question or it will directly address your concerns so it won't try to be creative or it won't try to do anything random as well and then Max tokens is the next thing we're going to have but Max tokens determines how long you need the context so for example the response the length of it is going to determine how much Max tokens there is a limit to how much you can get so 4096 is the maximum amount in our case we're just going to use 2048. and then top Dash top underscore p is very similar to temperature you can only use one or the other um but you generally I mean you could put both but you generally don't want to change both and then there's also let's see frequency penalty this is the one that you just don't want to make sure like you tell it not to repeat itself as much as possible presence penalty is another thing we do uh penalize new tickets but based on whether they appear in the text so far so these all indicate whether you want your responses so now a lot of these parameters you can play around with it I would say they give a decent change but some most of the time it's dependent on the prompt so the prompt is by far the most impact of what you can get so we're going to start by writing our prompt I'm going to write text so we're passing in the text that we're grabbing from the front end we're going to pass in temperature we're going to set that to 0.5 we're going to set max tokens to be 2048 and notice it's in snake case so underscore instead and then we're going to do top p and we're just going to set this to 1. we're going to grab frequency penalty and we're going to set that to 0.5 presence penalty to be zero so that is basically open the eye and how we make an API call and after that we're going to await and we're going to use axios and the reason why we're doing this is to make an API call to the handle submit function so we're essentially doing what the handle submit is was doing originally over here with the on submit but we're using it from the back end so if you ever wanted to take a look you can go over here this is over here and the rest page this is where you can find the information and if we go back I'm going to grab https API chat engine dot IO slash chats and I'm going to pass in active chat ID slash messages slash and then comma I'm going to pass in text as well and if you ever look at the response it's kind of like the response structure is a little like it's quite nested so we usually do response.data which is pretty standard but then we have choices and we want to grab the first choice and we're just going to grab the text so that's how you grab the text of the response and then over here we're going to pass in some headers and we need to pass in project ID username and user Secret so I'm going to say project Dash ID and we haven't Define these environment variables just yet but I will do it shortly so essentially a lot of these will be similar to what we wrote in the first or in the front end so this is going to be user Secret and again this like this is all mentioned in the docs so you can take a look if you need so bot user secret like this and we're going to go to our environment variables and we're going to be setting this up so over here I'm going to say project ID is equal to we're going to go back to the dot in v.local grab the project ID over here and pass that in and we're going to create a bot user name and I'm just going to call this AI but Steve just to know that this is the bot name and then from here I'm going to say bot user Secret let's say one two three four like that so what we need to do is I'm going to grab the username go back to chat engine over here I'm going to go to users and we want to be able to create a new user we're going to call them Steve with one two three four one two three four and create this person so now this user exists and no one's going to be able to log into this particular one I mean I guess you can but you probably should have this like a different Secret but essentially this bot will be pasting information coming from open AI automatically once we have the settings configured and then once we have that information we also want to make sure we just send the text that we get from open AI and return it in our API call even though we're probably we're not going to use that it's more that we just want to know that this is a response we get from the text and but with that let's actually test everything is working as expected so I'm going to grab this I'm going to write console.log I'm just gonna paste that in over here I'm just going to say response data like that to make sure we can see what's happening and also I can probably just console log rec.body so I'm going to do that just so we can see what's happening so I'm going to save that and now we can go to the front end let's go over here and we are in the AI chat Hey how is everything I'm going to send it and let's double check everything is working so we do have a 500 error it seems so let's open it this up something is not quite working all right so the reason why it's not working is there was a missing slash so it was original like this so want to make sure you have that slash the uncomment the console error and I'm going to save it we have a active chat ID there's one thing to note that if you go to I have a second one but you need to add your user so we're going to do let's go back I forgot his name so if I go to dot EnV AI underscore bot Steve like that you want to make sure you have that user in that particular chat so if I go over here AI chat underscore test and I say how is your day going I'm going to send it my day is going well thank you for asking how about yours so perfect so now we have the AI bot talking to us perfect so if I go under here I'm going to make sure now I can just delete everything if you take a look my date is going well this is the response that you're getting from openai and you know how to grab the text with response.data.choices like this so I'm going to delete that now I'm going to save it everything should work as expected with this particular endpoint now and so with that we basically have our AI chat room where we can talk to open AI bot is pretty simple not that bad we're calling open Ai and making sure that message gets posted as a different user so that is perfect so now the next thing we're going to do is we're going to look at the AI code so the next thing is going to be the code chat room so basically it's going to be the same thing but it's going to respond with code and complete our code if we need to so if I do like function um capitalize all all letters if I just do that something like this and I send it let's wait and see return function if input so we basically have all of this now this is not um organized and formatted but basically this will give us the code and it'll just basically uppercase everything so this is how we can use this chat chat room to write code for us all right so let's get started so now everything else already set up um the AI code is very very similar to what we just did with text but I want to show you how easy it is to set up everything now that all of this like Redux toolkit query all the back end is set up once you want to add a new API we'll you'll see how easy it is now so once we have over here we can just go back to the API file and we can just do the same exact thing we could actually just copy this paste it over here and we're just going to call this AI code like this and then we're just going to change the text to code and keep everything the same and over here I'm going to do use post AI code mutation and in our custom message forms I'm going to create a new file I'm going to call this AI code.jsx inside here I'm going to do instead of actually using the template we're actually just going to copy and paste over here everything that we have for AI I'm going to change the name though so AI over here make sure I oops select both of these I'm selecting both of them with alt or option depending on your machine so AI code will be set up like that now the only difference is going to be this is going to be use post code mutation so we're just going to change that actually I'm just gonna select both of them and write code mutation like so and save it and over here in our chat we're going to be adding the same exact thing except this should be called AI oops AI code like that and this should be AI code like so make sure we pass that in we're going to change this to at slash components and we're going to pass that in as well and this file everything should essentially be the same thing so we still have trigger we can change this to trigger code if we wanted this like really differentiate this name can be anything really and we should essentially be hitting our code endpoint however we have not created that endpoint so we're going to go to our routes over here and we're going to copy the slash text endpoint and paste it over here and this can just be code instead and then from here this model should be code right here we're keeping the name text even though it might be sending code since they're both the same format and we're going to make the same kind of post as well and we're just going to keep everything the same so this should be code the only thing that really changed is the model itself so I'm going to save that and let's make sure all our servers are running we can go back we can see over here let's create a new chat room AI Code test once we have that we need to make sure our bot is in that application so I'm going to refresh this particular page we're going to see AI code underscore test and we want to add our members so now I know we have to do this manually but this is kind of how you would do it because the chat room is just No One's Gonna automate adding the bot so I'm going to grab the bot username over here I'm going to paste it and then I'm going to save it so now that user should be in here I'm just going to make sure we have ai bot Steve we could have added it over here actually but it's fine so once we're over here I'm going to say function make snake case and let's see what it responds with and actually we do seem to have an error let's look at the request fill with status code let's make sure so now just remember if you have any network issues you can just go to the network tab in our inspector and just you can check everything that's happening so open AI slash code seems to be the correct route and we have a post and we're getting a 500 internal server error so now we can go to our application and it does seem we're getting some kind of error when we're hitting this so let's double check what is happening so to debug this let's actually just console log what's happening with our response and I'm just going to copy this instead so we can see the text to see if this is actually happening also I want to make sure we have a text over here so when you're debugging you always want to figure out where the error is happening so we have three points of possible errors right here here and here we always want a console log after each part just to see where which console log we are not getting and finished Quest so we just want to make sure we can see what's happening now if you look at the console log we have this very big long error and that's coming from this console.error I'm just gonna comment that out so we can actually just see where this is having issues so let's double check and I'm just going to copy this again and let's actually see we're going to error out again but this time we can see what's where we get to so we have text function make case and it seems like we don't even hit this particular response so we haven't even got to this point so let's actually debug what's happening so now the error that was given giving us back it was saying 404 are not found basically it was not able to find what uh it was not able to make this request successfully because it could not find it and I wanted to I made a lot of messages over here just to see what's happening just to see what the error is all about so I went over here I did console.air I showed error.respons.data.air and I was able to grab that from this big object over here that originally I was console erroring like this and I was able to find the error message just to see what's happening and I wanted to show you guys what that is I already knew what the answer was I just wanted to show you the message over here and it was that the model does not exist and I realized this over here model code DaVinci zero zero three it should actually be zero zero two instead just to see what's happening or like just to tell you that the model needs to be zero zero three there's no zero zero three version of the code model so I'm going to go and pass this over here I'm going to be sending it and we are going to see that there is no error and we're waiting for a response it seems and there we go we have a really ridiculous long function so if I were just well they added a lot of comments and it seems like it's cut off so if I were to go back and I did function make snake case I would it would look like something like this or a snake interesting I don't know what oh I don't know what it's giving me over here but we do have make snake case make camel case and it seems like there's some kind of extra configuration that it's sent but let's just delete everything over here I just wanted to show you what it's returning so we're gonna return and as you can see after all that debugging we were able to figure out what the problem was with that we finished the code section I'm just gonna delete all these console logs because we don't need them anymore because we verified it is currently working so I'm going to save that and just close this out all right so the final thing we're going to be building is going to be the AI assist so this chat room is going to allow us to have an autocomplete of what you're trying to write so if I write can you help me with my and then I just hold off it's going to give us information that will autocomplete and if I hit tab it's going to complete it and grab that information would you be and then if I do it again and I press backspace it's going to remove that other suggestion so this one's a little more involved so if I go back I'm going to start with the API file and over here I'm going to copy this I'm going to call this post AI assist and change this to assist over here and I'm going to change this to use post AI assist mutation if I save it we can go on to our custom message form so to create our component I'm going to go to our custom message form I'm going to create a new file called AI assist dot jsx like so and what I'm going to do is I'm going to grab the information from AI code copy everything and paste it over here and I'm going to grab this AI code section change this to AI assist I'm going to go back up change this used post AI code mitation I'm going to change this to assist to grab the information that we're using and this is going to be trigger assist so this one's going to be a little bit different from the other ones but we should be able to do what we need to do all right so the way this is going to work is that when we type a few characters we're going to wait for the user to stop typing for a little bit for it to Auto Complete because we don't want to send an API request on every key press that the user does we want to make sure that after a few seconds and making sure when they stop typing that's when we'll send an API request so we're going to use something called debouncing to do this so the first thing we're going to do is I'm actually going to go back to our code I'm going to remove trigger code form because we're not doing anything with handle submit this should be what you would normally do by default however we're going to create a new value called debounced value and we're going to use a hook that we will create and we're going to call it use debounce and we're going to send the message every a thousand seconds and up here we're going to create a function and we're going to call this use the balance and it's going to have a value and a delay to represent this is the message and this is the delay and in this use hook we're going to do debalanced value like so we're going to set debalanced value and we're going to have use state and I'm going to pass in the value so this is the value that will be debalanced and the message we sent and then from here I'm going to use use effect and make sure we use intellisense and inside here we'll have a call and we're going to say const Handler so we're going to set timeout and inside this it's going to be another callback function and we're going to set debounced value of the value and we're going to have it delay every few seconds like this so this is the Handler function and this is basically what's going to allow us to debounce however whenever you create a use effect for something like this we also want to return and we want to make sure we clear the timeout so we're going to use Clear timeout and we're going to pass in our Handler so this is so we don't have any problems when we don't close it out and over here I'm going to pass in the value and delay for use effect trigger any times these two values change after this I'm going to return the debalanced value as well so this is our use to balance function that will handle the set timeout and then from here I'm going to go down I'm going to have a use effect another one as well and if debounced value does not exist we're not going to do anything otherwise we're going to grab the form and we're going to put it into an object the form that we need and we're going to use trigger assist to pass this form in so making sure if once we have a debounce value that's when we're going to make an API call and we want to make sure we trigger this with the debounce value as well now we're missing a few dependencies but we only want this to happen when the debounce value occurs so instead we're just going to do es lint disable line and we can write exhausted depths but I forgot what the particular linting error is so that is our debouncing however that still won't cover the extra text that pops up so if I write can you help me there is a string that pops up behind the behind this input and it's in uh basically grayed out characters so the way to do this is that we're basically having two inputs right on top of each other it's just one of them is in front which is this one this is in the back and this second one has the added extra information otherwise the second one has the identical it also has can you help me so we are positioning it in the correct spot but the understand is added onto the second one well the first one just has can you help me so that's kind of how this kind of works so it's a little tricky with CSS you need to place something on top of each other and you're having two inputs right on top of each other um masking one of them essentially so the way we do this we're also going to have to handle the handle key down basically when you hit tab or enter we are going to use that other complete message so we're grabbing the second one we're replacing the first one with the second one that's what we do when we hit enter and tab so the way to do this is we're going to have a function called handle key down and this will effectively be put on the input and we will pass in into the on handle key Handler and in this we're going to have an event and we're going to say handle enter and tab and basically in this function we're going to grab the event handler and it's going to be e dot key code is equal to 9. and E dot key code is equal to 13. so these two characters of enter and tab is represented by 9 and then 13. and we also want to make sure that the page doesn't refresh so we're going to do e dot prevent default and we are going to set the message which we haven't created yet actually we did I believe we did yeah so we have the original message over here we're going to set the message to be a message plus a second text and it's going to be append text like this so a pen text is going to be another state that we're going to add so if I have come over here I can do append text set append text and this is going to be the extra appended text to our input so when we hit enter and tab we're adding this appended text to that particular input so that will help us add the autocomplete functionality and then after this we're going to set the appendatex to be empty to clear it out and then finally we're going to have another final use effect and it's okay to have like multiple use effects this is this serves one purpose which is the debouncing this serves the append text purpose and we're going to say if result assist dot data dot text if that exists we're going to set append text to be that particular value so I'm going to grab this and pass it in there and over here I'm going to have result assist like so and I'm going to do eslint disable line like so so now what is result assist so now what this result assist is is going to come back from our back end so right here in our use post assist mutation we can grab the result that comes back from our back end using result assist so when we trigger the assist we're going to wait for the response to come back with information and we're going to use this information to replace our append text so this is going to be the completed result from open AI once we grab it from the back end and then we can append that to the original message using handle key down so this is where we set it so hopefully that makes sense it's there's a lot of steps to this it's a little more confusing than you would think but it's a cool effect so we're gonna write a pen text and we're going to pass this in so now we did not add this to message form UI message form UI does not have this functionality where we pass in the append text and we have a second input behind but we're going to be handling that now and we also need to pass and handle key down so basically we've created these functionalities but we do need to pass them in to message form UI and only in the situation where we actually have that information that's when we pass it in so over here we're going to do a pen text I'm going to say handle key down and over here we're going to go to our input and I want to pass in on key down I'm going to say handle key down so that will pass in a function that we created that will run this command enter and tab and I'll provide that functionality to this particular input and then also we only have one input but we don't have the input for the autocomplete before we hit enter or tab so we want to say hey if there is in the pen text in this component that's being passed down we are going to give another input like so and I'm going to give it a class name of message form assist so this basically will color it slightly different and making it a little more gray we're going to say type is equal to text we're going to say disabled so disabled will give it so that you can't really type on it and that's how we can mimic the input without it interfering with the original input and then here we're going to pass in the value and we're going to pass in message with pent text like so so this one will actually have the message and the append text attached together so with that I'm going to save it and now I'm going to work on the back end for this so basically we're going to run and handle this particular endpoint open AI slash assist and we're going to create that in the back end so if I go back to our routes we can basically let's copy the text route so router.post slash text I'm going to go down and under our code I'm going to have an endpoint called assist [Music] and then over here in the prompt instead of just having a text I'm going to tell this is basically prompt engineering but I'm just going to tell chat GPT or basically open AI that we want we want them to finish my thought so this is very explicit and tells the machine what we want it to do and in this case we don't have to have two thousand 48 Max tokens we can shorten this to 1024 we'll just keep everything else the same and in this case we don't really need to post on like an AI bot we're just posting as our own regular user so we can just get rid of that second API call and we're going to save that let's open up our terminal make sure we don't have any problems so if we go back [Music] oh yeah we are missing one last thing and that is if I go to chat index we are not properly adding AI assist so we're going to do the same thing we done before except this should be AI assist and then this should be AI assist and make sure we have the intellisense change the components like this pass that in and we should this is the complete of that but this is the app we're currently working on so let's open up our console just in case there is any errors and what I'm going to do I'm going to create a chat room I'm going to call this AI assist and hit enter and over here let's open up our Network tab just to see if we have any errors while we do this say can you help and let's see if it works help me understand and it works perfectly so if I just send now we have what we need perfect also what is and let's see if it what is important to remember is that okay and then if I don't want to I can just press like forward error and it'll just disappear and with that we have pretty much all the functionality we need the last thing we are going to run through is going to be focusing on auth login and sign up so we should be able to create our own user and then log that log them in as well all right so for the auth and login this is the final build basically what we want to be able to do is if I'm a new user I want to be able to go test user 2 or something like that and then we can add a password that we want we're just going to say one two three four we're going to hit register now there's no indication that um some of this has already done anything so if we go back and register we can hit log in and now we should be able to log in to our new user with nothing over here so if I go back the user is now fully logged in so we're going to be doing that there is I just want to mention that this is probably not like fully full authentication where you have all of the security all of the benefits and everything that you can think of when you're dealing with authentication and security but this will do like the very minimal basics of logging in registering it and making sure that they're signed in so we're just doing the very basics of such so I'm going to go over here I'm going to close out everything we don't need those we can go to app jsx and in here we are going to add our user over here and like I said most of this is not secure so don't use this in a production app but I just want to give you a brief rundown of the basics of how we can create a user in our chat application so we're going to have a user set user and we're going to set it to null at the beginning we're also going to have a secret with set secret as well I'm going to set this as use State and I'm going to set this null and by using those we want to make sure if the user is authenticated for certain routes so I'm going to do Boolean is going to be set to user and as well as Boolean is going to be secret now you don't have to set the Boolean but sometimes it is better to be very explicit about what type this is and Boolean forces it to be a true or false value so over here we have a path of chat and element of chat something like this what we want to do is we're going to set the element we should only allow the user to go to our chat application if they're authenticated so you have something like we can set is auth and if they're uh authenticated we can pass the user into our component as well as the secret into our component and once we have that we can also set the navigate component that we created over here from react router Dom so this should be actually a component like so and we are going to force them to go to the slash route if they're not signed in so if we save that we're going to have this setup so basically if we navigate to chat we're going to see this page if they're authenticated already otherwise we're going to force them to go back to the original home page so when we pass this in so if I go over here we want to grab this user and the secret as well and now we're just going to pass the user in over here instead and the secret as well so we don't have hard-coded values anymore for our login and we're going to go back to our app jsx file all right and then also we need a route for the login page so the route for the login page will be different so we're going to set route and we're going to say path is equal to slash and we are going to render out our login element that we have not created so again like before I'm going to have an is off like this and I'm going to say navigate to I'm going to say dot slash chat like so I'm going to create a component called login I'm going to set user like so and then set secret like so so the login and the user is going to set this basically State and we can use that information once they're logged in and then I need to make sure I close this out and this is not created so I'm going to go up here I'm going to import login from at slash components slash login actually yeah so over here I'm going to create a new file called index.jsx and here I'm going to do rfce make sure this is properly sound and we're gonna have this information so we're going to go and open up right here we have failed to load URL does this file exist so we basically just created it so we are linking back to this section so I'm just going to restart the server sometimes it has issues if you're not doing that so I'm going to go over here and open it up yep and as you can see we have the login page so this is currently the login page and we have to add the logic but before that what we're going to do is we're going to go to our state file in the API and we're going to make our API requests so the way I'm going to do it I'm going to change this to post login I'm going to change this to auth slash login because we're going to create another file and router as well I'm going to keep everything the same and I'm just going to copy this again and this is going to be sign up as well so sign up like that auth sign up over here and in here I'm going to do use post login mutation and use post sign up mutation and with that we're going to go back to our login component and we're going to start from here so inside our login component I am going to do import use state and use effect as well and I'm also going to import the apis that we just made so use post login mutation and use post sign up mutation and inside here I'm going to do const is register and we're going to do set is register like so I'm going to do use state I'm going to set this to be false and I'm also going to set the username and we're going to do set username with use state with an empty string now I capitalize this so make sure you fix that it should be lowercase with the n then I'm going to do password as well set password and I'm going to set the use State over here and what we're going to do is we're going to say trigger login so this is going to be the use post login mutation and we're going to be grabbing this so we can trigger the login and we're going to do the same thing for trigger sign up and we're going to do use post sign up mutation now this is also going to require us to use result login so we're going to grab information from this login once we get information returned and I'm also going to create just like a wrapper function so we can just pass that in easily so handle login I'm going to pass in trigger login as well username and password like so and then the accounts handle register and the trigger sign up and pass in username password like this and over here I'm going to do use effect I'm going to say if result login data dot response so essentially if we have a response from the result login we're just going to set the user so we're just going to update the username just making sure if we log in and it's correct oops and we want to set the path password as well actually this should be this should be password this and we only want to trigger this when result login dot data seems to come back yes lint disable apply all right so now let's actually build the component and over here I'm going to do div and I'm going to pass in the class name of login page and just remember I've already set up all the classes so we're just going to have to handle the jsx so I'm going to do div class name login container and I'm going to have H2 with a class name of title and I'm going to call this chat gbt app I'm going to give it a paragraph tag I'm going to give this class name of register change and on click I'm going to pass in set is register and I'm going to give it a Boolean like so and flip the paragraph tag and I'm going to say is register like this and we're going to say already a user and if not are you a new user so basically this is a Boolean determining whether we're on the register page or a login page so you can flip the Boolean depending on these criteria and then from here I'm going to create a div and in here I'm going to give it an input of class name of login input type of text with a place holder of user name a value of username and on change I'm going to set e is equal to set username I'm going to boot e.target dot value and I'm going to close this like so and over here I'm going to do another input I'm actually just going to go and copy this and this will be slightly different so we're going to do login input this will be password instead so it's hiding the value we're going to say password and I'm going to say a password over here and then this should be set set secret or set password yeah so actually I realized something so this actually should be set user and set Secret like this and the reason why we need to pass this into login so set user and set secret so if you remember if you go back to app.jsx we're passing in the set user and set secret over here so that gets inputted over here and it's different from the password over here so this is just a temporary store of the username and the user password but the set user and set secret is the actual login information that we sent to the chat engine app so be careful of that confusion and over here I'm going to create a div and this will be the action buttons so we're almost done with the form so these are the two inputs these will be the buttons to log in or register so I'm going to say login actions and over here I'm going to say is register and I'm going to say button type is equal to button on on click and we're going to say handle register I'm gonna write register over here side this I'm going to have a button I'm going to say type of button like this I'm going to write on click I'm going to say handle actually this should be like so handle login and we're going to have login over here and we're going to save it and with this this should be pretty much our entire login page now let's double check if we can see that and this is our current build perfect so chat GP tab or your new user so if I click that we see this change to register and already a user we can go back so this is a very very simple login page and usually you want to make this a little more complex and have more interactivity and maybe even have a different form for register versus login but we're just trying to keep it simple so over here we created our front end now we're going to have to deal with the back end as well so I'm going to go down I'm going to go to our index.js first and in here I'm going to create the routes for r auth login so this is going to start with slash auth and we're going to have the auth routes and up here I'm going to import open or sorry auth routes from dot slash routes slash auth j s like that I'm going to save it and in our routes folder we're going to create that file I'm going to call this auth Js and essentially we can closely copy most of what we have in open AI we're just we don't really need some of this configuration so let me just so we don't really need open AI like that we don't need the dot EMV as well so we just need this I'm going to set up our router cons router is equal to express dot rather like so and then at the end I'm going to have export default of router and then from here I'm going to go and copy this in the open AI file and paste it over here and we're just going to erase majority of this we just need to keep the errors like that and the res status right here and we want to change this to a login instead and you know it would probably make more sense to start with sign up because that's what it's what we start with so we're going to do sign up as well so I'm going to copy this over now and our sign up takes in two values the username and password from rec.body so now let me just clarify how do we get this information of username and password so if I go back to our API file we have a sign up and the sign up takes a payload that we don't know what we're identifying it with but if you take a look here trigger sign up is coming from that post query we're passing in username and password and that gets sent to our backend over here and we can grab the username and password right here and then from here we are going to send the username and password to chat engine and we're going to say chat engine response and we're going to say await axios.post and what we're going to do is we're going to find the API where we have chat engine and we are going to pass it into our users URL over here and I'm going to say username we're passing in the username over here same with secret so even though it's a password we're going to have to pass it as Secret and again it's on the API rest documentation like I showed you before so if you want more information on how these things work so now what we also need for logging in we're going to say private key so now we haven't used this just yet we're going to say process.env dot private key like so however we have not identified this over here in the dot EMV file so if I go back to our code and actually go to our chat engine the way we get the private key is over here now I'll be deleting this project once this is done but if you want to take a look this is the private key you can copy that to a clipboard and we can write this in our section we can say private key and we paste that in and we're going to save it and over here we will be using that particular private key and instead of this response.data.choices text I want to call this response and we're going to say chat engine response dot data to grab our information so this is what's going to be returned actually this should be error message like that so this is more explicit so you'll have a big object so now I usually would test it but let's go with login because this is the process is very simple and we could just test the entire workflow after so we're going to go over here we're going to have the same username password for rec.body and if you remember again we go back to our login page this is username password over here being passed in and so we go to our username we can just grab the chat engine response again and we're going to pass it over here and this is going to be a get call because we're doing login now and we're going to say users slash me and instead of passing it oops instead of passing it like this we just need the headers and we're just going to change this to what we did before when we made an API call to um send a message so this would be project actually I'll show you we can go to open AI to the this file in the routes we can just copy this entire thing over here because this is what we need and we just need to change a few things and instead of the bot username we are going to pass in our username over here as well as our password and again I'm going to go down once we have that I'm just going to copy what we had before for the sign up I'm going to grab this paste it over here and I'm going to save it and with that let's see that we have everything so we have the server running the server and the client both running so we can go to the front and let's just refresh just in case and let's say I'm a new user test user three and then one two three four let's make sure we're making a request so we have a sign up and we get a response so this is what chat engine is giving us right here with all of this information we have a response as well we have our password and the username coming in and then from here after we registered we can say are you a new user since it's already signed up we can do login over here and now we have our new chat perfect everything is working as expected and if I wanted to just create my own something like that a new chat app and say hey how's it going I can send it and the bot should pretty much represent okay so if I do that I do need to add the particular bot actually I can go over here add a member yeah so I added the bot again because we're getting an error because I did not add the bot and I just say hey how's it going and there you go pretty good how about you so that's how we created a new user and we created a new chat making sure that they're all there and logged in perfect so to just recap of our login and auth process if we go back what we did was we first created the endpoints post login post sign up so we have both of these API requests we created the login page and we're handling the login and the register depending on the response and we're also setting the user and the secret so we can have a proper navigation over here so if the user has an auth and a secret we will navigate them to the appropriate location and once we're on the open AI side of things or sorry not the open AI auth JS side of things you meaning the back end we have the username and password getting sent to the chat engine application where we are storing it for sign up once we sign up and also when we log in and we also have to create a pro we have to use our private key to register a user and then we want to log them in as well and just to make sure and just to reiterate one more time there this is not fully secure it's very close to being secure but there are some steps of having like a password on the front being exposed and it can be intercepted things like that so don't use this in a product production level I want to just do very basic authentication just so you know how you can log into the chat engine so you just have to be wary of that and with that now you have a fully built chat application that we used chat engine and then we also used open AI to have ai assisted text as well as AI code and text completion so we can also log in onto our application once we have a user and once we're logged in we have we have regular chat where we can just post the message and it will communicate whoever is in that particular you know chat room and then from here we can also do AI chat where we can talk hey how's your night going we can talk to AI bot Steve using open Ai and it'll give us a message he'll be responding to you and then we also have ai code where we can say give me a random function random number function so if I tell that it's going to give me some code that will represent what I'm sending over here we have a function and it'll allow us to use functions so this is a different language so you just want to say give me a random number function JavaScript if you wanted and then from here we can do AI assist so if over here what is and then you can just wait for the response and it'll give us something that will auto complete so what is the meaning of life that is a question that has been asked throughout history so we can just use that as an autocompletion tool for our chat messaging application and that was it that was everything we have done for this chat application and this is a pretty cool project we used open AI to give us AI assistant code and then we also did mern full stack so essentially we've done a lot of both server routes and client routes we did everything that will consist of an application we even did authentication we even logged into a chat engine application as well and we made that and integrated that with AI so I hope you enjoyed please like And subscribe and I'll see you next time

Channel: EdRoh

Views: 83,855

Keywords: EdRoh, redux, redux toolkit, react, node js, mongodb, chat gpt, openai

Id: ffEDkqfIzxM

Length: 179min 33sec (10773 seconds)

Published: Mon Mar 06 2023