Chatbot using OpenAI API
Tags: webdev, javascript, ai, vite
Published: 2022-12-25 15:32:25

Hi all this is my first post on dev.to.

Recently i came across a very amazing AI chatbot named chatgpt and once i started using it, i understood that how far the technology of AI reached and now it help us getting work done quick. 
OpenAI's GPT-3 API has opened up a world of possibilities for developers looking to create AI chatbots. GPT-3 is an advanced machine learning model that can process and generate natural language, making it ideal for creating AI chatbots. 

In this blog post i will be discussing about a web app made by me
 in which i tried to implement the OpenAI gpt-3 api in a web app in a similar fashion like chatgpt. I named the app CodePal 😁.
You can just chat with it and ask it questions it will answer to your questions with reply it recieves from the OpenAI API.



Below is the tech stack i used,

To keep things simple i went with using Vite as a build tool, that too the vanilla vite template as i did not wanted to complicate things.

First i built out the client side of a app in which i used HTML, CSS and vanilla Javascript.

Below is the folder structure for the client side of the app >

![client side folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd9y9gb6w4cojhhkqxib.png)

On the server side i used Express js as the backend service and below packages nodemon,dotenv,cors. Also, the openai node module was used to communicate with OpenAI gpt3 API. For getting data from the api i used the the javascript built in fetch API. 


![Server side folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvsnxmymz69302fsw19e.png)

Regarding the OpenAI API usage, i used the 'text-davinci-003' nlp model. With below values as the API usage parameter, 


```json
{
model: "text-davinci-003",
      prompt: `${prompt}`,
      temperature: 0,
      max_tokens: 3000,
      top_p: 1,
      frequency_penalty: 0.5,
      presence_penalty: 0
  }
```

I also deployed the project for free, using [Vercel](https://vercel.com/) as the application to host the client side and render [Render](https://render.com/) as the appication to host the server side, my experience with using this two apps was awesome, these two app make the deployment process so easy. Both od the above apps has decent free tier which is perfect for deploying hobby/side project.

Below is the link to the github repository, please have a look >>
[Codepal Github link](https://github.com/ayazmirza54/codepal)

Link to the hosted app >>
[CodePal](codepal.vercel.app)


![Codepal Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xw35uhkcrb18e0byp83r.png)



To conclude, GPT-3 is a powerful AI chatbot development framework that is powered by the most advanced machine learning model available. It offers an advanced API and simple syntax that makes it easy to create custom AI chatbots. GPT-3 is lightweight, open-source, and highly extensible, making it a great choice for developers looking to create an AI chatbot. It is also well-documented and its increasing popularity make it sure to be a mainstay in the AI chatbot development space for years to come.

I had so much fun in making this project, loved the OpenAI API as it is easy to implement in your own web app and one can leverage of the power of such advanced NLP models so easily. Vite is also an awesome tool it makes the build process so fast, within seconds our app is ready to go. Vercel and Render is a very good combination to host and deploy any full stack application without even spending a penny.