🤖 AI Chat Application

A modern and responsive AI Chat Application built with React, Vite, and Vercel Serverless Functions.
This app allows users to interact with an AI chatbot, manage multiple chat sessions, and enjoy a smooth and responsive chat experience.

🔗 Live Demo: https://chat-with-ai-navy.vercel.app/

---

✨ Features

• 💬 Real-time AI chat using Gemini API
• 🧠 Serverless backend (secure API handling)
• 🗂️ Multiple chat sessions with history
• 💾 Local storage persistence
• 😄 Emoji picker support
• 📱 Fully responsive UI
• 🎨 Clean and modern chat interface
• ⚡ Fast performance with Vite
• 🔐 Secure API key handling via Vercel

---

🛠️ Tech Stack

• React -- Component-based UI
• Vite -- Fast build tool
• CSS -- Custom styling
• Vercel -- Deployment & serverless functions
• Google Gemini API -- AI responses
• LocalStorage API -- Chat persistence
• Emoji Picker -- Enhanced user interaction

---

📁 Project Structure

ai-chat-app/
├── api/
│   └── chat.js
├── public/
├── src/
│   ├── components/
│   │   ├── ChatApp.jsx
│   │   ├── ChatBotStart.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
├── vite.config.js
└── README.md

---

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/hsb-ini-14/ai-chat-app.git
cd ai-chat-app

2️⃣ Install dependencies

npm install

3️⃣ Add environment variables

Create a .env file:

GEMINI_API_KEY=your_api_key_here

4️⃣ Run the development server

npm run dev

Visit: http://localhost:5173

---

🌍 Deployment (Vercel)

1. Push code to GitHub\
2. Import project in Vercel\
3. Add environment variable:

<!-- -->

GEMINI_API_KEY=your_api_key

4. Deploy 🚀

---

🧩 How It Works

• Frontend sends message to /api/chat
• Serverless function calls Gemini API
• Response returned securely
• Chats stored in LocalStorage

---

👤 Author

Harsh Singh Bhaduria

GitHub: https://github.com/hsb-ini-14 LinkedIn: https://www.linkedin.com/in/harsh-ini14/

---

⭐ Support

If you like this project, give it a ⭐ on GitHub!