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.
- Powered by Gemini Pro: Direct integration with Google's latest LLM via
gemini.jsconfig. - Smart Context: Maintains conversation context for fluid interactions.
- Real-time Responses: Instant streaming of AI answers.
- 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).
- 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.
| 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 |
Follow these steps to run your own AI assistant locally:
# 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
Go to Google AI Studio.
Create a new API Key.
Note: Ideally, use environment variables (.env). If you are using config/gemini.js, paste your key there (but never push it to GitHub).
npm start
Open http://localhost:3000 to view it in the browser.
| Chat Interface | Mobile Preview |
|---|---|
![]() |
![]() |

