Claude Code UI 让你在浏览器管理全部 Claude Code 会话，免费开源-创锋一号

Claude Code UI 让你在浏览器管理全部 Claude Code 会话，免费开源

【免费下载链接】claudecodeuiUse Claude Code, OpenCode, Cursor CLI, and Codex on mobile and web with CloudCLI (aka Claude Code UI). CloudCLI is a free open source webui/GUI that helps you manage your Claude Code session and projects remotely.项目地址: https://gitcode.com/GitHub_Trending/cl/claudecodeui

出门在外或离开工位时，跑在电脑上的 AI 编码任务你只能干等。Claude Code UI（CloudCLI）就是为了解决这件事：它把 Claude Code、Cursor CLI、Codex 这些命令行 AI 工具包进一个免费开源的 Web 界面，让你在浏览器或手机上就能管理所有编码会话和项目。

初识 Claude Code UI

它是 AI 编码助手的 Web 图形界面，会自动发现你电脑里已有的全部会话，把 AI 读文件、跑命令等操作直接展示在对话里，并内置文件树、Git 面板和 Shell 终端。适合天天用 Claude Code 命令行开发的程序员，也适合需要离开电脑后仍想跟进任务的人。

三步启动 Claude Code UI 🚀

把仓库克隆到电脑（需要 Node.js v22 及以上）：git clone https://gitcode.com/GitHub_Trending/cl/claudecodeui
进入仓库目录运行npx @cloudcli-ai/cloudcli，也可以先npm install -g @cloudcli-ai/cloudcli再敲cloudcli。
浏览器打开http://localhost:3001，历史会话会自动列出来，不用额外配置。

🔍 功能走查：从日常对话到权限管理

点一下打开历史会话，对话里看清工具调用

左侧栏列出所有项目和会话，点击即可切换，也可以随时新建。AI 的读文件、写文件、执行命令都会以卡片形式展示，展开能看到输入参数和返回结果，不用再去翻终端日志。

在浏览器里直接浏览和编辑项目文件

内置文件树支持语法高亮和在线编辑，对话里用 @ 就能引用文件，省去复制路径。前端实现位于 src/modules/file-tree/。

Git 面板查看改动、暂存并提交代码

切到 Source Control 标签页，可以看 diff、暂存文件、写提交信息，也能切换分支，整个版本控制流程不用离开浏览器。后端接口实现在 server/modules/git/git.routes.ts。

用白名单配置工具权限，防止 AI 越界操作

所有 Claude Code 工具默认都是关闭的。点侧边栏齿轮打开工具设置，把 Read、Write、Bash(git log:*) 这类常用工具加进白名单，危险工具放进禁止列表。还有一个“跳过权限确认”的开关，等效于--dangerously-skip-permissions，新手建议先别碰。

实战：在通勤路上修一段代码

在电脑上让 Claude Code 复现一个 bug，然后出门。手机浏览器输入电脑 IP，打开的是同一个界面，AI 的每一步进展你都看得到。直接回复让它补个测试用例，改完后在 Git 面板确认 diff，到家直接提交，全程不用守着电脑。

使用前的 3 个提醒

本地部署要开机：自托管模式下服务器跑在你电脑上，关机或断网，手机就连不上会话。
AI 订阅要自备：CloudCLI 只提供界面环境，模型仍走你自己的 Claude、Cursor 或 Codex 登录。
权限从最小开始开：只启用当前任务需要的工具，别图省事全开，尤其慎用跳过确认的开关。

Claude Code UI 把 AI 编码命令行变成了一个随时能管、处处能看的界面，先跑一条 npx 命令试试吧。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析