With an elegant user interface that resembles the ChatGPT app, communication with advanced GPT3 model API, and most importantly, the ability to ask the AI for help regarding JavaScript, React, or any other programming language, giving it code and translating it to another programming language, and much more, this CodeGPT is the best AI-based web application that you can currently find on YouTube.

⭐JS Mastery Pro – jsmastery.pro/youtube

📚 Materials/References:
GitHub Code (give it a star ⭐) –
Assets –
Styles –

If you’re experiencing 401, 429, or similar issues, here are some potential solutions:
– Proper API key from OpenAI: It’s possible that you are not using a valid API key from OpenAI. You can get an API key by visiting
– Free credits offered by OpenAI: If you are using the free credits offered by OpenAI to use their models, you can check your usage at If you have used up your free credits, you can check the pricing and upgrade your account at
– Proper server deployment: Make sure you use the deployed link from Render at If you are unsure how to deploy the project, follow the steps mentioned in the video.
– After successfully deploying the link, make sure to paste the link in the script file of the client and push it to GitHub. This will allow Vercel to detect and deploy the application properly. Also, please note that the server link used in the Codex repository shared on GitHub has used all of its credits, so it will throw a 429 error and will not work. You will need to use your own server link by deploying it on Render or using another hosting service.

🐛Got stuck? Get your bugs resolved immediately –
🐦 Follow us on Twitter:
🖼️ Follow us on Instagram:

💼 Business Inquiries: [email protected]

Time Stamps 👇
00:00:00 Intro
00:02:29 Demo
00:04:54 Setup
00:11:26 ChatGPT Frontend
00:25:58 OpenAI Server
00:39:05 Connecting client and server
00:50:57 Deployment

Este vídeo foi indexado através do Youtube link da fonte
chat gpt app , Build and Deploy Your Own ChatGPT AI App in JavaScript | OpenAI, Machine Learning , , 2FeymQoKvrk , https://www.youtube.com/watch?v=2FeymQoKvrk , https://i.ytimg.com/vi/2FeymQoKvrk/hqdefault.jpg , 526408 , 5.00 , With an elegant user interface that resembles the ChatGPT app, communication with advanced GPT3 model API, and most importantly, the ability to ask the AI for help regarding JavaScript, React, or any other programming language, giving it code and translating it to another programming language, and much more, this CodeGPT is the best AI-based web application that you can currently find on YouTube.

⭐JS Mastery Pro – jsmastery.pro/youtube

📚 Materials/References:
GitHub Code (give it a star ⭐) –
Assets –
Styles –

If you’re experiencing 401, 429, or similar issues, here are some potential solutions:
– Proper API key from OpenAI: It’s possible that you are not using a valid API key from OpenAI. You can get an API key by visiting
– Free credits offered by OpenAI: If you are using the free credits offered by OpenAI to use their models, you can check your usage at If you have used up your free credits, you can check the pricing and upgrade your account at
– Proper server deployment: Make sure you use the deployed link from Render at If you are unsure how to deploy the project, follow the steps mentioned in the video.
– After successfully deploying the link, make sure to paste the link in the script file of the client and push it to GitHub. This will allow Vercel to detect and deploy the application properly. Also, please note that the server link used in the Codex repository shared on GitHub has used all of its credits, so it will throw a 429 error and will not work. You will need to use your own server link by deploying it on Render or using another hosting service.

🐛Got stuck? Get your bugs resolved immediately –
🐦 Follow us on Twitter:
🖼️ Follow us on Instagram:

💼 Business Inquiries: [email protected]

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