Claude Code UI: AI 编程助手 GUI/WEB UI

发布时间： 更新时间： 总字数：1251 阅读时间：3m 作者：IP：上海 网址

siteboon/claudecodeui，又被称为 CloudCLI 或 Claude Code UI，是一个专为基于 CLI（命令行）的 AI 编程助手打造的开源免费 Web/移动端图形用户界面（GUI）。

介绍与特性

Claude Code UI 完美解决了开发者离开工位后无法管理和监控 AI 代码代理任务的痛点。它允许用户通过手机、平板或浏览器随时随地管理代码会话、编辑文件并与 AI 助手交互。

1. 支持广泛的主流 AI 编程助手： 它不仅支持 Anthropic 官方的 Claude Code，还兼容 Cursor CLI、OpenAI Codex 以及 Gemini CLI 等主流命令行 AI 工具。

2. 丰富且完整的 IDE 级功能： 它不仅仅是一个聊天窗口，而是提供了一个轻量级的 Web IDE 体验，包含：

  • 自适应聊天界面：无论是在 PC 桌面还是在手机触摸屏上，都有完美的响应式布局。
  • 文件浏览器与编辑器：支持项目文件树浏览、代码语法高亮以及实时编辑代码。
  • 集成 Shell 终端：在浏览器中可直接调用系统的底层命令行。
  • 高级管理功能：内建 Git 集成、MCP (Model Context Protocol) 权限管理以及会话历史跟踪。

3. 无缝的状态同步与架构： 采用 React 前端与 Express.js / WebSocket 实时流后端。它会自动扫描本地系统现有的代理配置（如 ~/.claude/projects/）。这就意味着，你在终端里发起的会话，可以在浏览器里接管；在 UI 里调整的模型权限，也会立刻写回到你的 CLI 配置文件中，做到无缝双向同步。

4. 插件生态： 内置插件系统，允许开发者在 Settings > Plugins 中直接从 Git 仓库安装自定义标签页及其对应的前后端服务。

部署与安装

CloudCLI 提供了非常灵活的安装方式，无论是想快速体验、自建托管，还是开箱即用，都可以满足需求：

方法一：快速体验（最简单，推荐） 如果你已经安装了 Node.js，无需完整下载源码，直接运行以下免安装命令，它将自动启动并在本地映射你的现有 CLI 环境：

bash 
npx @cloudcli-ai/cloudcli
# 或
npm install -g @cloudcli-ai/cloudcli

方法二：通过源码本地部署

bash 
# 1. 克隆代码库
git clone https://github.com/siteboon/claudecodeui.git
# 2. 进入目录
cd claudecodeui
# 3. 安装依赖项
npm install
# 4. 配置环境变量
cp .env.example .env
# 5. 启动服务（开发环境可用 npm run dev，生产可用 npm start）
npm start

pm2 启动服务

  • .env
SERVER_PORT=3001
VITE_PORT=5173
HOST=0.0.0.0
CONTEXT_WINDOW=160000
VITE_CONTEXT_WINDOW=160000
# DATABASE_PATH=/path/to/your/auth.db
# CLAUDE_CLI_PATH=claude
  • PM2 ecosystem 配置文件 ecosystem.config.cjs，cloudcli 服务和 cloudflared 隧道一同交给 PM2 后台守护
module.exports = {
  apps:[
    {
      name: 'cloudcli-web',
      script: 'cloudcli',
      args: 'start',
      env_file: '.env',
      interpreter: 'none',
      watch: false,
      autorestart: true,
    },
    {
      name: 'cloudflared',
      script: 'cloudflared',
      args: 'tunnel run --token xxx',
      interpreter: 'none',
      watch: false,
      autorestart: true,
    },
  ],
};
  • 启动
# 1. 安装 CLI（如果你已经全局安装过，这步可跳过）
npm install -g @cloudcli-ai/cloudcli  # 或在源码目录执行 npm install -g .

# 2. 启动进程组
pm2 start ecosystem.config.cjs
pm2 save

# 3. 查看隧道分配的公网 URL 和 CLI 运行日志
pm2 logs

使用指南

部署完成后，使用流程如下：

1. 访问本地服务面板 服务启动后，在浏览器中打开 http://localhost:3001 即可进入 CloudCLI 仪表盘。它会自动读取你电脑中已存在的会话记录。

2. 绑定 / 认证 AI Agent 账号 由于 CloudCLI 只提供环境本身，AI 的消耗仍然基于自己的账号订阅或 API。首次使用需要进入侧边栏的 Settings (设置) > Agents 进行授权：

  • Claude Code：点击 Login，使用 Anthropic 账号进行 OAuth 或邮件链接授权。
  • Cursor / Codex / Gemini：同样在此页面根据平台提示完成身份校验。

3. 开始 Agentic Coding 可以创建新项目或点开正在运行的项目，通过聊天框指派长耗时任务。在执行过程中，如果 Agent 需要读取权限、执行终端命令，都可以直接通过 UI 面板点击“Approve（批准）”或“Reject（拒绝）”。

参考

  1. https://github.com/siteboon/claudecodeui
最新评论