Gemini-Clone

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 18 Open GitHub ↗

A fully functional Google Gemini 2.0 flash clone using HTML CSS JavaScript and Google Ai Studio free api key.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🤖 Gemini AI Chat Application

### A Fully Functional AI Chat Application Powered by Google's Gemini

---

<div align="center">
  
  [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/GourangaDasSamrat/Gemini-Clone)

[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/GourangaDasSamrat/Gemini-Clone)
  
  <a href=""><strong>✨ View Live Demo »</strong></a>

</div>
  <p style="margin-top:16px;">
    <a href="https://deepwiki.com/GourangaDasSamrat/Gemini-Clone" title="Detailed documentation on DeepWiki">
      <img alt="DeepWiki Docs" src="https://img.shields.io/badge/Documentation-DeepWiki-4B79FF?style=for-the-badge&logo=readthedocs&logoColor=white" />
    </a>
  </p>
  <p><em>For detailed documentation, guides, and configuration notes — visit the DeepWiki page above.</em></p>
</div>

---
[![Netlify Status](https://api.netlify.com/api/v1/badges/bc4b3983-806a-43bc-8475-e87efc44e157/deploy-status)](https://app.netlify.com/projects/geminiclonebygouranga/deploys)
[![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://choosealicense.com/licenses/mit/)
[![GitHub Stars](https://img.shields.io/github/stars/GourangaDasSamrat/Gemini-Clone?style=social)](https://github.com/GourangaDasSamrat/Gemini-Clone)
[![Made with JavaScript](https://img.shields.io/badge/Made_with-JavaScript-F7DF1E?logo=javascript)](https://www.javascript.com)
[![Code Style](https://img.shields.io/badge/Code_Style-Clean-21BB42.svg)](https://raw.githubusercontent.com/GourangaDasSamrat/Gemini-Clone/master/)
[![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-brightgreen.svg?style=flat)](https://raw.githubusercontent.com/GourangaDasSamrat/Gemini-Clone/master/CONTRIBUTING.md)

</div>

## 📹 Demo Video

[Screencast from 2025-06-06 11-43-36.webm](https://github.com/user-attachments/assets/14521c1a-bd84-41b3-bceb-d1817f596a41)

## 📌 Introduction

Welcome to the Gemini AI Chat Application! This is a fully functional AI chat application powered by Google's Gemini API. Experience natural conversations, code assistance, and creative content generation through a beautifully designed, responsive web application. This project demonstrates the practical implementation of AI capabilities using modern web technologies.

## ✨ Key Features

- 🎯 **Pixel-Perfect UI** - Meticulously crafted interface matching Google's Gemini design
- 📱 **Responsive Design** - Seamless experience across all devices and screen sizes
- 🚀 **Performance Optimized** - Lightning-fast responses and smooth animations
- 🔑 **API Integration** - Pre-configured API key for instant testing and deployment
- 🎨 **Modern Interface** - Clean, intuitive design with attention to detail
- 🛠️ **Developer Friendly** - Well-structured codebase with comprehensive documentation

## 🎯 Core Functionality

- 🤖 **Advanced AI Chat** - Natural language processing and understanding
- 💡 **Smart Responses** - Contextual and informative AI-powered replies
- ⚡ **Real-time Processing** - Instant response generation and display
- 🔍 **Code Intelligence** - Syntax highlighting and code explanation
- 📝 **Rich Text Support** - Markdown rendering and formatting
- 🛡️ **Error Handling** - Graceful error recovery and user feedback
- 🌐 **Cross-platform** - Works seamlessly across all modern browsers

## 🛠️ Technical Stack

| Category        | Technologies                                                                                                                                                                                                                                             |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Frontend        | ![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white) ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black) |
| Libraries       | ![Highlight.js](https://img.shields.io/badge/Highlight.js-660066?logo=files&logoColor=white) ![Marked.js](https://img.shields.io/badge/Marked.js-000000?logo=markdown&logoColor=white)                                                                   |
| UI Components   | ![Boxicons](https://img.shields.io/badge/Boxicons-2E8B57?logo=bookmeter&logoColor=white)                                                                                                                                                                 |
| Deployment      | ![Netlify](https://img.shields.io/badge/Netlify-00C7B7?logo=netlify&logoColor=white)                                                                                                                                                                     |
| Version Control | ![Git](https://img.shields.io/badge/Git-F05032?logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/GitHub-181717?logo=github&logoColor=white)                                                                                               |

## 📁 Project Structure

```
Gemini-Clone/
├── assets/                  # Static assets directory
│   ├── gemini.svg          # Gemini logo
│   ├── Logo.png            # Project logo
│   ├── profile.png         # Profile images
│   ├── boxicons-2.1.4/     # Boxicons library
│   ├── highlight-js/       # Code syntax highlighting
│   └── marked/             # Markdown parsing
├── index.html              # Main HTML file
├── style.css              # Main stylesheet
├── script.js             # Main JavaScript file
├── config.js            # Configuration file
├── README.md           # Project documentation
└── LICENSE.txt        # MIT license
```

## 🚀 Quick Start

### Prerequisites

- Modern web browser
- Basic understanding of web technologies
- Git installed on your machine

### Installation

1. Clone the repository

```bash
   git clone https://github.com/GourangaDasSamrat/Gemini-Clone.git
   ```

2. Navigate to project directory

```bash
   cd Gemini-Clone
   ```

3. Open in browser
   ```bash
   # On Linux/macOS
   open index.html
   # Or simply double-click index.html in your file explorer
   ```

📝 **Important Note:** The project includes a demo API key for testing. For production use, please replace it with your own API key in `config.js`.

### Live Demo

Experience the live version: [Gemini Clone Demo](https://geminiclonebygouranga.netlify.app/)

## 🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📄 License

Distributed under the MIT License. See `LICENSE` for more information.

## ⚠️ Disclaimer

This project is an independent creation and is not affiliated with, endorsed by, or connected to Google or the official Gemini product in any way. It is built solely for educational and demonstration purposes.

## 👤 Author & Contact

<h3 align="center">Gouranga Das Samrat</h3>

<p align="center">
  <i>
    Full Stack Developer • MERN Stack • Technical Writer <br/>
    Passionate about building scalable web apps & contributing to open source
  </i>
</p>

<p align="center">
  <i>
    Open to collaboration, frontend & full-stack projects,
    or meaningful discussions around JavaScript, React & web architecture.
  </i>
</p>
---

## 📊 Performance & Lighthouse Report

### Desktop Performance Scores

![Performance](https://img.shields.io/badge/Performance-98%25-success?style=for-the-badge&logo=lighthouse&logoColor=white)
![Accessibility](https://img.shields.io/badge/Accessibility-100%25-success?style=for-the-badge&logo=lighthouse&logoColor=white)
![Best Practices](https://img.shields.io/badge/Best%20Practices-100%25-success?style=for-the-badge&logo=lighthouse&logoColor=white)
![SEO](https://img.shields.io/badge/SEO-100%25-success?style=for-the-badge&logo=lighthouse&logoColor=white)

### Key Metrics

| Metric                   | Score                                                                                                |
| ------------------------ | ---------------------------------------------------------------------------------------------------- |
| First Contentful Paint   | ![FCP](https://img.shields.io/badge/0.8s-success?style=flat-square&logo=lighthouse&logoColor=white)  |
| Largest Contentful Paint | ![LCP](https://img.shields.io/badge/1.2s-success?style=flat-square&logo=lighthouse&logoColor=white)  |
| Total Blocking Time      | ![TBT](https://img.shields.io/badge/0ms-success?style=flat-square&logo=lighthouse&logoColor=white)   |
| Cumulative Layout Shift  | ![CLS](https://img.shields.io/badge/0.001-success?style=flat-square&logo=lighthouse&logoColor=white) |
| Speed Index              | ![SI](https://img.shields.io/badge/1.0s-success?style=flat-square&logo=lighthouse&logoColor=white)   |

### Bundle Size Analysis

| Resource   | Size                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| JavaScript | ![JS Size](https://img.shields.io/badge/56.2KB-blue?style=flat-square&logo=javascript&logoColor=white) |
| CSS        | ![CSS Size](https://img.shields.io/badge/12.8KB-blue?style=flat-square&logo=css3&logoColor=white)      |
| Total      | ![Total Size](https://img.shields.io/badge/69KB-blue?style=flat-square&logo=files&logoColor=white)     |

</div>

## 🌟 Show Your Support

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

---

## 📢 Feedback

Have suggestions or want to contribute? Feel free to open an issue or reach out to me through my social profiles.

**Happy Programming!**

Gemini-Clone

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README