Claude Code UI 全面上手

 

省流版

Claude Code UI 是一个开源的 Web/移动端界面，连接本机或远程服务器上的 Claude Code CLI，提供对话、文件与 Git 浏览、内置 Shell、会话管理等能力；默认关闭高风险工具，支持按需启用与权限控制。项目采用 GPL-3.0 许可，持续活跃迭代。

它把终端里的 Claude Code 搬上浏览器与手机，帮你在任何设备上用更顺手的方式管理会话与项目。

---

为什么需要 Claude Code UI？

• • 摆脱纯命令行的局限：Claude Code 官方以 CLI 为主，功能强但对新手/移动端不够友好；UI 将其结构化到网页上，降低操作门槛。
• • 跨设备轻量远程使用：在 iPad/手机上即可查看项目、切换会话、审阅改动，适合通勤、会议或外出场景。
• • 把常用开发动作集中到一个界面：对话、文件编辑、Git 操作、终端与会话历史集中呈现，减少上下文切换。

---

核心优势与特点

1. 1. 桌面 & 移动自适应
   响应式布局，桌面/平板/手机均可用，可添加主屏快捷方式（PWA 体验）。
2. 2. 对话式界面 + 实时流式输出
   内置聊天面板与会话管理，支持恢复历史会话、查看时间线与元数据。
3. 3. 集成 Shell 终端
   在 UI 内直接接入 Claude Code CLI 的命令行能力（如执行任务、查看日志）。
4. 4. 文件浏览与在线编辑
   左侧文件树、语法高亮、读写保存、创建/重命名/删除文件与目录。
5. 5. Git 浏览与基础操作
   在界面中查看、暂存、提交与切换分支；近期版本还加入了 push/pull/fetch。
6. 6. 项目与会话自动发现
   从 ~/.claude/projects/ 自动收集项目；会话自动持久化并可导出。
7. 7. 安全默认值 & 权限/工具开关
   默认禁用所有工具，在设置里按需逐项启用；支持与 Anthropic 的 Permission Modes 对齐（Plan mode 更新中引入）。
8. 8. 认证与多用户准备
   1.1.4 起引入登录/注册流程与基于 SQLite 的鉴权与受保护路由。
9. 9. 持续迭代
   截至 2025‑07‑13 的 v1.5.0 支持在设置中添加 MCP 服务器；此前还有版本管理提示、Vite 7 升级等。

说明：官网安装页写的是 Node.js 16+，而仓库 README 要求 Node.js 20+；实际以仓库 README 为准，建议使用 Node.js 20+。

---

典型使用场景

• • 移动端快速处理：通勤路上用手机查看 Claude 的执行进度、补充提示词、微调文件。
• • 远程项目巡检：在浏览器上直连放在云主机或办公室电脑里的 Claude Code，查看日志、提交小修。
• • 代码审阅与教学演示：通过 UI 展示 Claude 的推理过程、变更与 Git 历史，降低团队沟通成本。
• • 与其他生态搭配：例如你已在用 Claude Code CLI 或 SDK/参考文档，UI 让「看得见、点得到」。

---

快速上手（10 分钟）

前置：确保你已安装并可使用 Claude Code CLI（Anthropic 官方）。

1. 1. 安装 Claude Code CLI

   npm install -g @anthropic-ai/claude-code
   # 参考官方文档完成鉴权与配置

   ([Anthropic][8])
2. 2. 准备运行环境（建议 Node.js 20+）
   安装 Node.js ≥20，克隆仓库并安装依赖：

   git clone https://github.com/siteboon/claudecodeui.git
   cd claudecodeui && npm install

3. 3. 配置 .env

   cp .env.example .env
   # 按需设置端口、主机、反向代理/HTTPS 等

4. 4. 启动服务并访问

   npm run dev
   # 浏览器访问 http://localhost:你设置的端口

5. 5. 首次使用建议
• • 在左侧项目列表中，确认 UI 已自动发现 ~/.claude/projects/。
• • 打开右上角齿轮，只启用必需的工具，遵循最小权限原则。
• • 需要 Git 同步可在 Git 面板进行查看/暂存/提交，必要时使用 push/pull/fetch。
6. 6. 移动端安装为「应用」
   在手机浏览器“添加到主屏幕”，以 PWA 方式获得更接近 App 的体验。

---

安全与运维最佳实践

• • 默认即安全：工具默认关闭，逐项开启；遵循 Anthropic 的 Permission Modes。
• • 认证与访问控制：启用登录/注册（v1.1.4 起），限制公网访问，优先内网/SSH 隧道/反代。
• • 版本更新：UI 带有更新检查与提示，按提示 git pull && npm install 升级。
• • 环境要求一致：以仓库 README 的 Node.js 20+ 为准，避免官网页面旧信息导致的不兼容。