SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场claudecodeui-web-interface

claudecodeui-web-interface

智能体与模型

查看项目

更新于 10-16 10:36

技能介绍

用途

CloudCLI（即 Claude Code UI）是一个网页与移动端界面，用于管理 Claude Code、Cursor CLI、Codex 与 Gemini CLI 会话。它提供响应式 UI，包含聊天界面、文件浏览器、Git 集成、会话管理与插件系统，供用户在本地或远程从任意设备访问自己的 AI 编程会话。

主要能力

  • 聊天界面、文件浏览器、Git 集成、会话管理、插件系统。
  • 自动从 ~/.claude 发现已有的 Claude Code 会话，基础使用无需额外配置。
  • 提供 REST API 进行程序化访问，如获取会话、向会话发送消息、获取项目文件、执行命令。
  • 插件系统支持通过 Git 仓库 URL 安装插件，也支持自建插件（含前端 React 组件与可选 Node.js 后端，通过 manifest.json 配置）。
  • 支持 Docker 沙箱以获得隔离的智能体会话。
  • 与原生 Claude Code 共享 ~/.claude/config.json，UI 中的更改会立即同步到原生 Claude Code。

使用方式

安装

推荐用 npx 快速启动（需 Node.js v22+）：

npx @cloudcli-ai/cloudcli

然后浏览器打开 http://localhost:3001。

全局安装：

npm install -g @cloudcli-ai/cloudcli
cloudcli

Docker 沙箱（实验性，需要 Docker Sandboxes CLI）：

npx @cloudcli-ai/cloudcli@latest sandbox ~/my-project

配置

环境变量示例：

# 自定义端口（默认 3001）
PORT=8080 npx @cloudcli-ai/cloudcli

# 自定义主机（默认 localhost）
HOST=0.0.0.0 npx @cloudcli-ai/cloudcli

# 自定义 Claude 配置目录
CLAUDE_CONFIG_DIR=~/custom/path npx @cloudcli-ai/cloudcli

PM2 生产部署：

npm install -g pm2
npm install -g @cloudcli-ai/cloudcli
pm2 start cloudcli --name "cloudcli-server"
pm2 save
pm2 startup

远程访问：使用 HOST=0.0.0.0 PORT=3001 启动，再从其他设备访问 http://[your-server-ip]:3001。

工具安全设置

所有 Claude Code 工具默认禁用。可在侧边栏齿轮图标进入 Tools Settings，逐个启用所需工具后点击 “Apply Settings”。常见可启用工具包括 read_file、write_file、execute_command、search_files、list_directory。设置保存于 ~/.claude/config.json，并与原生 Claude Code 同步。

插件系统

在设置（齿轮图标）的 Plugins 标签页中输入 git 仓库 URL，然后点击 “Install Plugin”。文档给出的示例插件包括项目统计、Web 终端与调度器等仓库地址。自建插件目录结构为：manifest.json、client/index.tsx（React 前端）、server/index.js（可选 Node.js 后端）。文档提供了 manifest.json 字段示例（name、displayName、version、description、author、entry、server、permissions、dependencies），以及前端组件与后端 RPC 方法注册的代码示例。

API 用法

# 获取活动会话
curl http://localhost:3001/api/sessions

# 向会话发送消息
curl -X POST http://localhost:3001/api/sessions/session-123/message \
  -H "Content-Type: application/json" \
  -d '{"message": "Implement user authentication"}'

# 获取项目文件
curl http://localhost:3001/api/projects/my-project/files

# 执行命令
curl -X POST http://localhost:3001/api/sessions/session-123/execute \
  -H "Content-Type: application/json" \
  -d '{"command": "npm test"}'

适用场景

  • 自托管开发：全局安装并启动服务器，另开终端运行 Claude Code，在 http://localhost:3001 访问 UI。
  • 生产部署：结合 PM2 启动、保存并启用开机自启，用 pm2 logs 查看日志。
  • Docker 沙箱工作流：以沙箱模式启动隔离会话，文件操作被沙箱限制。
  • 多智能体配置：在项目 .cloudcli/config.json 中定义多个智能体（如 claude-code、cursor-cli、gemini-cli）。
  • MCP 服务器配置：与 ~/.claude/config.json 同步，可配置 filesystem、github 等 MCP 服务器。
  • 集成示例：文档给出 VS Code 扩展调用、CI/CD（GitHub Actions）发起 AI 代码审查、n8n 工作流 HTTP 请求节点等示例。

限制与注意事项

  • npx 快速启动需要 Node.js v22+。
  • Docker 沙箱为实验性功能，需要 Docker Sandboxes CLI。
  • 所有 Claude Code 工具默认禁用，出于安全需手动开启。
  • 远程访问时文档建议使用带认证的反向代理（如 nginx 示例）保障网络安全。
  • 文档包含故障排查：端口占用、无法从其他设备访问、会话不显示、插件安装失败、工具权限不保存、Docker 沙箱问题。
  • 价格、收费模式、性能效果等未在资料中说明，暂未提供。

资源

  • 文档：https://cloudcli.ai/docs
  • 插件起始模板：https://github.com/cloudcli-ai/cloudcli-plugin-starter
  • Discord 社区：https://discord.gg/buxwujPNRE
  • GitHub Issues：https://github.com/siteboon/claudecodeui/issues
  • 贡献指南：https://github.com/siteboon/claudecodeui/blob/main/CONTRIBUTING.md