Gemini Clone

A React application that replicates the user interface and functionality of Google's Gemini using the official @google/generative-ai SDK. Built with Vite and React, this project demonstrates how to integrate modern AI models into a web application with a responsive and intuitive chat interface.

Features

• Interactive Chat Interface: Mimics the look and feel of Google's Gemini.
• Generative AI Integration: Powered by the gemini-2.0-flash-thinking-exp-01-21 model for advanced conversational capabilities.
• Responsive Design: Clean and functional UI components for seamless usage.
• State Management: Uses React Context API for global state management (handling prompts, responses, loading states, etc.).

Installation Process

Follow these steps to set up and run the project locally:

1. Navigate to the project directory:

   cd geminiClone

2. Install dependencies: Ensure you have Node.js installed, then run:

   npm install

3. API Key Setup: The application uses the @google/generative-ai package to interact with Google's AI models. The API configuration and key are located in src/config/Gemini.js.

4. Run the Development Server:

   npm run dev

   This will start the Vite development server. Open the provided local URL (usually http://localhost:5173) in your browser to view the application.

File Structure

An overview of the project's structure:

geminiClone/
├── public/                 # Static assets that bypass Vite's build system
├── src/                    # Main source code directory
│   ├── assets/             # Images, icons, and other imported static assets
│   ├── components/         # Reusable React UI components
│   │   ├── main/           # The primary chat area (Main.jsx, Main.css)
│   │   └── sidebar/        # The side navigation panel (SideBar.jsx, Sidebar.css)
│   ├── config/             # Configuration files and API logic
│   │   └── Gemini.js       # Google Generative AI setup and API request functions
│   ├── context/            # React Context for global state management
│   │   └── Context.jsx     # Manages user input, chat history, responses, and loading states
│   ├── App.jsx             # Root React component that renders the Sidebar and Main layout
│   ├── App.css             # Global application styles
│   ├── index.css           # Base styles and resets
│   └── main.jsx            # Application entry point, wraps App with ContextProvider
├── index.html              # HTML entry point
├── package.json            # Project metadata, scripts, and dependencies
├── vite.config.js          # Vite configuration
└── eslint.config.js        # ESLint configuration

Technologies Used

• React: Frontend UI library
• Vite: Frontend build tool and development server
• @google/generative-ai: Google's official SDK for Gemini
• CSS: Custom styling for the interface