Gemini Chatbot React

A sleek, AI-powered chatbot built with React, Vite, and Tailwind CSS, powered by Google Gemini Pro. Features Markdown support, Gemini/Google branding, and a fully responsive, modern UI.

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/itsahmadawais/gemini-chatbot-react.git
cd gemini-chatbot-react

2. Install Dependencies

npm install

3. Add Gemini API Key

Create a .env file in the root directory:

VITE_GEMINI_API_KEY=your_google_gemini_api_key

🔐 Get your API key from Google AI Studio.

📌 Do not commit your .env file.

4. Run the App

npm run dev

---

✨ Features

• ⚡ Fast Vite + React setup
• 🎨 Beautiful Tailwind-styled UI
• 🤖 Gemini Pro integration via API
• 📜 Markdown rendering for Gemini replies
• 💬 Scrollable and responsive chat layout
• 👋 Auto greeting message on initial load
• 🧠 Easily customizable components and branding

---

🧾 File Structure

src/
├── api/
│   └── gemini.ts           # Gemini API integration
├── assets/
│   ├── google.webp         # Google logo
│   └── react.svg           # Placeholder avatar (replaceable)
├── components/
│   ├── Chatbot.tsx         # Main chat interface
│   └── MessageBubble.tsx   # Chat bubble with Markdown support

---

🛠 Customization

• ✏️ Greeting Message: Update in Chatbot.tsx
• 🖼 Logo & Avatar: Replace react.svg with the official Gemini avatar (if available)
• 🎨 Colors/Styling: Tweak Chatbot.tsx and MessageBubble.tsx using Tailwind classes

---

📄 License

MIT