Build and Deploy Your Own ChatGPT AI App in JavaScript | OpenAI, Machine Learning

chat GPT is all over social media I'm sure you've seen some crazy things it can do it might have even made you think is it powerful enough to replace developers well the developers my friend are the ones that built it and that's precisely what you'll do today in this single video you'll build your first JavaScript AI a chat GPT AI application using open ai's newest machine learning model with an elegant user interface that resembles the chat GPT app communication with Advanced gpt3 model API and most importantly the ability to ask the AI for help regarding JavaScript react or any other programming language giving it code and translating it to another programming language and much more the code GPT application is the best AI based web application that you can currently find on YouTube building this single web app with me will give you the knowledge to use all open AI apis to build any website you can imagine you'll even deploy to the Internet so you can share it with your friends potential employers and put it on your portfolio you might be wondering what are the prerequisites for building such a fantastic website this course is entirely beginner friendly we'll use the most in-demand Technologies today such as HTML CSS JavaScript Viet node.js and of course open AI we're going to start simple and then move to more complex topics as we go I'll explain every step of the way alongside building this application you'll also learn how to set up a vanilla JavaScript project using Veet use node.js for the server side create responsive layouts with pure CSS handle events with JavaScript render markdown from strings use Prisma for code highlighting May make API requests catch errors right clean code and much more if this video reaches 20 000 likes I'll record more AI JavaScript applications before we begin please allow me to give you a quick demo of the application to better understand all of the great functionalities you'll build today [Music] before I show you a couple of things our AI can do let's Let It introduce Itself by typing write code that says hello world I'm codex in Python C rust Ruby and JavaScript and just like that it's going to start introducing itself to all of you that's amazing but now let me show you what else it can do you can let it suggest you five Advanced project ideas in reaction yes and immediately it's going to suggest building a real-time chat application A reactions based image recognition app video streaming voice assistant and augmented reality apps if you want to brush up on your JavaScript skills you can ask it to tell you a bit more about map filter and reduce methods in JS and as you can see with giving you the entire description of what the map method does it even gives you a syntax and an example it's going to do the same thing for the filter with the syntax and the example and finally for the reduce method isn't that amazing but now let me show you something even better we're going to ask it to write a post route that registers a car info to mongodb after passing all validations of no empty Fields email exists and so on and we wanted to use async await and just like that it immediately started typing everything you need for a proper post request isn't that phenomenal as you can see it handles everything from JavaScript to rehacked but even python C and rust in addition to answering questions codecs can also help you practice your coding skills just ask codex to provide you with a coding challenge or exercise so give me a JavaScript coding challenge let's see what it comes up with create a function that takes in an array of numbers and Returns the sum of all the numbers in that array so this is a prompt and it even gives us a solution if we want to check ourselves up with that said let's dive straight into the development of our great application so you can build this incredibly smart AI completely by yourself and deploy to the internet entirely for free for the entire world to use to get started with building our great AI application we're going to first open up an Mt Visual Studio code window and create a new empty folder on our desktop let's call it open Ai and then underscore codex of course feel free to call it however you want but the point is we're starting from beer beginnings once you have your empty folder simply drag and drop it into your Visual Studio code let's expand our Visual Studio code and open up our terminal by going to view and then terminal to create the front end or the client side of her project we're going to use a build tool called Veet but to use Veet we have to use npm and to use npm we have to use node so to check if you have node installed on your device type node Dash V if nothing comes up simply go to nodejs.org and download it and install it for your own operating system once that is done you're ready to run npm create Veet at latest client dash dash template space vanilla this is going to create a vanilla JavaScript repository let's press Y and then enter and right now let's let it do its thing we can select a framework which is going to be vanilla in this case it's going to be a JavaScript project and that's it we're done you can see that the new client folder has been generated for us we have to CD into client and then run npm install to install all the necessary packages all of the logic for this project is going to be written entirely by you but to save you some time I went ahead and collected all of the assets that we'll be using throughout this project so you don't have to search for them across the web you're gonna simply get them in a zipped folder so down in the description there's going to be a link to download all of these zipped assets once you unzip them you can simply right click right here and paste the assets folder straight into the client there there's only one more thing you have to get from down in the description from a GitHub gist and that's going to be a style dot CSS file so you can get it from the description find it on the GitHub gist delete everything that is currently in the style.css and override it with our code right here again this doesn't contain any logic it just contains some simple styles to make our application look better so we can save some time and focus on developing artificial intelligence instead of worrying about the CSS finally from within the assets folder we can move our favicon into our public folder right here and delete the basic veet.svg now we can also delete the counter.js because we don't need it and we can move straight into the index.html this is the starting point of our application inside of here instead of rendering the veet.svg we're going to render the favicon dot Ico for our favicon then we're going to change the title of our application to codex your coding AI and a really important thing we also have to add a link tag that's going to look like this link Rel stylesheet with an href of style dot CSS that's going to link our internal style sheet finally in the body we're going to have our div with an ID of app and we're going to also have a self-closing div right here at the top so Dev with an ID equal to chat underscore container this is going to be the container that's going to wrap our entire application now keep in mind it is self-closing itself right here but below that we're going to create our form that's going to allow us to type into it inside of the form we're going to have a text area element that text area is going to have a name equal to prompt allowing us to type in there it's going to have a number of rows equal to one it's also going to have a number of calls or columns equal to one as well and placeholder is going to be equal to a string of ask codex dot dot dot perfect and finally we have to submit our form somehow so we can add a button it's going to be of a type submit and inside of it we can render a self-closing image that's going to have the source equal to assets forward slash send dot SVG this is one of three SVG images that I provided for you in the assets folder and finally we have to hook it up with our script module that's not going to be main.js rather it's going to be just script.js so we can change this main to script right here there we go and with that we should be ready to run our application and see something in the browser but right now it seems like we have some code already in our script so let's try to run it and see if anything happens we can go to view and then terminal we can clear it make sure that you are inside of the client folder by cding into client if you are still in the root and run npm run Dev this is going to start the application on localhost 5173 so hold Ctrl and then click this link now you'll be able to see our great favicon at the top saying codex your coding AI but there is an error it's looking for counter.js and remember that's that little thing that we removed so actually we don't need anything that is inside of the script right now so we can simply delete it if you do that you can see codecs right now codex is a simple dumb form where you can simply type something submit it and it's not going to do absolutely anything but at least it looks nice so far now the goal is to take this empty script and teach you how to connect it to the open AI API to get prompts from it and actually provide intelligent answers based on what you type so with that said we are ready to get started with creating our script to get started implementing our functionality let's first start by importing the icons from our assets so we can say import bot from um dot slash assets bot dot SVG and we can repeat the process for importing our user icon from dot slash assets forward slash user dot SVG great now we're not working with the react this time so we have to Target our HTML elements manually by using document.queryselector so we can say const form is equal to document dot query selector is equal to and then we call it as a function and provide the ID name in this case form we can also do a similar thing with our chat container by saying const chat container is equal to document dot query selector and then we can pass the ID selector right here and say chat underscore container which is exactly how we called it right here in index.html and then the form we didn't get by ID but we simply got by tag name because this is the only form in our index.html now that we have those two elements we can also create one variable let load interval so this is going to be a variable that we're going to fill in later on for now we simply wanted to declare it in this outer scope now later on we're going to also have a function that's going to load our messages so we can say function loader it's going to take in an element and it's going to return something and if you remember how our code works this loader is simply going to return three dots let me show you what I mean in the finished version of our application so if you type how to create a functional component in react while it thinks it's going to render three dots one by one one one one one and then zero and it's going to repeat that until we actually get the answer that is how we're going to implement the loading for our application so going back here first of all we have to say element dot text content is equal to an empty string to ensure that it is empty at the start then we're going to set the load interval to be equal to set interval which is a function that accepts another callback function and as the second parameter it accepts a number of milliseconds so every 300 milliseconds we want to do something and what do we want to do well we want to add another dot to that element text content so we can say element dot text content plus equal to dot now if the loading indicator has reached three dots we want to reset it so we can say if element dot text content is triple equal to dot dot dot dot meaning four dots then we want to reset it by setting element.text content to an empty string and this is going to repeat every 300 milliseconds great we cannot yet see this in action but we'll be able to see it soon now there's another similar function that we have to create if you remember correctly while the API is typing it's going to type one letter by letter like this so we want to implement that typing functionality we don't want the entire text to Simply appear instantly yes that might be faster but we as humans want to perceive this as if the robot or AI is thinking and is giving out his response as we read it so that's going to improve our user experience so let's create a function called type text that's going to accept the element and the text as parameters at the start the index is going to be set to zero then we want to create another interval by saying let interval is equal to set interval same thing as the last time and the second parameter this time is going to be only 20 milliseconds for each letter inside of there we want to check if index is lower than text Dot length that means that we're still typing so if we are still typing we can set the element dot inner HTML plus equal to text dot Char add Index this is going to get the character under a specific index in the text that AI is going to return and of course we want to increment that index else if we have reached the end of the text then we want to Simply clear the interval great now we can type text and we can load ai's answers now later on we'll also have to generate a unique ID for every single message to be able to map over them so let's create a function called generate unique ID that's a function and in JavaScript and in many other programming languages how you generate a unique ID is by using the current time and date that is always unique so we can say const timestamp is equal to date dot now to make it even more random we can get another random number and that's going to be equal to math dot random so we're using a lot of built-in JavaScript functions and finally we can make it even more random by creating a hexadecimal string and that's equal to random number dot to string and we're gonna get 16 characters finally we can return an ID with the template string of ID Dash timestamp and then Dash hexadecimal string so now we're sure that this is going to generate a unique random ID now keep in mind I'm not yet showing you anything on the screen now if you scroll at the top you're going to notice that we have a typo right here it was supposed to be bought and the reason why I'm not showing you what's happening on the screen is because there is nothing right now we're in the process of creating the logic for our AI application to work later on once we implement the functionality we're going to put the code editor side by side by the browser to be able to see the changes that we make in the code live but for now we're focusing on the functionality now if we look at the finished version of the application you can notice that for each message each new prompt and each new answer there's a new stripe a new color that appears it goes from darker gray to lighter gray and so on also each message has an icon if it's us or if it's Ai and it also has a message so let's Implement that chat stripe let's create a function called chat stripe which is going to take a couple of parameters first is AI speaking or is it us we're going to get the value of the message and we're going to pass it a unique ID in this case I have a typo we don't need an equal sign here we're not creating Arrow functions that's just the Habit from writing a lot of react code by the way you know that on JSM we write a lot of react applications is writing plain JavaScript vanilla JavaScript something that you'd like to see more of on the channel or would you like me to create more advanced react applications please write down in the comments your answer means so much to me with that said this function is going to return a template string keep in mind it has to be a template string not a regular string because with regular strings you cannot create spaces or enters but with template strings you can so right here we're going to create a div this div is going to have a class not class name as in react just class equal to wrapper and then inside of there we can put dollar sign in curly braces and check if is a I then we can say AI that's going to be a special class now within that div we can create another div that's going to have a class equal to chat and within that div we can have one more div that's going to have a class equal to profile finally we can show an image which is going to be a self-closing tag inside of the profile it's going to have a source that's going to be equal to Dynamic block of code if is AI then bot otherwise user these are the two icons we imported before we can also give it an altag and if it is AI we're going to Simply leave a string of Bot usually it's going to be a string of user and finally and most importantly below our Dev containing the profile we're going to create another div with a class name or rather just class equal to message we're going to also give it an ID equal to it's going to be dynamic unique ID and finally inside of that div we can render the value which is going to be that AI generated message perfect now we have our chat stripe and we are ready to start creating our handle submit function which is going to be the trigger to get the AI generated response so let's create a function const handle submit it's going to be an async function and it's going to take an event as the first and only parameter I miss type async right here so if we fix that we're good and the default browser behavior for when you submit a form is to reload the browser but we don't want that to happen so we can say e dot prevent default and call it like this this is going to prevent the default behavior of the browser now we want to get the data that we typed into the form so we can say cons data is equal to new form data and then we can pass in the form remember if you look at what that form is this is simply a form element from within our HTML then we want to generate a new chat stripe we type something we want to add it right so we can generate the user's chat stripe we can do that by getting into the chat container into its inner HTML and then saying plus equal to chat stripe we pass in false as it's not the AI it's us then we pass the data dot get which is going to be a prompt and that's it finally we want to clear the text area input so we can do that by typing form dot reset and now we are ready for the Bots chat stripe first we want to generate a unique ID for its message const unique ID is equal to generate unique ID that's the function we created before and then as we created the chat stripe for us we also want to do that for it so right here we can copy that message say chatcontainer dot inner HTML plus equal to chat stripe but this time it's going to be true because the AI is typing in here we want to give it as the second parameter simply a string with one empty space there because it's going to fill it up later on right here remember we are filling it up as we are loading the actual message and finally we're going to provide it a unique ID as the third parameter now as the user is going to type we want to keep scrolling down to be able to see that message so we can say chat container dot scroll top is equal to chat container that scroll height this is going to put the new message in view now we want to fetch this newly created div const message div is equal to document dot get element by ID and we're going to pass in the unique ID hopefully now you can see why we needed to create a new unique ID for every single message finally we want to turn on the loader so we can say loader and we can pass in the message div right here great now to be able to see the changes that we made to our handle submit we have to somehow call it right so below the handle submit let's say form dot add event listener and it's going to be a listener for a submit event and once we submit we want to call the handle submit function also we as developers are used to submitting everything by simply pressing the enter key and not clicking the button so we can say form dot add event listener which is going to be a key up meaning once we press and release the enter key then we want to call this callback function there we can check if e dot key code is triple equal to 13. that is the enter key and then we can handle the submit great now we can go back into the browser and check what we have so far if you reload your page and type hello there and press enter you can see that we have hello there and our AI is actually thinking and it's adding dots to its response this is not looking exactly as it does in the finished application but no worries we're going to come back here and we're going to fix it but first let's focus on what matters the most and that is getting ready to create our own backend application that's going to make a call to the open AIS chat GPD API are you excited so to get started with that we can momentarily but just shortly close the script.js file collapse the client folder and we can create a new server folder right here then we can go to view and then terminal we can press Ctrl C and then y to stop it from running we can see D dot dot to move a directory up and then CD into server to move into the server directory finally we can run mpm in net Dash y this is going to generate a new package.json file inside of our server then we need to install a couple of dependencies we'll be using for our server-side application and we can do that by running npm install course used for cross origin requests dot EnV used for secure environment variables Express has a backend framework nodemon to keep our application running when we Implement changes and open AI finally you can press enter and in a couple of moments all of these dependencies will be installed right here and you can see them from within the package.json file now you might be wondering where are you going to write that server-side code to make a call to open AI well we're going to create a new file called server.js from within this file we're going to do all the setup and all the configuration to be able to call openai's Api but first we need the API key and we can get it straight from openapi.com forward slash API they say build next-gen apps with open ai's powerful models we'll be able to access gpt3 which performs a variety of natural language tasks codecs which translates natural language to code and Dally which creates and edits original images this is incredibly powerful so let's go ahead and click get started right here you can create our account or simply continue with Google once you sign up you'll be redirected to the overview page the openai team did a great job to get you started with the basics so you can have a quick start tutorial or you can check out some examples they also immediately allow you to build an app using text completion image generation code completion and so much more but thankfully to make the process even simpler you have me today you're watching this video and I'm going to guide you step by step on how to create our great codex application so to get started click your profile on top right and click view API keys right here you can create a new secret key and finally you can copy it back inside of our code you can open the file explorer and then in the root of our application you can create a new DOT EnV file make sure it is in the root and not in the server folder inside of the DMV file you can say open AI underscore API underscore key is equal to a string and then you can paste your API key that is all that we have to do for now you can close that and we can get back to creating our server.js inside of here we're first going to import a couple of things we're going to import Express from Express then we're going to import everything as dot EnV from dot EnV this is going to allow us to get that data from that EnV file we're then going to import course which is going to allow us to make those cross origin requests and finally we're going to import inside of curly braces configuration and open AI API from open API open API team did a great job of creating these wrappers that we can use to simplify our use of open API to be able to use the dot Envy variables we need to say dot env.config and then we can get started with the configuration we can say const configuration is equal to new configuration that's a function which accepts an object and there we simply need to pass an API key which is equal to process.env dot open AI underscore API underscore key great then we need to create an instance of open AI by saying const open AI is equal to new open AI API and then you pass in that configuration once you do that we need to initialize our express application by saying const app is equal to express and then you call it as a function we want to set up a couple of middlewares so we can say app.use course again this is going to allow us to make those cross origin requests and allow our server to be called from the front end then we can say app.use express.json this is going to allow us to pass Json from the front end to the back end we can also create a dummy root route by saying app.get forward slash it's going to be an asynchronous function that's going to accept a request and a response and it's simply going to return a red stat status 200 dot send message of hello world or we can even say hello from codex there we go but more importantly we need to create an app dot post route so what is the difference between app.get well with the get route you can't really receive a lot of data from the front end but the post one allows us to have a body or a payload so right here we are going to say the forward slash route but this time post request async rack and res the same as before but now we can get the data from the body of the front of the request first of all let's wrap everything in a try and catch block like this and then let's get our prompt by saying const prompt is equal to wreck that body dot prompt and now for the most important thing we want to create a response or get a response from the open API so we can say const response is equal to a weight open AI dot create completion it's a function that accepts an object now there are a lot of different things that we can pass into this function so let's read the docs going back to our overview let's go to examples and now let's try typing code natural language to open AI API and let's click open playground great this is a great example we can choose one from a couple of different models available right here on the right side we have code DaVinci 2 code Cushman one and then we have text DaVinci 3. now code models are capable of generating code but in this case I found the text DaVinci 3 to be more capable it can understand text as well as code and it can produce higher quality output so in this case we're going to switch to text DaVinci 3 and as you can see there are a lot of different things they are variables such as temperature maximum length stop sequences and so much more but let's click view code this is going to give you a snippet of code as you can see we have already written some things such as the import of the configuration and then creating the instance and then the response but now we are interested in these things the parameters that we can pass into the model so let's copy those params and go back to the code we can paste them right here and indent them properly first the model is going to be text davinci-003 then we want to pass in a prompt and this prompt is going to be dollar sign and curly braces within a string right here that's going to be prompt we are passing it from the front end remember the text area well it contains the data for our prompt now we can set the temperature higher temperature value means the model will take more risks in this case we don't really want a lot of risks we wanted to answer with what it knows then we can set the max tokens which is the maximum number of tokens to generate in a completion in this case let's stick with 3000 this means that it can give pretty long responses top B can remain one frequency penalty means that it's not going to repeat similar sentences often so we can set that to 0.5 so if it says something and you ask it a similar question it is less likely to say a similar thing and we don't need a stop in our case great finally once we get the response we want to send it back to the front end by saying rest that status 200 dot send inside of an object we're going to say bod response dot data dot choices zero dot text perfect and finally in the catch if something goes wrong we can cancel that log our error and we can also rest that status 500 dot send error like this so we know what happened great believe it or not this is it this is all that you have to do to be able to get a response from the most powerful AI in the world now we just have to make sure that our server always listens for new requests so we can say app.listen 5000 we're going to have a callback function to let us know that we started so we can say console.log server is running on Port 5000. as a matter of fact let's say HTTP colon forward slash forward slash localhost Colin 5000 that way we'll be able to immediately click it from within Arc terminal great with that said we can now run our server so let's go to our package.json and right here within the scripts we're going to remove our test script and add a new script called server there we want to call a command called nodemon server whenever we call that script also we want to add a type equal to module this is going to allow us to use the Imports instead of regular old required statements and I think we can remove the main right here because it might conflict the index.js from the server great now we are ready to run npm run server again make sure that you are in the server directory and as you can see Server is running on Port localhost 5000 and you can control click it and there we go we have a message hello from codex this means that it worked but we don't really care about this HTTP get request we care about the post that we're gonna submit from our front end so now that our server is running you can press this button right here to split the terminal now within our other terminal we want to see the dot dot and then CT client and then npm run Dev this is going to allow us to run the server side and the client-side simultaneously so there we go our codex is here our localhost is here and we are ready to connect them so now we can close the back end we can open up our file explorer and go into our client script.js and we can get back where we left things that's going to be right here below this loader this is the place where we can fetch the data from the server which means that we can get the bot's response to do that we simply need to create a new response so const response is equal to a weight Fetch and now we can fetch https colon forward slash forward slash but rather it's going to be HTTP since we're still on localhost localhost Colin 5000. we can also provide a second parameter which is an object containing all of the options in this case a method of post then we can provide headers which is going to be an object containing a content Dash type application forward slash Json and finally we need to pass our valuable body so we can say body is equal to json.stringify we pass in an object where we say prompt is equal to data.getprompt this is the data or the message coming from our text area element on the screen great now after we get the response we want to clear the interval so we can say clear interval load interval because we're no longer loading and we want to set the message div dot in our HTML to be equal to an empty string because we're not sure at which point in the loading are we right now at the point when we fetch we might be at 1 dot two dots or three dots but we want to clear it to be empty for us to be able to add our message so what we can do then is say if response dot ok then we can say cons data is equal to a weight response dot Json this is giving us the actual response coming from the back end but we need to parse it so we can say const parsed data is equal to data dot bot dot trim and finally we can pass it to our type text function which we created before so we can simply pass the message div as well as parsed data and then if we have an error we can say else const error or err is equal to a weight response dot text and then we're going to set the message div dot inner HTML to be equal to something went wrong and we're going to alert the error there we go believe it or not this is it with that said let's go ahead and test our newly created API endpoint going back to our browser we are on our front end and let's try to type how to create a react functional component and press enter as you can see we have our user icon and we have one dot right here which makes it seem like it's not actually loading so to check if things are working we can go to inspect console and we can see that message div is not defined it handles submit line 93 so most likely I just put a dumb typo right here and yes that indeed was the case message div I also noticed that we don't have a proper CSS being added inside of our profile and that's because I typed class name right here instead of class I always keep thinking that I'm in react and finally the loading doesn't seem to be all right it seems like there is only one dot so if we go back to loading right now it seems fine but we're gonna get back to it if we know it is inconsistencies so going back we can keep our terminal opened and we can give it another shot let's try hello how are you and this time we get an error error saying 401 401 status code means unauthorized and that would made me assume that inside of the server right here our configuration is not being done properly because we're not authorized with the specific key I mean this key is working we got it straight from open AI but maybe we have to reload our terminal so I'm gonna press Ctrl C and then y I'm gonna clear it and I'm gonna rerun the server Again by running npm Run start we can also console log the process.env dot open API key right here to see if it comes back right now it seems to be undefined but if we put the dot EnV inside of the server press save one more time it is there so when I told you to keep it outside that didn't really make sense we ought to keep it inside of the server because that's the only place where we're gonna use it great now we can remove this console log we can collapse our terminals and we are ready to retest our application now open AI knows this secret key that we have and it should give us access to ai's responses going back let's try with the same prompt hello how are you and there we go now we get three dots but this time we get an error text Char ad is not a function line 26 so going back to our script and to line 26 that's right here we're looking at Char at and it cannot seem to find it from this text which means that this text is maybe undefined so let's see where are we calling the type text function it's being called right here and we're passing the parse data as a parameter so it shouldn't be empty let's go ahead and give it a console log parsed data we can even put it inside of an object to immediately know what we are console logging now if we go back and try with hello you can see that we get the parse data there and it's an actual string so why is this text.char ad complaining let's delete this scroll all the way up and we can easily notice why is he complaining that's because I typed chart add and not Char ad so if we fix this method which now works with this text that we saw was there we can say hello Three Dots and there we go hi there how can I help you now this time let's give it a really tough prompt I'm gonna say create a 3D sphere in JavaScript and press enter as you can see it is thinking but it is thinking more than three dots so we want to have that usual dot repeating but hey after some time we're getting back the response it's actually creating a 3D sphere using 3js JavaScript library for 3D modeling and it's even giving us comments on each one of the lines here isn't that crazy let's try something regarding react create a routing for these routes home about work and contact in reactions using react router Dom V6 it's gonna import everything it needs and it's going to create all of the routes right here isn't this crazy now before playing with it a bit more let's fix the loading going back we notice that it's not stopping after four dots and that is because I had another typo right here it's text context I had an extra n right here so this should fix it going back let's give it an extra hard prompt this time I'm gonna say explain this code and it's going to be a lengthy piece of code so as you can see you can even expand your text area right here there we go and I'm gonna paste it this code is a function that takes two parameters an element and text and it creates an interval that runs every 20 milliseconds inside the interval it checks if the index is less than the length of the text if it is it adds the character as the current index of the inner HTML and if you look at this function this is the function from our code isn't that crazy but what if we wanted to know what this entire script that we wrote does I'm gonna copy everything go back and say explain the following code and simply paste it and press enter it's thinking as you can see this code is creating a chat bot it Imports two SVG images for the user and Bot profile pictures it then creates a four element and a chat container element it then defines functions for loading typing text generating unique IDs and creating chat stripes the handle submit function is then created to handle the form submission it takes the user's input from the form adds it to the chat container as a chat stripe and then fetches data from the server to get the bot's response the response is added to the chat container as another stripe and then typed out using type text finally an event listener is added to both submit and key up events of the form element isn't that crazy it explained everything we've done throughout this entire video and if we press this responsive mode you can see that the bot is fully responsive this is looking great even on mobile devices now it looks like the loading still isn't fixed if I type hello you can see it has more than three dots so is it possible that I misspelled the text content one more time right here yep that's text context instead of text content there we go I've been working with react context a lot I guess so going back and typing something really hard like write a function that determines whether the email is valid or not in JavaScript we should be able to see that new loading there we go dot dot the AI is thinking so let's see if we can do it yes it's actually going to spit out a function is valid email in JavaScript for us this is phenomenal you have created your own AI that's going to help you code keep in mind it can also help you learn how to code as we discussed it can explain different things explain the difference between View and react it's gonna think a bit and it's gonna give you an answer as you can see they're both popular JavaScript libraries but the main difference is approach to component based development great as we said it can also give you exercises so you can say give me a react or JavaScript exercise and it can even test you on it so it's a phenomenal tool to use while they're developing but the best part of course is that you developed it and you can put it on your portfolio and you can show everybody that you build an AI tool with that said the last thing to do is of course to deploy it to do that we can close all of the currently open tabs go back to the code stop both of our terminals from running by pressing Ctrl C and then y we can delete one and finally we can deploy our server side first now to deploy our application we're actually first going to put it as a GitHub repository on GitHub so let me show you how to do that first step is to sign into your GitHub repository go to the top right click this plus icon and click new Repository called the repository however you want to something like codex make it public and click create a repository now you can follow these commands to publish our code let's put the browser and the code editor side by side there we go make sure to CD from the client into the root by saying CD dot dot you need to be at the root of your Repository then simply say get init get add Dot now to publish our application to GitHub there are two important things we need to do first of all we have to move away from the client into the root of our application to do that we can say CD dot dot as you can see we are in the root and the second thing is you need to add a new DOT get ignore file and inside of there we can add our DOT EnV as well as node underscore modules this is going to ensure to not push the dot EnV or the node modules into GitHub you never want to do that now you can say get init git add Dot get commit Dash m first ComEd then you can copy the next three commands git Branch Dash M Main get remote ad origin and finally git push U origin Main and just like that your repository is going to be pushed you can reload your page and your code is right here perfect now let's get ready to deploy our server to deploy our server side for free we're going to use render.com so let's click get started for free and let's create a new account let's sign up using GitHub once you create an account you'll be redirected to their dashboard click new and select web service connect a new Repository scroll down and in here you can enter the public get repository of your application so if you go back you can copy this URL and you can paste it right here and press continue now we need to add a name so let's do codex and you can do something similar in this case you can choose a region in my case I'm going to choose EU as it's closest to me you can choose the branch and this is really important you have to add a root directory so in this case it's going to be server environment is going to be node and the build command is going to be yarn or npm and the start command is going to be npm run server you can choose free and you can click create web service there we go for the first time ever it's building it out and it's going to deploy your server on this URL right here while that is in progress feel free to check out jsmastery.pro there you can choose one out of three complete courses if you're learning JavaScript you can check the complete path to JavaScript Mastery course if you want to dive into react you can check out our film power course where you build an entire movie application and finally if you want to dive into the world of web3 you can build an nft Marketplace application if you'd want myself and other mentors to work with you one-on-one and help you get a job then the master class experience is for you take the quiz and find out if you get fit with that said our server should be deployed already so let's close this tab and check it out there we go server running on Port localhost 5000 that seems good but it's still in progress but let's give it a shot anyway so let's click this link and let's copy it as well still we get a 502 which means that we gotta wait just a bit while we're waiting we can also add environment variables so head to environment and click add environment variable from within our code we know that the name of the variable is open AI underscore API key and then you can copy this string right here and paste it and click save changes finally we can go back to events and then we can see that another deploy is in progress so let's click here and wait just a bit and there we go after a couple of minutes our website is now live don't let this line fool you server is running on Port 5000 it's not this was just our hard-coded sentence in the code but our server is now deployed on this URL right here so let's check it out and there we go hello from codex now you can copy it go back to our front-end code go to the client side script and most importantly scroll down to where we're calling our server it's right here localhost 5000 no more we'll be calling our local server we want to call the one that's deployed on the internet this one we can access from wherever so once that is done we are ready to deploy our front end as well and we're gonna deploy our front end using versel so go to verscell.com and click Start deploying click continue with GitHub choose codex from the list and click import give it a name and change the root directory from dot slash to client and you can see that versel intelligently recognizes that we're using Veet to build our client side so click continue and click deploy the deployment process started it's going to take just about a minute and then we'll be able to access both our front end and the back end straight from the internet and there we go we got some confetti let's continue to our dashboard and let's click visit codex-beda.versel.app is where my application is deployed it's gonna be on a different link for you and let's give it a shot are you still here let's see if it answers now it seems like we're stuck on a loading screen so if we open inspect element and go to console we can see uncut in promise type error failed to fetch and the reason for that might be inside of our script even though we updated the new server endpoint we haven't pushed it so how can our deployed code number cell know that we actually did update it because it got it from GitHub so what we have to do is go back to our terminal by going to view and then terminal and then saying git add Dot get commit we can say update the server URL and then git push now this is going to push it to GitHub and then versel should pick up the change immediately as you can see it is building it and once it builds it we should be able to make a call to our new URL great so now if we go to deployments you can see it is live we can reload their application say are you still here question mark we are waiting and there we go yes I'm still here let's try something crazy now give me a step-by-step guide on learning JavaScript put it in bullet points and explain it to me like I'm five let's see if it does it there we have it guys learn the basics start learning the basics of JavaScript such as variables data types functions and control flow Step 2 practice writing code once you understand the basics start writing it create small programs step 3 learn advanced concepts so move to object oriented programming asynchronous programming there are plenty of online tutorials step 4 build projects and step 5 keep learning this has been a phenomenal build everyone thank you so much for watching this video and huge congratulations to you to coming to the end of this video and building this application with me if something didn't work right for you in this video and you didn't manage to deploy the project check out our Discord Channel link down below it's a community of 16 000 developers where we have forums for each video so right here you can click codex and you can post your question or a bug that you experienced and we're gonna quickly help you fix it with that said I want to say huge thanks to open AI even though they didn't sponsor this video for creating such an amazing API that allows us as developers to build great products such as this one and huge thanks to you for coming to the end of this video and improving your development skills if you want to learn in an even faster way check out jsmastery.pro with that said that's going to be it for this one and have a wonderful day [Music] thank you

Channel: JavaScript Mastery

Views: 332,440

Keywords: javascript, javascript mastery, js mastery, master javascript, openai, open ai, open ai chat gpt, chat gpt, chat gpt open ai, build your own chat gpt, build chat gpt, openai api, chatgpt api, develop chatgpt, chatgpt web development, chatgpt react, chat gpt javascript, artificial intelligence, javascript ai, javascript artificial intelligence, machine learning, machine learning in javascript

Id: 2FeymQoKvrk

Length: 61min 46sec (3706 seconds)

Published: Fri Dec 23 2022