OpenAI-ChatBot--ReactVite

AI-Chat-Bot is a complete project example with OpenAI ChatGPT and React-Vite, using OpenAI API, Emoji-Mart, Uuid, and have a Chat History, New Chat Creation features, and deploy on Vercel.

Please note that at the time you are attempting to access this URL, the free trial OpenAI API key (VITE_OPENAI_API_KEY) has expired. However, during the development of this project, both the project and all associated code were functioning seamlessly. You may use the project folder as it is—simply generate a new VITE_OPENAI_API_KEY from the OpenAI developer site, copy the OPENAI_API_KEY into the .env file, and the project should work as expected.

Online-Live: https://ai-chat-bot-arnob.vercel.app/

To Install Dependences

Before launching this web application, be sure to install all required dependencies, which are listed in the package.json file.

To install all dependences, run this command from your project folder: npm install

To Install NodeJS

Make sure you have NodeJS installed in your machine first, The installation instructions are here: https://nodejs.org/en/

Run your project: npm run dev

Run on your browser Local: http://localhost:5173/

Project Dependencies Package Installation Command

npm i openai

npm i @emoji-mart/data

npm i @emoji-mart/react

npm i uuid

For More Information About OpenAI, Emoji-Mart, Uuid

For More Information About OpenAI Documentation, Emoji-Mart, Uuid, please visit

OpenAI Documentation:

https://www.npmjs.com/package/openai

After creating an account with OpenAI, you must use https://platform.openai.com/docs/api-reference/authentication to generate an API key.

Then apply this API key in your project's .env file.

https://platform.openai.com/docs/api-reference/models/list

https://platform.openai.com/docs/api-reference/completions/create

Emoji-Mart:

About @emoji-mart/data: https://www.npmjs.com/package/@emoji-mart/data

About @emoji-mart/react: https://www.npmjs.com/package/@emoji-mart/react

UUID:

About Uuid (Unique ID Generator): https://www.npmjs.com/package/uuid

To Setup .env File

you must create an .env file in your project folder and save your API key or other sensetive info.

Example:

VITE_OPENAI_API_KEY=

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh