Gemini-CLI-UI: Intuitive Web Interface for Gemini CLI

Gemini-CLI-UI is an open source web interface tool based on Google's Gemini CLI development. It allows developers to use the Gemini CLI 's AI capabilities to simplify coding. Users can access it on any device, including phones, tablets, and computers. The tool offers an intuitive chat interface, file management, code editing and Git manipulation. It supports real-time interaction, session management, and multiple programming languages for developers to quickly work with code and project management. The project is licensed under the GNU General Public License v3.0, and the code is publicly available for users to use and modify freely.

Function List

• Responsive design with support for desktop, tablet and mobile cross-device use.
• Built-in chat interface to interact with the Gemini CLI in real-time for AI coding advice.
• Integrate Terminal to run Gemini CLI commands directly from a web page.
• File browser with support for viewing project structure, editing files and syntax highlighting.
• Git integration, view changes, switch branches, commit code.
• Session management, saving and restoring conversations, tracking history.
• Support for multiple Gemini models, including Gemini 2.5 Pro.
• Image upload feature to upload images and ask questions in chat.
• YOLO mode to skip confirmation prompts and speed up operations.

Using Help

Installation process

Gemini-CLI-UI is a web-based tool that requires cloning your GitHub repository and configuring your environment. Below are the detailed installation steps:

1. Ensuring the environment
   Make sure you have Node.js version 20 or higher installed. You can visit the official Node.js website to download and install it. Run the following command to check the version:

   node -v
   

2. clone warehouse
   Open a terminal and run the following command to clone the project locally:

   git clone https://github.com/cruzyjapan/Gemini-CLI-UI.git
   cd Gemini-CLI-UI
   

3. Installation of dependencies
   Run the following command in the project directory to install the required dependencies:

   npm install
   

4. Configuring Environment Variables
   The project needs to be configured .env File. Copy the provided .env.example Documentation:

   cp .env.example .env
   

   compiler .env file, add the Google AI Studio or API key for Vertex AI. Example:

   GEMINI_API_KEY=your_api_key_here
   

   API keys are available through Google AI Studio or the Vertex AI platform to obtain it. Make sure the key is secure and not public.

5. Starting services
   After the installation is complete, run the following command to start the local server:

   npm start
   

   By default, the service runs in the http://localhost:3000. Open your browser and visit this address to use it.

6. login authentication
   On first access, you will be prompted to sign in with your Google account. Once logged in, the Gemini-CLI-UI connects to the Gemini CLI and automatically assigns the session.The SQLite database (geminicliui_auth.db) is used to store authentication information to ensure security.

Main Functions

1. Live chat interface

• Functional Description: Interact with the Gemini CLI through the built-in chat interface to get AI coding advice or answer questions.
• procedure::
  1. After logging in, click the "Chat" button at the top of the page to enter the interactive interface.
  2. Enter a question in the input box, such as "Help me write a Python sort function".
  3. The Gemini CLI returns answers in real time, supporting code blocks, text and file references.
  4. Support for image upload: Click the upload button, select an image, and ask a question such as "Analyze the code in this image".
  5. Sessions are automatically saved and the history can be viewed in the Session Manager.

2. Integrated terminals

• Functional Description: Run Gemini CLI commands directly from a web page, without the need for a local terminal.
• procedure::
  1. Click on the Terminal tab of the page to open the built-in shell.
  2. Enter the Gemini CLI command, for example:

     gemini > Write a React component for a login form
     

  3. The results will be displayed as streaming, supporting real-time interaction.
  4. Use YOLO mode (enabled in Setup) to skip confirmation prompts and speed up operation.

3. Document viewer and editing

• Functional Description: Browse project files with support for live editing and syntax highlighting.
• procedure::
  1. Click on "File Browser" in the left navigation bar.
  2. Browse the project catalog and click on a folder to expand/collapse it.
  3. Clicking on the file opens the CodeMirror editor, which supports syntax highlighting for Python, JavaScript, and other languages.
  4. After editing, click the "Save" button and the changes will be saved to a local file in real time.
  5. Support for creating, deleting and renaming files/folders.

4. Git Integration

• Functional Description: Manage your Git repositories, view changes, commit code, and switch branches.
• procedure::
  1. Click the "Git Browser" tab to see the current status of your repository.
  2. To view uncommitted changes, click the "Staging" button to add a file.
  3. Enter your commit information and click the "Submit" button to complete your Git commit.
  4. Switch branches or create new branches in the Branching options.
  5. Support for viewing the last 7 days of submission history.

5. Session management

• Functional Description: Save and resume conversations with the Gemini CLI and manage multiple sessions.
• procedure::
  1. You can view all historical conversations on the Conversation management screen.
  2. Click on a session to resume the conversation and view the timestamp and metadata.
  3. Unneeded sessions can be deleted to free up storage space.

caveat

• assure .env file is configured correctly, otherwise you cannot connect to the Gemini CLI.
• YOLO mode is suitable for advanced users, no confirmation prompt for operation after enabling, be careful.
• The project is built on React 18 and CodeMirror, modern browsers (e.g. Chrome, Firefox) are recommended for the best experience.

application scenario

1. Mobile Development
   Developers can access their projects, edit code, or run Git commands from their phones or tablets on the go, using the Gemini-CLI-UI to maintain work continuity.
2. Teamwork
   Team members share projects through the web interface, view code changes in real time, and commit to Git repositories for more efficient collaboration.
3. Learning and Debugging
   Beginners use the chat interface to ask Gemini CLI questions, get code samples or debugging advice, and learn to program quickly.
4. Rapid Prototyping
   Developers quickly generate code frameworks with terminal commands and combine file editing features to adjust code and accelerate prototyping.

QA

1. Do I need to install the Gemini CLI?
   Yes, Gemini-CLI-UI is the web interface for Gemini CLI, you need to install Gemini CLI and configure the API key first. You need to install Gemini CLI and configure the API key first. Refer to the official Gemini CLI documentation for the installation guide.
2. What programming languages are supported?
   The file editor supports syntax highlighting in several languages, including Python, JavaScript, Java, C++, etc., as provided by CodeMirror.
3. How do I secure my API keys?
   Don't put .env The files are uploaded to a public repository. the Gemini-CLI-UI uses a SQLite database to store authentication information for secure storage.
4. What are the risks of the YOLO model?
   YOLO mode skips confirmation prompts, which may lead to misoperation (e.g., deletion of files). It is recommended to enable it only for familiarization operations.