Claude Code UI 是一款为 Claude Code 和 Cursor CLI 设计的第三方桌面及移动端图形界面。它允许用户通过本地或远程方式，在任何设备上（包括电脑、平板和手机）方便地访问和管理项目、会-话，并进行代码修改，极大地提升了远程开发的灵活性和体验。

与同类工具相比，Claude Code UI 具有安装简单、界面清爽、交互流畅等优点。

核心特性

  • 响应式设计：界面能够自适应桌面、平板和手机等不同尺寸的屏幕，确保在移动端也能获得流畅的 Claude Code 使用体验。
  • 交互式聊天：内置聊天界面，可以与 Claude Code 或 Cursor 进行顺畅的 AI 辅助编程对话。
  • 集成终端：内置一个功能完整的 Shell 终端，可以直接在界面中执行 Claude Code 或 Cursor CLI 命令。
  • 文件管理器：提供交互式的文件树，支持语法高亮和实时在线编辑文件。
  • Git 管理器：集成了版本控制功能，可以方便地查看、暂存、提交代码修改，以及切换分支。
  • 会话管理：支持恢复、新建、删除和重命名会话，并能跟踪完整的历史记录。
  • 模型兼容性：支持 Claude Sonnet 4、Opus 4.1 以及 GPT-5 等主流模型。

安装与运行

前置条件

在开始安装之前，请确保你的环境中已安装以下软件：

  • Node.js v20 或更高版本
  • Claude Code CLI 或 Cursor CLI

安装步骤

  1. 克隆项目仓库 克隆 siteboon/claudecodeui 项目到本地。

    git clone

  2. 安装依赖 进入项目目录并安装所需的 npm 依赖包。

    cd claudecodeui
npm install

  3. 配置环境 复制环境变量文件模板。你可以根据需要编辑 .env 文件，修改端口等配置，或直接使用默认设置。

    cp .env.example .env

  4. 启动应用 执行以下命令启动开发服务器：

    npm run dev

    启动成功后，在浏览器中访问 `

功能概览

1. 主界面

主界面布局清晰，主要分为以下几个区域：

  • 左侧：项目和会话列表。
  • 顶部：功能切换标签，包括聊天（Chat）、终端（Shell）、文件（Files）和源码控制（Source Control）。
  • 中间：AI 助理选择（Claude/Cursor）。
  • 底部：模式选择及命令行输入框。

2. 会话管理

你可以点击任意会话来恢复上下文，继续之前的对话。同时，也支持新建、删除和重命名会话，方便对不同任务进行管理。

3. 集成终端（Shell）

通过顶部的 Shell 标签页，可以切换到功能完整的终端模式。这使得用户既能享受可视化的便捷，也能随时切换回熟悉的命令行进行操作。

4. 文件管理

Files 标签页提供了一个文件浏览器，可以直观地查看项目结构。点击文件后，可以在线预览、编辑、保存或下载，并支持代码语法高亮。

5. 源码控制

Source Control 标签页集成了 Git 的核心功能。在这里，你可以方便地查看文件变更、暂存修改、提交代码，并浏览提交历史。

6. 个性化设置

点击左下角的设置图标，可以进入设置页面。在这里，你可以管理允许的工具、配置 MCP，以及切换亮色或暗黑模式以适应不同的工作环境。

总结

Claude Code UI 是一款轻量、快速且功能强大的可视化工具。它简化了 Claude Code 和 Cursor CLI 的使用流程，通过其响应式设计和丰富的功能集，为开发者提供了一种在任何设备上进行高效远程编程的解决方案。无论是日常开发还是紧急修复，它都能显著提升工作效率。

👉 如果你需要 ChatGPT 代充 / Claude / Claude Code / 镜像 / 中转 API：