Claude Code 的开发者，我经常会遇到一个问题：CLI 操作虽然强大，但在跨设备、多项目管理时并不直观。尤其是同时在 桌面和移动端处理项目时，命令行的局限性会被放大。最近我发现了一个非常实用的解决方案 —— Claude Code UI (claudecodeui)，它给了我一个完整的 图形化管理面板，让我能在任何设备上轻松管理 Claude Code 和 Cursor CLI 的项目与会话。
我简单试了一下，发现它不只是“好看”，而是真的解决了很多 CLI 下不便操作的痛点。下面我就结合官方文档和我的使用体验，来整理一个完整的介绍。
什么是 Claude Code UI？
Claude Code UI 是一个 桌面端和移动端通用的可视化管理界面，用于操作 Claude Code 和 Cursor CLI。
它支持 本地或远程访问，意味着无论我是在家里用桌面电脑，还是在外面用手机，都可以实时管理项目和会话。
它已经支持包括 Claude Sonnet 4、Opus 4.1 和 GPT-5 在内的多种模型。
核心功能
-
响应式设计：在桌面、平板和手机上都能无缝使用。
-
交互式聊天界面：内置对话框，可以像 Cursor 一样流畅和 Claude Code 交互。
-
集成终端：内置 Shell，可直接运行 Claude Code 或 Cursor CLI。
-
文件浏览器：可视化文件树，支持语法高亮与实时编辑。
-
Git 管理器：查看、暂存、提交、切换分支，一套操作全搞定。
-
会话管理：恢复历史会话、多会话切换、跨设备访问。
-
模型兼容性：支持 Claude Sonnet 4、Opus 4.1、GPT-5。
实操案例：我在一个移动端调试项目的场景下，直接用 手机文件浏览器编辑代码 + Git 提交，然后通过内置 CLI 执行构建。全程不用 SSH 登录，非常顺畅。
快速上手
前置条件
Node.js v20+
已安装并配置 Claude Code CLI 或 Cursor CLI
安装
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
npm install
cp .env.example .env
# 修改 .env 配置
启动
# 开发模式（支持热更新）
npm run dev
浏览器打开：http://localhost:3001
安全与工具配置
默认情况下，Claude Code 的所有工具都是 禁用的，避免出现危险操作。
启用步骤：
-
点击侧边栏齿轮图标进入 Tools Settings
-
选择性启用所需工具
-
应用配置（会本地保存）
建议：先启用最基本的工具，逐步加上需要的。
使用指南
项目管理
-
自动发现
~/.claude/projects/下的项目 -
支持项目重命名、删除、组织管理
-
支持 MCP 服务接入
聊天界面
-
可在 UI 界面直接对话
-
支持 WebSocket 实时流式返回
-
保留完整历史记录，含时间戳和元数据
文件浏览器 & 编辑器
-
可视化文件树
-
代码高亮 & 多语言支持
-
文件增删改查
Git Explorer
-
可视化提交 & 分支切换
-
实时查看 diff
会话管理
-
所有会话自动保存
-
按项目 & 时间戳归类
-
跨设备同步
实操案例：我在切换不同 Claude Code 项目时，不再需要翻历史命令，而是直接点击 UI 的会话列表恢复，很适合多人协作。
移动端优化
-
自适应布局
-
支持触控手势
-
可添加到主屏，作为 PWA 应用 使用
总结
对我来说，Claude Code UI 真正解决了 CLI 下项目管理的繁琐，尤其是 跨设备工作 时非常省心。 无论是查看会话历史、Git 提交，还是直接在手机上调试代码，都能做到流畅高效。
如果你和我一样是深度使用 Claude Code 或 Cursor CLI 的开发者，这个工具几乎是必装的，尤其适合：
-
想要一个统一的 图形化管理面板
-
希望在 手机/平板上继续开发
-
不想频繁手动输入命令行
我会继续深入使用，并把一些进阶玩法整理成实践笔记分享出来。
GitHub地址：