告别命令行!一键为三大AI编程助手打造跨平台Web界面

🌈

HeyAI人工智能 每天 1 分钟 · 掌握最实用的 AI 技巧与工具

1️⃣ 项目概览

Cloud CLI（又名 Claude Code UI）是一个为 Claude Code、Cursor CLI 和 OpenAI Codex 三大主流AI编程助手CLI设计的统一Web界面。它解决了开发者需要在不同设备（桌面、移动端）上管理AI编程会话、查看项目文件和进行代码编辑的痛点。

• 核心价值：将命令行工具转化为功能完整的Web应用，实现跨平台、跨设备的统一操作体验。
• 适用对象：使用Claude Code、Cursor或Codex进行编程辅助的开发者，尤其是需要在移动设备上查看或进行轻量级代码操作的场景。
• 关键功能：响应式设计、集成聊天终端、文件浏览器、Git操作、会话管理，并可选集成AI任务管理工具。

2️⃣ 核心能力与技术亮点

⚡ 核心技术点

• 多CLI统一接入：无缝支持Claude Code、Cursor CLI和OpenAI Codex，可在界面内自由切换。
• 全平台响应式设计：基于React构建，完美适配桌面、平板和手机，支持PWA添加到主屏幕。
• 实时双向通信：通过WebSocket与后端CLI进程建立连接，实现聊天响应的实时流式传输。
• 内置代码编辑器：集成CodeMirror，提供语法高亮和实时文件编辑能力。

🧠 架构说明

项目采用经典的前后端分离架构：

前端 (React 18 + Vite + Tailwind CSS)
    ↑↓ HTTP/WebSocket
后端 (Node.js + Express)
    ↑↓ 进程通信
AI CLI 代理 (Claude Code / Cursor CLI / Codex)

后端负责管理CLI进程、文件系统API和WebSocket连接；前端提供交互式UI，包括项目视图、聊天界面和代码编辑器。

🔐 安全与配置亮点

• 工具安全默认禁用：所有Claude Code的工具（如文件操作）默认关闭，需在设置中手动启用，防止意外执行危险命令。
• 灵活的配置管理：支持自定义服务器端口、数据库路径，并可选择性地集成TaskMaster AI进行高级项目任务规划。
• 会话持久化：所有聊天会话和项目状态自动保存，支持跨设备访问（需在同一网络或部署环境下）。

3️⃣ 快速上手指南

前置要求

• Node.js v22 或更高版本。
• 至少安装并配置以下CLI之一：

  • Claude Code^[1]
  • Cursor CLI^[2]
  • OpenAI Codex^[3]

一键启动（推荐）

无需安装，直接通过npx运行：

npx @siteboon/claude-code-ui

服务将启动，默认在 http://localhost:3001 可访问。

全局安装（常用场景）

如需频繁使用，可全局安装：

npm install -g @siteboon/claude-code-ui

安装后，使用以下命令启动：

claude-code-ui
# 或使用别名
cloudcli

更新命令：cloudcli update

生产环境部署（使用PM2）

建议使用PM2作为后台服务运行，并设置开机自启：

# 安装PM2
npm install -g pm2
# 启动服务
pm2 start cloudcli --name "claude-code-ui"
# 设置开机自启
pm2 startup
pm2 save

4️⃣ 使用场景与功能示例

场景一：在手机上查看和编辑代码

通过手机浏览器访问部署好的Cloud CLI界面，你可以：

• 浏览项目文件树，查看代码。
• 使用适配移动端的聊天界面与Claude Code/Cursor交流。
• 对文件进行轻量级的编辑和保存。

场景二：统一管理多个AI编程会话

在桌面浏览器中，你可以：

• 在同一个界面查看和管理来自Claude Code、Cursor的不同项目会话。
• 使用集成的终端直接调用CLI命令。
• 通过Git Explorer查看变更、暂存文件和提交代码。

场景三：集成AI任务管理（可选）

启用 TaskMaster AI 集成后，你可以：

• 将产品需求文档（PRD）解析为结构化的开发任务。
• 在可视化的看板（Kanban）上跟踪任务进度。
• 管理任务依赖关系和优先级。

5️⃣ 项目地址与文档

https://github.com/siteboon/claudecodeui

🌈

关注公众号：HeyAI人工智能 每天更新 AI 实用干货

引用链接