This project provides a powerful, feature-rich, and user-friendly web interface for interacting with Google's Gemini family of models. It is a completely client-side application built with modern web technologies, designed to offer developers and enthusiasts a robust platform for exploring the full capabilities of the Gemini API.
The interface moves beyond simple chat by exposing a comprehensive set of configuration options, including model selection, system instructions, tool integration, and detailed generation parameters. This allows for precise control over the model's behavior, making it an ideal tool for prompt engineering, application prototyping, and advanced conversational AI experimentation.
- Introduction
- Key Features
- Getting Started
- How to Use
- Technology Stack
- Active Maintenance and Future Roadmap
- Contributing
- License
This web client is packed with features that provide granular control over the Gemini API:
- Dynamic Model Selection: Easily switch between various Gemini models, including the latest Gemini 2.0 and 2.5 families, directly from the settings panel.
- Session-Based API Key: Securely use the application by providing your API key for the current session. The key is not stored or hardcoded.
- System Prompt Configuration: Provide custom, high-level instructions for the model to follow throughout the conversation. A dynamic default prompt is provided for immediate context.
- Advanced Generation Configuration: Fine-tune the model's output with detailed controls:
- Temperature: Adjust the randomness and creativity of the responses.
- Top-K: Limit the model's sampling pool to the K most likely tokens.
- Top-P: Control the diversity of the output using nucleus sampling.
- Max Output Tokens: Set a hard limit on the length of the generated response.
- Stop Sequences: Define specific text sequences that will halt generation.
- Integrated Gemini Tools: Enable and disable powerful built-in tools with simple toggles:
- Web Search: Allows the model to access real-time information from Google Search.
- URL Context: Enables the model to fetch and process content from specified URLs.
- Code Execution: Grants the model the ability to run Python code in a sandboxed environment.
- Conversation History Management: Control how much of the conversation history is sent back to the model, allowing for a balance between conversational context and token usage.
- Markdown Rendering: Model responses are beautifully rendered with support for headers, lists, code blocks, and more.
- Modern and Responsive UI: A clean, intuitive interface built with Tailwind CSS that works seamlessly on both desktop and mobile devices.
To run this application locally, follow these simple steps.
- Node.js and npm (Node Package Manager) installed on your machine.
- A valid Google Gemini API key. You can obtain one from Google AI Studio.
-
Clone the repository:
git clone https://github.com/lkkhwhb/GenAI.git
-
Navigate to the project directory:
cd GenAI -
Launch the application: Since this is a static client-side application, you can simply open the
index.htmlfile in your web browser.
-
Open the Settings Menu: Click the menu icon in the top-left corner to open the settings sidebar.
-
Enter Your API Key: This is the first and most crucial step. Paste your Gemini API key into the designated field. The key is used only for the current browser session.
-
Configure Your Session: Adjust the various settings to tailor the model's behavior to your needs:
- Model Selection: Choose the Gemini model you wish to interact with.
- System Prompt: Edit the system instructions that the model will adhere to.
- Conversation History: Select how many recent messages should be included for context.
- Tools: Use the toggles to enable or disable Web Search, URL Context, and Code Execution.
- Generation Configuration: Use the sliders and input fields to set parameters like Temperature, Top-P, and Max Output Tokens.
-
Start Chatting: Close the settings menu and begin your conversation in the input box at the bottom of the screen.
- HTML5: The core structure of the web application.
- Tailwind CSS: A utility-first CSS framework for building the modern, responsive user interface.
- Vanilla JavaScript (ES6+): Handles all application logic, including API communication, state management, and DOM manipulation.
- Marked.js: A fast, low-level compiler for parsing Markdown into HTML for rendering model responses.
- Google Gemini API: The backend generative AI service powering the application.
This project is under active maintenance and will be continuously updated to support the latest features and models released for the Google Gemini API. Our goal is to maintain this repository as a cutting-edge, comprehensive tool for interacting with Google's generative models.
Potential future enhancements include:
- Streaming Responses: Displaying the model's response token-by-token for a more interactive, real-time experience.
- Multi-modal Support: Adding the ability to upload images for visual querying.
- Chat History Management: Features to save, load, and export entire conversations.
- Local Storage Persistence: An option to save settings (excluding the API key) in the browser for future sessions.
- Enhanced Error Handling: More descriptive and user-friendly error messages.
Contributions are welcome and encouraged. If you would like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix (
git checkout -b feature/my-new-feature). - Make your changes and commit them with a clear and descriptive commit message.
- Push your changes to your fork (
git push origin feature/my-new-feature). - Create a Pull Request to the main repository.
This project is licensed under the MIT License. See the LICENSE file for more details.
- Google Gemini API Key
Short Description: Required to authenticate and interact with Gemini models.
Link: Google AI Studio API Keys
-
Overview & Capabilities
Short Description: Comprehensive guide to the Gemini API, detailing its features, endpoints, and multimodal support.
Link: Gemini API Overview -
Quickstart Guide
Short Description: Step-by-step instructions to get started with the Gemini API, including setup and making your first request.
Link: Gemini API Quickstart -
Authentication / API Keys
Short Description: How to create and manage your Gemini API keys in Google AI Studio.
Link: Using Gemini API Keys -
Model Documentation
Short Description: Detailed information on available Gemini models, including capabilities and use cases.
Link: Gemini Models -
API Reference
Short Description: Detailed reference for all available API methods, including content generation, embeddings, and specialized models.
Link: Gemini API Reference -
Release Notes
Short Description: Changelog detailing updates and changes to the Gemini API.
Link: Gemini API Release Notes
-
Temperature, Top-K, and Top-P
Short Description: Controls the randomness, creativity, and diversity of model responses.
Link: Adjust Parameters Documentation -
Max Output Tokens
Short Description: Limits the length of the generated response.
Link: Explanation on Tokens -
Stop Sequences
Short Description: Defines sequences that halt generation when encountered.
Link: Stop Sequences Info -
Web Search & URL Context
Short Description: Enables the model to fetch real-time information from the web and process URL content.
Link: Gemini API Tools Overview -
Code Execution
Short Description: Allows the model to run Python code in a sandboxed environment.
Link: Gemini API Tools Overview
-
Tailwind CSS
Short Description: Utility-first CSS framework for building modern and responsive interfaces.
Link: Tailwind + Gemini Example -
Markdown Rendering (Marked.js)
Short Description: Renders model responses with proper formatting including headers, lists, and code blocks.
Link: Marked.js Documentation