CodeX — Chat with AI

4 min readDec 29, 2022

Are we about to be replaced by an AI, again?

ChatGPT takes this concept and applies it to text-based conversation. It uses GANs to generate responses to input text, allowing it to engage in natural-sounding conversations with humans.

Problem Statement

Code App with AI

First of all with creating a folder for our project, we need open up the terminal and write the following code.

npm install client --template vanilla

Then the following folder structure will contains all the necessary files and folder, where we have to add up another folder called assets, which contains all the assets for this project.

assets_codex.zip

Edit description

drive.google.com

Now by editing the html and css code will be,

Now the whole work is upon JavaScript, where all the magic occurs.
For the initial part of importing and rationalizing the loading content, when the AI is typing is done by,

Then in the texting part, which is present below have a function which handles the user typing.

Then another function to generate Unique Id’s for each and every messages,

Then a function to check, whether the user or AI is typing, according to that the behavior of the Chat App will change,

Finally a handleSubmit function which handle the submit button during submission.

After this finishes we have to call this function inorder the recall the changes so,

After completion of this part, our project will looks like this

End of Part 1

In the 2nd Part, we have to create another folder corresponding to client folder and name it “server” for the backend purpose.
Visit to that folder through terminal and write the following installation command,

npm init --y

After initialization, we have to install some dependencies such as,

npm install cors dotenv express nodemon openai

This are the dependencies which we will be using in this project.
As our work with “client” folder is done for the time being, we will go for the “server” folder.
And the package.json file of server file will looks like this,

Now all done, we have to react out to the OpenAI API tab in the browser.
This is used in “Build next-gen apps with OpenAI’s powerful models”.
After that, click on “Get Started” and get going with the signup procedure by google.
After doing all that has been asked, the website will redirect to this page

Now click on your profile, and select on “View Api Keys” and create a “new security key” and copy that key.
Now create a “.env” file in the root folder of your project outside the “client” and “server” folder and paste your api key there.
And also create a server.js file inside the “server folder, where all the backend works.
Now as we are dealing with the backend we have to write some code in server.js, which is as follows

The openai part is copied from one of the example of OpenAI examples with changing some of their attributes.
We have to make sure that our server always listen to all new requests, so we can say,

app.listen(5000, () => console.log('Server is running on port http://localhost:5000'));

Now in-order to run un the server with nodemon, we have to make in changes in package.json file that will be,

By doing these changes, we have to run the command “npm run server”, and that’s it the server is running smoothly.
Now in-order to fetch the data from the server, we have to add up some code in handleSubmit function in “script.js” file of “client” folder, and the code will looks like this,