https://github.com/arnobt78/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.
https://github.com/arnobt78/openai-chatbot--reactvite
chat-bot chat-history-database chatgpt chatgpt-bot emoji-mart openai openai-api-chatbot openapi react-vite reactjs uuid uuid-generator vercel-deployment
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/arnobt78/openai-chatbot--reactvite
- Owner: arnobt78
- Created: 2024-09-27T13:14:56.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-03-08T13:23:00.000Z (3 months ago)
- Last Synced: 2025-03-08T14:23:32.081Z (3 months ago)
- Topics: chat-bot, chat-history-database, chatgpt, chatgpt-bot, emoji-mart, openai, openai-api-chatbot, openapi, react-vite, reactjs, uuid, uuid-generator, vercel-deployment
- Language: JavaScript
- Homepage: https://ai-chat-bot-arnob.vercel.app/
- Size: 55.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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 Run Project
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`
## 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=
```
## 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