Claude Code UI：移动端与网页端管理代码项目的开源工具

Claude Code UI 是一个免费的开源工具，基于 Anthropic 提供的 Claude Code CLI 开发。它让开发者通过网页或移动端管理代码项目，提供直观的界面来操作文件、运行命令和跟踪会话。用户可以随时随地访问项目，编辑代码并与 Claude Code 交互，简化开发流程。工具支持跨设备同步，适配多种屏幕大小，适合个人开发者或团队协作。它的核心优势是集成终端、文件浏览和 Git 功能，让编程更高效。所有功能默认禁用，需手动开启以确保安全。

功能列表

• 内置聊天界面，与 Claude Code 进行实时交互。
• 集成终端，直接运行 Claude Code CLI 命令。
• 文件树浏览，支持展开/收起目录，查看项目结构。
• 实时文件编辑，内置语法高亮，支持多种编程语言。
• Git 集成，查看、暂存、提交更改，切换分支。
• 会话管理，保存、恢复和组织多项目会话。
• 跨设备同步，随时在不同设备上访问项目。
• 响应式设计，适配桌面、平板和手机屏幕。

使用帮助

安装流程

要使用 Claude Code UI，需要先安装并配置环境。以下是详细步骤：

1. 克隆项目
   打开终端，运行以下命令克隆项目到本地：

   git clone https://github.com/siteboon/claudecodeui.git
   

   然后进入项目目录：

   cd claudecodeui
   

2. 安装依赖
   使用 npm 安装所需依赖：

   npm install
   

   建议使用 Node.js 最新 LTS 版本以确保最佳性能。

3. 配置环境
   复制示例环境文件并编辑：

   cp .env.example .env
   

   使用文本编辑器打开 .env 文件，根据需要设置端口号（如 3001）等配置。默认情况下，Claude Code UI 在 http://localhost:3001 运行。

4. 启动应用
   在开发模式下启动项目：

   npm run dev
   

   启动后，打开浏览器访问 http://localhost:3001（或 .env 中指定的端口）。

5. 启用工具
   出于安全考虑，所有 Claude Code 工具默认禁用。用户需手动启用：
   • 点击侧边栏的齿轮图标，进入“工具设置”界面。
   • 选择需要启用的工具（如文件操作、Git 功能等）。
   • 保存设置，配置会存储在本地。

主要功能操作流程

1. 聊天界面

Claude Code UI 提供内置聊天界面，用于与 Claude Code 交互。用户可以通过自然语言输入命令，例如“生成一个 Python 脚本”或“解释这段代码”。操作步骤：

• 在主界面点击聊天窗口。
• 输入命令或问题，Claude Code 会通过 WebSocket 实时返回结果。
• 聊天记录自动保存，支持查看历史消息，包含时间戳和元数据。
• 支持多格式输出，如文本、代码块或文件引用。

2. 集成终端

终端功能让用户直接运行 Claude Code CLI 命令，无需切换到外部终端。操作方式：

• 在界面底部打开终端面板。
• 输入 CLI 命令，如 claude --help 查看帮助。
• 终端支持实时反馈，适合执行代码生成、调试或项目管理任务。

3. 文件树与实时编辑

文件树功能帮助用户浏览和编辑项目文件：

• 在左侧导航栏查看文件树，点击目录可展开/收起。
• 点击文件打开编辑器，CodeMirror 提供语法高亮，支持 Python、JavaScript 等多种语言。
• 编辑后直接保存，改动实时同步到本地项目。
• 支持创建、删除或重命名文件和目录。

4. Git 集成

Git 功能简化版本控制操作：

• 在 Git 面板查看文件更改状态。
• 选择文件进行暂存（git add）或提交（git commit）。
• 支持分支切换，点击分支列表选择目标分支。
• 所有操作通过界面完成，无需命令行。

5. 会话管理

会话管理功能适合多项目开发：

• 每个项目会话自动保存，包含聊天记录和文件操作历史。
• 在“会话”面板查看所有会话，按项目和时间戳分组。
• 支持重命名、删除或导出会话记录。
• 跨设备同步功能允许在手机或另一台电脑上继续工作。

6. 跨设备使用

Claude Code UI 的响应式设计适配多种设备：

• 在手机上访问时，界面自动调整为单列布局，方便触摸操作。
• 桌面端提供更宽松的布局，适合大屏幕。
• 会话和项目数据通过云同步，需确保网络连接。

注意事项

• 首次使用时，检查 .env 文件中的配置，确保端口未被占用。
• 启用工具时，仅选择必要功能以降低安全风险。
• 定期更新项目代码以获取最新功能：

  git pull origin main
  

应用场景

1. 远程开发
   开发者在外无法使用电脑时，可通过手机访问 Claude Code UI，编辑代码、运行命令或提交 Git 更改，保持工作连续性。
2. 团队协作
   团队成员可通过共享会话管理多个项目，实时查看代码更改和聊天记录，适合分布式团队。
3. 学习与调试
   学生或初学者可通过聊天界面向 Claude Code 提问，快速理解复杂代码，结合文件编辑功能实践编程。
4. 快速原型开发
   开发者可使用终端和文件编辑功能快速生成代码原型，测试想法并提交到 Git 仓库。

QA

1. Claude Code UI 需要联网吗？
   是的，Claude Code UI 需要联网以访问 Claude Code 的 AI 模型。但部分功能（如文件编辑）支持本地缓存，离线时可用。
2. 支持哪些编程语言？
   内置 CodeMirror 编辑器支持 Python、JavaScript、Java、C++ 等多种语言的语法高亮和编辑。
3. 如何确保工具安全？
   所有工具默认禁用，用户需手动启用。建议仅开启必要功能，并定期检查 .env 配置。
4. 可以跨设备同步吗？
   可以，会话和项目数据通过云同步，任何设备登录后可继续工作。