Gemini-CLI-UI

2025-07-22AI工作效率 / 编程/开发31 次浏览

综合介绍

Gemini-CLI-UI 是一个开源项目，它为谷歌官方的命令行工具 Gemini CLI 提供了一个功能全面的网页图形界面（Web UI）。核心作用是让开发者可以通过浏览器，在电脑或手机等任何设备上，用可视化的方式与 Gemini CLI 交互，进行AI辅助编程。这个工具将命令行功能封装在用户友好的界面中，集成了项目管理、AI聊天、文件浏览与实时编辑、代码版本控制（Git）以及集成终端等功能。用户无需再完全依赖命令行窗口，就可以方便地管理AI编码项目、与Gemini模型对话、修改代码文件并提交版本更新，从而简化了开发流程。

功能列表

响应式设计：界面能自动适应桌面电脑、平板和手机屏幕，方便在不同设备上使用。
交互式聊天：提供一个专门的聊天窗口，可以与 Gemini 模型进行实时对话、提问、上传图片并获取代码建议。
集成终端：内置一个命令行终端，可以直接在网页里执行 Gemini CLI 命令或其他系统命令。
文件浏览器与编辑器：支持以树状目录浏览项目文件，并内置了带有语法高亮的代码编辑器，可以直接在网页上查看和修改代码。
Git版本控制：集成了Git图形化界面，可以直观地查看文件变更、选择文件暂存（stage）以及提交（commit）代码更新，还支持切换不同分支。
会话管理：能够自动保存聊天记录，支持恢复之前的对话，方便回顾和继续之前中断的工作。
模型选择：允许用户在设置中根据需求选择不同的 Gemini 模型，例如 Gemini 1.5 Pro。
用户认证系统：项目包含一个基础的用户登录和注册系统，以确保使用安全。
YOLO模式：提供一个“快速模式”，开启后执行某些操作会跳过确认提示，用于提升效率，但需谨慎使用。

使用帮助

Gemini-CLI-UI 旨在为习惯使用图形界面的开发者提供一种更直观的方式来操作强大的 Gemini CLI。下面将详细介绍如何安装和使用这个工具。

准备工作

在开始安装 Gemini-CLI-UI 之前，请确保你的系统满足以下两个基本条件：

安装 Node.js: 你的电脑需要安装 v20 或更高版本的 Node.js。你可以在终端输入 node -v 来检查当前版本。
安装并配置 Gemini CLI: 你必须已经安装了谷歌官方的 gemini 命令行工具，并且已经完成了基本的配置，例如设置好了API密钥。你可以通过在终端运行 gemini 命令来确认它是否能正常工作。

安装流程

请按照以下步骤来完成安装和启动：

克隆项目代码打开你的终端，使用git命令将项目的源代码从GitHub克隆到你的本地电脑。
```
git clone https://github.com/cruzyjapan/Gemini-CLI-UI.git
```
进入项目目录使用cd命令进入刚刚克隆下来的文件夹。
```
cd Gemini-CLI-UI
```
安装依赖文件项目依赖一些第三方库来运行，使用npm命令来自动安装所有需要的库。
```
npm install
```
配置环境变量项目中包含一个环境配置的示例文件 .env.example。你需要复制它来创建一个你自己的配置文件 .env。
```
cp .env.example .env
```
之后，你可以用文本编辑器打开 .env 文件，根据需要修改端口号等设置。默认情况下，后端API服务器运行在 4008 端口，前端开发服务器运行在 4009 端口。
启动应用在项目根目录下运行以下命令，以开发模式启动应用。开发模式支持热重载，即你修改代码后网页会自动刷新。
```
npm run dev
```
当终端显示服务成功启动后，你就可以在浏览器中访问应用了。
访问Web界面打开你的浏览器，输入默认地址 http://localhost:4009。首次访问时，系统会引导你创建一个管理员账户。

核心功能操作指南

1. 项目管理Gemini-CLI-UI 会自动检测并加载由 Gemini CLI 创建的项目。这些项目通常位于你用户主目录下的 ~/.gemini/projects/ 文件夹中。你可以在界面左侧看到所有项目的列表，包括项目的元数据和会话数量。

2. 聊天界面这是与AI互动的主要区域。

发起对话: 你可以直接在底部的输入框中输入问题，或者上传图片进行提问，然后按回车键发送。Gemini 的回答会以流式的方式实时显示在聊天窗口中。
会话历史: 所有的对话都会被保存。你可以随时回顾之前的问答记录，或者从之前的会话继续提问。
使用集成终端: 如果你想直接使用命令行，可以点击界面上的“Shell”或终端图标，切换到集成终端模式，在这里你可以手动输入 gemini 命令。

3. 文件浏览器与编辑器在界面的左侧面板，你可以看到当前项目的完整文件目录树。

浏览文件: 点击文件夹可以展开或折叠。
编辑文件: 点击任意代码文件，它会在主编辑区打开。编辑器支持多种语言的语法高亮，你可以像在本地IDE中一样阅读和修改代码。
文件操作: 修改文件后，记得保存。你也可以直接在文件树上进行创建、重命名或删除文件等操作。

4. Git版本控制切换到“Git Explorer”视图，你可以管理项目的版本。

查看变更: 界面会清晰地列出所有被修改、新增或删除的文件。
暂存与提交: 你可以勾选需要提交的文件（相当于 git add），然后在下方的文本框中输入提交信息，最后点击“Commit”按钮完成提交（相当于 git commit）。
分支管理: 你还可以方便地查看当前所在的分支，并切换到其他分支。

5. 安全设置与工具启用为防止意外操作，Gemini-CLI-UI默认禁用了所有可能修改文件的工具。

启用工具: 点击侧边栏的齿轮（设置）图标，进入工具设置页面。在这里，你可以根据需要选择性地开启某些工具，例如文件写入权限。
YOLO模式: 在设置中可以找到“YOLO Mode”开关。开启它之后，执行操作时系统将不再弹出确认对话框。这能加快操作速度，但因为跳过了确认环节，潜在风险也更高，请谨慎使用。

应用场景

远程与移动办公当开发者不在主力开发电脑旁时，可以使用平板电脑或手机浏览器访问部署好的Gemini-CLI-UI，查看项目进度、与AI讨论代码逻辑，甚至进行一些紧急的代码小修改并提交。
AI辅助代码生成与重构在一个屏幕上打开代码文件，在另一个聊天窗口中向Gemini提问，例如“请帮我重构这段代码以提高性能”或“为这个函数生成单元测试”。然后直接将AI生成的代码复制粘贴到编辑器中进行修改和测试，极大地提高了开发效率。
项目初始化与快速原型开发在创建一个新项目时，可以利用AI快速生成项目的基础目录结构、配置文件和通用代码模板。通过文件浏览器和编辑器立即创建和修改这些文件，快速搭建起一个可运行的项目原型。
代码审查与学习团队成员可以利用这个工具进行代码审查。将需要审查的代码文件在编辑器中打开，然后向Gemini提问关于这段代码的潜在问题、可优化点或实现逻辑，把它当作一个24小时待命的技术专家来辅助分析和学习。

QA

为什么我启动后看不到任何项目？这通常是因为Gemini CLI还没有在任何项目目录中被初始化。请确保你已经在本地电脑上正确安装了Gemini CLI，并且至少在一个项目文件夹中运行过 gemini 命令。Gemini-CLI-UI会自动扫描并加载位于 ~/.gemini/projects/ 目录下的项目。
我无法在编辑器中保存文件或看到文件内容，提示权限错误。请检查运行Gemini-CLI-UI服务的用户是否对你的项目文件夹有足够的读写权限。另外，请检查你是否在工具的安全设置中开启了文件系统的相关操作权限，因为默认情况下这些权限是关闭的。
我在设置中切换了Gemini模型，但似乎没有生效？在设置页面选择新的模型后，请确保你点击了“保存设置”按钮。如果问题仍然存在，尝试清理浏览器的本地存储（Local Storage）和缓存，然后重新登录并进行配置。
YOLO模式是什么，使用它有什么风险？YOLO（You Only Live Once）模式相当于Gemini CLI的 --yolo 标志，它会跳过所有操作前的确认提示，例如修改或删除文件。这可以让你工作得更快，但也意味着一旦误操作，可能会在没有警告的情况下直接执行，存在数据丢失的风险，因此建议仅在完全清楚操作后果时使用。