🤖 Ai Chatbot React App, powered by Google Gemini ✨

A modern chatbot web app built with React and Vite, featuring multi-conversation support, a sleek sidebar, and light/dark theme toggle. Powered by Google Gemini API.

🚀 Features

• 💬 Multi-conversation chat with persistent history
• 📚 Responsive sidebar for chat navigation and theme switching
• ⌨️ Typing animation for AI responses
• 🌗 Light and dark themes (auto-detected and user-selectable)
• 💾 Local storage for conversations and settings
• 🧼 Clean, modern UI

🖼️ Page Screenshot

🛠️ Getting Started

📋 Prerequisites

• Node.js (v18+ recommended)
• npm

⚡ Installation

1. Clone the repository:

   git clone https://github.com/nicocodes9/Chatbot-Website.git
   cd gemini-chatbot

---

2. Install dependencies:

   • 📁 Create a new folder and run

   npm install
   npm create vite@latest

   • 🗑️ Remove the default assets folder and app.css files.
   • 📂 Now copy and overwrite the files from the cloned repository folder to the current folder

---

3. Set up your API key:

   • 📝 Create a .env file in the main directory and insert the following lines.

   VITE_API_URL=https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?
   key=Your_API_Key_Here

   • 🔑 Replace the Your_API_Key_Here value with your own Google Gemini API key.

   ⚠️ Caution: When adding your API key to the .env file, do not include spaces, quotes, or brackets. Use the format key=Your_API_Key_Here to avoid parsing errors.

---

4. Start the development server:

   • 💻 Open terminal and run

   npm run dev

   The app will be available at http://localhost:5173.

---

🏗️ Build for Production

npm run build

🧹 Lint

npm run lint

🗂️ Project Structure

src/
  App.jsx
  main.jsx
  index.css
  components/
    Sidebar.jsx
    PromptForm.jsx
    Message.jsx
public/
  gemini.svg

🎨 Customization

• Theme: 🌈 The app auto-detects your OS theme but you can toggle it in the sidebar.
• API: 🔗 Uses the Gemini API endpoint from your .env file. Make sure to keep your API key secure.

📄 License

MIT

---

Built with Vite ⚡ & React ⚛️. UI icons by Lucide 🖌️.