OpenAI ChatBot (Chat History Feature) – React

---

Project Summary

OpenAI-ChatBot--ReactVite is a modern, production-ready AI Chatbot web application. Built with React and Vite, it leverages the OpenAI GPT API for smart, multi-turn conversations—demonstrating a complete, secure, and scalable chatbot solution for web. This project is crafted for developers and learners to explore AI chat integration, modular React frontends, secure API usage, and rapid deployment with Vite.

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

This repository is perfect for:

• Learning: Study a real-world React + Vite codebase with OpenAI integration.
• Customization: Build your own AI chatbot or extend features easily.
• Deployment: Ready for Vercel or any Node.js-friendly host.

---

Table of Contents

• Features
• Project Structure
• Technology Stack
• Installation
• Running the Project
• .env Setup
• Component and API Walkthrough
• How it Works
• Project Keywords
• Example Code & Usage
• Resources & Documentation
• Notes
• Conclusion

---

Features

• Modern UI with React + Vite: Fast, modular, and easy-to-extend codebase.
• OpenAI GPT Integration: Real AI-powered conversations using the OpenAI API.
• Chat History & Multi-Chat: View previous conversations and create new chats easily.
• Emoji Support: Seamless emoji picker with emoji-mart.
• Unique Chat IDs: Each chat session uses a UUID for robust, unique identification.
• Environment Variable Support: Secure API key management via .env.
• Deployable on Vercel: Optimized for rapid deployment and scalability.
• Easy to Customize: Modular component structure and clear code separation.
• Responsive Design: Works well on desktop and mobile devices.

---

Project Structure

/OpenAI-ChatBot--ReactVite
│
├── public/                # Static assets (favicon, images, etc.)
├── src/
│   ├── Components/        # Main React components for UI (Chat, ChatList, EmojiPicker, etc.)
│   ├── App.jsx            # Main App component (renders layout, routing, logic, state)
│   ├── main.jsx           # React/Vite entry point
│   ├── index.css          # Base styles
│   └── ...                # Other source files
├── .env                   # Your environment variables (not committed)
├── .eslintrc.cjs          # ESLint configuration for code quality
├── package.json           # Project dependencies and scripts
├── package-lock.json      # Dependency lockfile
├── vite.config.js         # Vite configuration (build, dev server, plugins)
├── index.html             # Main HTML template
└── README.md              # This documentation

Notable Folders & Files

• src/Components/: Contains all UI pieces, e.g. Chat window, ChatList for conversation history, EmojiPicker, etc.
• App.jsx: Application root, manages global state, chat logic, and layout.
• main.jsx: Entry point, bootstraps React app.
• vite.config.js: Vite project config for fast builds and hot reloads.
• .env: Store your OpenAI API key securely (not committed).

---

Technology Stack

• Frontend: React, Vite
• AI/Backend: OpenAI API
• State Management: React hooks and local state
• Emoji Support: emoji-mart
• Unique IDs: uuid
• Deployment: Vercel (or any Node.js hosting)
• Styling: CSS (customizable)

---

Installation

Before running the app, ensure you have Node.js installed.

1. Clone the repository:

   git clone https://github.com/arnobt78/OpenAI-ChatBot--ReactVite.git
   cd OpenAI-ChatBot--ReactVite

2. Install dependencies:

   npm install

3. Install required packages individually (if needed):

   npm i openai
   npm i @emoji-mart/data
   npm i @emoji-mart/react
   npm i uuid

---

Running the Project

1. Start the development server:

   npm run dev

2. Open your browser and navigate to:

   http://localhost:5173/
   

---

.env Setup

Create a .env file in the root of your project to store sensitive keys like your OpenAI API key.

Example .env file:

VITE_OPENAI_API_KEY=your_openai_api_key_here

⚠️ Note: The provided example key may be expired. Please generate your own from your OpenAI account.

---

Component and API Walkthrough

Main Components

• App.jsx: The top-level component. Handles app layout, routing, and high-level state such as chat history and selected chat.
• Components/Chat.jsx: Core chat interface where user messages and AI responses are displayed.
• Components/ChatList.jsx: Sidebar for listing chat sessions (past and present), allows switching between conversations.
• Components/EmojiPicker.jsx: Lets users easily insert emojis into messages.
• Components/MessageBubble.jsx: Displays individual chat bubbles for user and AI.

APIs & Utilities

• OpenAI API: Used to generate chat responses. All calls are securely proxied using your API key from .env.
• UUID: Generates unique IDs for each chat session.
• Helpers/Utils: Additional functions for formatting, local storage management, etc.

---

How it Works

1. User types a message into the chat input.
2. Chat message is added to the active conversation state.
3. App sends the message to the OpenAI API using your API key via a fetch/XHR call.
4. AI response is received and appended to the chat.
5. Chat history is maintained and viewable in the sidebar.
6. Users can start new chats (each gets a unique UUID).
7. Emoji picker allows for expressive messaging.
8. All sensitive keys are managed via .env and never committed to the codebase.

---

Project Keywords

• OpenAI
• ChatGPT
• React
• Vite
• Emoji-Mart
• Vercel
• UUID
• AI Chatbot
• Chat History
• Multi-Chat
• Environment Variables
• Modern Web App

---

Example Code & Usage

Sending a Message to OpenAI

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.VITE_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

async function getAIResponse(userMessage) {
  const response = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: userMessage }],
  });
  return response.data.choices[0].message.content;
}

Adding Emoji Support

import Picker from '@emoji-mart/react';
import data from '@emoji-mart/data';

<Picker data={data} onEmojiSelect={addEmojiToInput} />

Creating a New Chat Session

import { v4 as uuidv4 } from 'uuid';

const newChat = {
  id: uuidv4(),
  messages: [],
  createdAt: Date.now(),
};

---

Resources & Documentation

• OpenAI:

  • OpenAI npm package
  • API Authentication
  • List Models
  • Create Completions

• Emoji-Mart:

  • @emoji-mart/data
  • @emoji-mart/react

• UUID:

  • uuid npm package

---

Notes

• For the latest features or issues, feel free to submit an issue or PR.
• The screenshots above illustrate the UI and its features.
• The OpenAI API key must be valid and active for the chatbot to function.
• All code is modular and commented for learning and extension.

---

Conclusion

This project is a great starting point for anyone looking to learn about AI chatbots, React architecture, API integration, and modern web app deployment. It’s designed both for practical use and as a teaching/learning resource. Explore, extend, and make it your own!

---

Happy Coding! 🎉
Thank you for checking out this project!