https://github.com/ali-haggag7/gemini-ai-clone
🤖 A fully functional Google Gemini Clone built with React.js and the Google Generative AI SDK. Features real-time chat, history management, and Context API integration.
https://github.com/ali-haggag7/gemini-ai-clone
api-integration artificial-intelligence chatbot context-api frontend-developer generative-ai google-gemini javascript llm react
Last synced: about 1 month ago
JSON representation
🤖 A fully functional Google Gemini Clone built with React.js and the Google Generative AI SDK. Features real-time chat, history management, and Context API integration.
- Host: GitHub
- URL: https://github.com/ali-haggag7/gemini-ai-clone
- Owner: Ali-Haggag7
- Created: 2025-04-05T22:43:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-03T22:05:21.000Z (3 months ago)
- Last Synced: 2026-04-03T23:19:56.576Z (3 months ago)
- Topics: api-integration, artificial-intelligence, chatbot, context-api, frontend-developer, generative-ai, google-gemini, javascript, llm, react
- Language: JavaScript
- Homepage: https://gemini-ai-clone-six-zeta.vercel.app
- Size: 749 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
✨ Gemini AI Clone
A pixel-perfect clone of Google Gemini built with React.js.
Integrated with the official Google Generative AI SDK to provide real-time, intelligent conversations.
## 🔥 Key Features
### 🤖 AI Intelligence
* **Powered by Gemini Pro:** Direct integration with Google's latest LLM via `gemini.js` config.
* **Smart Context:** Maintains conversation context for fluid interactions.
* **Real-time Responses:** Instant streaming of AI answers.
### 🎨 UI/UX Design
* **Modern Interface:** Replicates the clean, minimalist look of the original Gemini.
* **Sidebar Navigation:** Manage chat history and sessions (`Sidebar.jsx`).
* **Responsive Layout:** Optimized for both desktop and mobile views (`Main.jsx`).
### 🛠️ Engineering Concepts
* **State Management:** Utilizes **React Context API** (`Context.jsx`) to handle global state (prompts, results, loading status) without prop drilling.
* **Component Architecture:** Modular structure separating Logic, UI, and Configuration.
---
## 🛠️ Tech Stack
| Component | Technology |
| :--- | :--- |
| **Frontend Framework** | React.js (Hooks & Functional Components) |
| **AI Integration** | Google Generative AI SDK (@google/generative-ai) |
| **State Management** | React Context API |
| **Styling** | Modern CSS3 & Flexbox |
| **Assets** | SVG Icons & Dynamic Assets |
---
## 🚀 Getting Started
Follow these steps to run your own AI assistant locally:
### 1. Clone & Install
```bash
# Clone the repository
git clone [https://github.com/Ali-Haggag7/Gemini-AI-Clone.git](https://github.com/Ali-Haggag7/Gemini-AI-Clone.git)
cd Gemini-AI-Clone
# Install dependencies
npm install
```
### 2. Get Your API Key
Go to Google AI Studio.
Create a new API Key.
### 3. Setup Configuration
Note: Ideally, use environment variables (.env). If you are using config/gemini.js, paste your key there (but never push it to GitHub).
### 4. Run the App
```bash
npm start
```
Open http://localhost:3000 to view it in the browser.
## 📸 Interface Previews
| **Chat Interface** | **Mobile Preview** |
| :---: | :---: |
| 
| 
|
---
Made with ❤️ by Ali Haggag
