claude-wec
v1.0.0
A web-based UI for Claude Code CLI
0/weekUpdated 2 weeks agoMITUnpacked: 6.0 MB
Published by Claude Code UI Contributors
npm install claude-wec
Cloud CLI (又名 Claude Code UI)
这是一个为 Claude Code、Cursor CLI 和 Codex 提供的桌面端和移动端 UI。您可以在本地或远程使用它,查看 Claude Code、Cursor 或 Codex 中的活动项目和会话,并从任何地方(移动端或桌面端)对其进行修改。这为您提供了一个在任何地方都能正常使用的界面。
截图
桌面视图 主界面显示项目概览和聊天 | 移动端体验 响应式移动设计,支持触摸导航 |
CLI 选择 在 Claude Code、Cursor CLI 和 Codex 之间选择 | |
功能特性
- 响应式设计 - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex
- 交互式聊天界面 - 内置聊天界面,可与 Claude Code、Cursor 或 Codex 无缝通信
- 集成 Shell 终端 - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex
- 文件浏览器 - 交互式文件树,支持语法高亮和实时编辑
- Git 浏览器 - 查看、暂存和提交您的更改。您还可以切换分支
- 会话管理 - 恢复对话、管理多个会话并跟踪历史记录
- TaskMaster AI 集成 (可选) - 高级项目管理,具有 AI 驱动的任务规划、PRD 解析和工作流自动化
- 模型兼容性 - 支持 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2
快速开始
$3
- Node.js v20 或更高版本
- 已安装并配置 Claude Code CLI,和/或
- 已安装并配置 Cursor CLI,和/或
- 已安装并配置 Codex
$3
无需安装,直接运行:
``bash`
npx @siteboon/claude-code-ui
服务器将启动并可通过 http://localhost:3001(或您配置的端口)访问。
重启方法: 停止服务器后再次运行相同的 npx 命令
$3
对于频繁使用,一次性全局安装:
`bash`
npm install -g @siteboon/claude-code-ui
然后使用简单命令启动:
`bash`
claude-code-ui
重启方法: 使用 Ctrl+C 停止,然后再次运行 claude-code-ui。
更新方法:
`bash`
cloudcli update
$3
全局安装后,您可以访问 claude-code-ui 和 cloudcli 命令:
| 命令 / 选项 | 简写 | 描述 |
|------------------|-------|-------------|
| cloudcli 或 claude-code-ui | | 启动服务器(默认) |cloudcli start
| | | 显式启动服务器 |cloudcli status
| | | 显示配置和数据位置 |cloudcli update
| | | 更新到最新版本 |cloudcli help
| | | 显示帮助信息 |cloudcli version
| | | 显示版本信息 |--port
| | -p | 设置服务器端口(默认:3001) |--database-path
| | | 设置自定义数据库位置 |
示例:
`bash`
cloudcli # 使用默认设置启动
cloudcli -p 8080 # 在自定义端口启动
cloudcli status # 显示当前配置
$3
用于生产环境,使用 PM2(Process Manager 2)将 Claude Code UI 作为后台服务运行:
#### 安装 PM2
`bash`
npm install -g pm2
#### 作为后台服务启动
`bash在后台启动服务器
pm2 start claude-code-ui --name "claude-code-ui"
或使用较短的别名
pm2 start cloudcli --name "claude-code-ui"
在自定义端口启动
pm2 start cloudcli --name "claude-code-ui" -- --port 8080
`
#### 系统启动时自动启动
要让 Claude Code UI 在系统启动时自动启动:
bash
为您的平台生成启动脚本
pm2 startup保存当前进程列表
pm2 save
`
$3
1. 克隆仓库:
bash
git clone https://github.com/siteboon/claudecodeui.git
cd claudecodeui
`2. 安装依赖:
bash
npm install
`3. 配置环境:
bash
cp .env.example .env
编辑 .env 文件以设置您的首选配置
`4. 启动应用:
bash
开发模式(支持热重载)
npm run dev`
应用将在您在 .env 中指定的端口启动5. 打开浏览器:
- 开发环境:
安全与工具配置
🔒 重要提示: 所有 Claude Code 工具默认禁用。这会阻止潜在的有害操作自动运行。
$3
要使用 Claude Code 的完整功能,您需要手动启用工具:
1. 打开工具设置 - 点击侧边栏中的齿轮图标
3. 选择性启用 - 仅打开您需要的工具
4. 应用设置 - 您的偏好设置将保存在本地
!工具设置模态框
工具设置界面 - 仅启用您需要的工具
推荐方法: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。
TaskMaster AI 集成 (可选)
Claude Code UI 支持 TaskMaster AI (又名 claude-task-master) 集成,用于高级项目管理和 AI 驱动的任务规划。
它提供:
- 从 PRD(产品需求文档)生成 AI 驱动的任务
- 智能任务分解和依赖关系管理
- 可视化任务板和进度跟踪
设置与文档: 访问 TaskMaster AI GitHub 仓库 获取安装说明、配置指南和使用示例。
安装后,您应该能够从设置中启用它
使用指南
$3
#### 项目管理
它会自动发现可用的 Claude Code、Cursor 或 Codex 会话,并将它们分组到项目中
会话计数
- 项目操作 - 重命名、删除和组织项目
- 智能导航 - 快速访问最近的项目和会话
- MCP 支持 - 通过 UI 添加您自己的 MCP 服务器
#### 聊天界面
- 使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
- 实时通信 - 通过 WebSocket 连接从您选择的 CLI (Claude Code/Cursor/Codex) 流式传输响应
- 会话管理 - 恢复之前的对话或开始新会话
- 消息历史 - 完整的对话历史,带有时间戳和元数据
- 多格式支持 - 文本、代码块和文件引用
#### 文件浏览器与编辑器
- 交互式文件树 - 使用展开/折叠导航浏览项目结构
- 实时文件编辑 - 直接在界面中读取、修改和保存文件
- 语法高亮 - 支持多种编程语言
- 文件操作 - 创建、重命名、删除文件和目录
#### Git 浏览器
#### TaskMaster AI 集成 (可选)
- 可视化任务板 - 看板风格界面,用于管理开发任务
- PRD 解析器 - 创建产品需求文档并将其解析为结构化任务
- 进度跟踪 - 实时状态更新和完成跟踪
#### 会话管理
- 会话持久化 - 所有对话自动保存
- 会话组织 - 按项目和时间戳分组会话
- 会话操作 - 重命名、删除和导出对话历史
- 跨设备同步 - 从任何设备访问会话
$3
- 响应式设计 - 针对所有屏幕尺寸优化
- 触摸友好界面 - 滑动手势和触摸导航
- 移动导航 - 底部选项卡栏,便于拇指导航
- 自适应布局 - 可折叠侧边栏和智能内容优先级
- 添加到主屏幕 - 添加快捷方式到主屏幕,应用将像 PWA 一样运行架构
$3
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 前端 │ │ 后端 │ │ 代理集成 │
│ (React/Vite) │◄──►│ (Express/WS) │◄──►│ │
│ │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
$3
- Express 服务器 - 带有静态文件服务的 RESTful API
- WebSocket 服务器 - 用于聊天和项目刷新的通信
- 代理集成 (Claude Code / Cursor CLI / Codex) - 进程生成和管理
- 文件系统 API - 为项目公开文件浏览器$3
- React 18 - 带有 hooks 的现代组件架构
- CodeMirror - 带有语法高亮的高级代码编辑器$3
我们欢迎贡献!请遵循以下指南:
#### 入门
1. Fork 仓库
2. 克隆 您的 fork:
3. 安装 依赖:
4. 创建 功能分支: #### 开发流程
1. 进行更改 遵循现有代码风格
2. 彻底测试 - 确保所有功能正常工作
3. 运行质量检查:
4. 提交 使用描述性消息,遵循 Conventional Commits
5. 推送 到您的分支:
6. 提交 拉取请求,包括:
- 清晰的更改描述
- UI 更改的截图
- 适用时的测试结果#### 可以贡献什么
- 错误修复 - 帮助我们提高稳定性
- 新功能 - 增强功能(先在 issues 中讨论)
- 文档 - 改进指南和 API 文档
- UI/UX 改进 - 更好的用户体验
- 性能优化 - 使其更快
故障排除
$3
#### "未找到 Claude 项目"
问题: UI 显示没有项目或项目列表为空
解决方案:
- 确保 Claude Code 已正确安装
- 至少在一个项目目录中运行
命令进行初始化
- 验证 ~/.claude/projects/ 目录存在并具有正确的权限#### 文件浏览器问题
问题: 文件未加载、权限错误、空目录
解决方案:
- 检查项目目录权限(终端中运行
ls -la`)- 验证项目路径存在且可访问
- 查看服务器控制台日志以获取详细错误消息
- 确保您没有尝试访问项目范围之外的系统目录
许可证
GNU General Public License v3.0 - 详见 LICENSE 文件。
本项目是开源的,可根据 GPL v3 许可证自由使用、修改和分发。
致谢
$3
- Claude Code - Anthropic 的官方 CLI
- Cursor CLI - Cursor 的官方 CLI
- Codex - OpenAI Codex
- React - 用户界面库
- Vite - 快速构建工具和开发服务器
- Tailwind CSS - 实用优先的 CSS 框架
- CodeMirror - 高级代码编辑器
- TaskMaster AI (可选) - AI 驱动的项目管理和任务规划
支持与社区
$3
- Star 此仓库以表示支持
- Watch 以获取更新和新版本
- Follow 该项目以获取公告
$3
- Siteboon - AI 驱动的网站构建器
---
为 Claude Code、Cursor 和 Codex 社区精心打造。