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.
Note: To check this web app live, click here: https://ai-chat-bot-arnob.vercel.app/
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
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/
npm i openai
npm i @emoji-mart/data
npm i @emoji-mart/react
npm i uuid
For More Information About OpenAI Documentation, Emoji-Mart, Uuid, please visit
OpenAI Documentation:
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/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
you must create an .env file in your project folder and save your API key or other sensetive info.
Example:
VITE_OPENAI_API_KEY=
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