Welcome to the Gemini Clone project! This is a responsive, feature-packed AI-powered chat interface built entirely using HTML, CSS, and JavaScript, powered by Google’s Gemini 2.0 Flash API. Perfect for anyone exploring frontend development or building real-world AI tools — with zero frameworks!
🧠 AI Chat Integration
- Uses Google Gemini 2.0 Flash API for smart responses
- Supports both text and file inputs (images, PDFs, CSVs, etc.)
🎨 Modern, Responsive UI
- Built with HTML5, CSS3, JavaScript
- Clean layout with dark/light mode toggle
💬 Interactive Chat Interface
- Typing animation for bot replies
- Differentiated message bubbles for user and AI
- Smooth auto-scroll for better UX
📂 Smart File Uploads
- Upload & preview images or docs
- Remove or cancel uploads easily
🧩 Reusable JS Components
- Modular code with helper functions like:
createMessageElement()applyTypingEffect()fetchBotResponse()
📄 Predefined Prompt Suggestions
- Encourages engagement with visual icons
🚨 User Controls
- Stop bot mid-response
- Clear all chats
- Safety disclaimer included
🌐 Robust Error Handling
- Graceful UI for failed API/network calls
📱 Mobile-Friendly Design
- Fully responsive, perfect on any device
To run this project locally:
git clone https://github.com/withaarzoo/Gemini-Clone.git
cd Gemini-Clone
open index.htmlGemini-Clone/
├── index.html
├── style.css
├── script.js
├── assets/
│ ├── logos/
│ ├── icons/
│ └── sample-files/- Gemini Flash API: Visit Site
- Google Fonts: Visit Site
- Google Material Icons: Visit Site
- Netlify: Visit Site
For full access to the source code, click here
Need help building this from scratch?
📌 Watch the Complete Tutorial on YouTube
- Beginner frontend developers
- AI/Chatbot enthusiasts
- Early college students
- Anyone interested in real-world JavaScript projects
For collaborations or queries, reach out via Bento.
