Gemini CLI UI: A Responsive Web Interface for AI-Assisted Coding

This article introduces a compelling open-source project that allows you to integrate a responsive, web-based user interface with the Gemini CLI.

Introducing Gemini CLI UI

Recently, an open-source project named Gemini CLI UI has emerged. It's a responsive web-based UI providing an intuitive interface for Google's Gemini CLI, designed to enable AI-assisted coding from any device. Its features include an interactive chat, an integrated terminal, a file explorer with live editing capabilities, Git integration, and session management.

For those unfamiliar with Gemini CLI, it is a command-line tool developed by Google that grants developers direct access to Gemini models from their terminal. This project essentially adds a channel-like interface for using Gemini CLI, and you can conveniently select the model to use from the settings page.

Architecture and Key Features

The project's architecture is built with React for the front end and Express for the back end, which connects to the Gemini CLI. It utilizes an SQLite database for session management.

Some of the key features of this project include: - A responsive UI design - An interactive chat interface - An integrated shell terminal for direct CLI access - A comprehensive file explorer - A Git explorer for source control - Robust session management - Model selection capabilities - A "YOLO mode," which permits Gemini to execute actions without requiring user permission.

Because this is a web-based program, it can be installed on a server, allowing you to interact with your projects remotely. To learn more, you can access the project's GitHub repository. For now, let's proceed with installing this UI to evaluate its performance.

Installation and Setup Guide

To install Gemini CLI UI, you simply need to clone the repository to your machine. You can start with the following command:

git clone [email protected]:example/gemini-cli-ui.git

If you don't have the Secure Shell (SSH) protocol enabled on GitHub, you might encounter a permission denied error. In that case, you can copy the full URL to the repository and clone it using the HTTPS method instead:

git clone https://github.com/example/gemini-cli-ui.git

Once the project is successfully copied, use the cd command to navigate into the project directory and then run the npm install command. This will install all the necessary dependencies for the project.

cd gemini-cli-ui
npm install

After the installation finishes, run the cp command to copy the env.example file to a new .env file.

cp .env.example .env

For a local installation, you can leave this file as it is. However, if you plan to install it remotely, you will need to modify some variables within this file. For a production environment, you should add a JWT key for securing the session and change the NODE_ENV to production. For testing or local use, these changes are not necessary.

With the setup complete, all that remains is to run the npm run dev command.

npm run dev

The web UI will now be running. You can access it using one of the provided URLs in your browser, such as http://localhost:3000.

First Impressions and Configuration

Upon opening the web UI, you will be prompted to create an account by entering a username and password. After creating the account, you'll see the main interface. To explore the full range of features, you must first add a project. For this demonstration, a MERN stack web app for real estate listings was added.

Once the project is added, you can click on it to open the chat interface. The default model used is the Flash model. To switch to the Pro model, navigate to the tool settings menu in the bottom-left corner. From there, you can change the model to Gemini 1.5 Pro. You can also enable YOLO mode, notification sounds, and manage allowed or disallowed tools. The appearance settings allow you to switch to a light theme, though the dark theme will be used for the remainder of this article.

After saving the settings, you can test the chat window with the newly selected Gemini 1.5 Pro model. A simple query like, "What is this project about?" can be used to start.

While waiting for the response, you might notice some MCP standard error logs. These appear to be status messages indicating that the MCP servers are running, rather than actual errors. The AI should function correctly, providing a detailed output. For instance, Gemini might respond: "This is a MERN stack application for a real estate platform. The backend is built with NodeJS and Express, and it uses MongoDB for the database. The front end uses React and Redux." This demonstrates that Gemini can analyze the project without any issues.

Exploring the Interface

Integrated Shell You can open the Gemini CLI UI by clicking on the "Shell" menu in the top-right corner and then clicking the "Continue in Shell" button. This should display the standard Gemini CLI interface. However, during testing, there was an issue where the terminal did not accept any input.

File Explorer The "Files" menu reveals all files and folders within the project. You can open any file and edit its content directly within the UI. After making changes, you can save them. This feature functions as a basic integrated file editor.

Source Control The "Source Control" menu displays any changed files. From here, you can create a new commit to save your changes. There is also a tab to view the commit history.

Building an App from Scratch

To further test its capabilities, a new empty folder was added as a project. The following prompt was provided to Gemini:

"Create a minesweeper game in neon color style. Use HTML, CSS, and JS."

Initially, it seemed that Gemini did nothing. It indicated it would create an HTML file, but the process appeared to stop without creating any files. This was likely because the necessary tools were disabled by default.

To fix this, navigate back to the tool settings and enable the required tools, such as write_file and read_file, or simply enable YOLO mode to grant Gemini full access. After saving the new settings and resubmitting the prompt, Gemini successfully created the required files.

Note: The newly created files might not immediately appear in the web UI's file explorer. A manual refresh of the web UI may be necessary to see them.

Once the files are visible, you can open the game in a browser. The Minesweeper game should be fully functional, allowing you to play without any problems.

Final Thoughts and Alternatives

The Gemini CLI UI brings a polished web interface to interact with Gemini CLI, whether locally or remotely. However, for local development, this UI might feel unnecessary. A more convenient setup could be to use a code editor like VS Code with the Gemini CLI running in an integrated terminal docked to the side.

For those who prefer a chat-like interface integrated directly into their IDE, the Gemini Code Assist plugin is an excellent alternative. Besides offering a UI, Gemini Code Assist also provides real-time code suggestions and automatic completions, which is beneficial for developers who prefer not to rely solely on an agent-based workflow.

However, if your goal is to set up a project remotely for team collaboration, installing Gemini CLI UI on a server, perhaps within a Docker container, could be a very effective solution.

Ultimately, the Gemini CLI web UI is a noteworthy tool. It is encouraged for you to try it out and see how it fits into your own development workflow.