CUI: Claude Code Web UI

⭐ GitHub: wbopan/cui (455 stars)

一个现代化的 Claude Code 代理 Web UI。启动服务器，在浏览器中访问 Claude Code。

亮点

• 现代设计: 精美的响应式 UI，可在任何地方工作
• 并行后台代理: 同时流式处理多个会话
• 任务管理: 访问所有对话并分支/恢复/归档它们
• Claude Code 兼容性: 熟悉的自动完成和 CLI 交互
• 推送通知: 当代理完成时获得通知
• 语音听写: 由 Gemini 2.5 Flash 提供精确的语音听写

开始使用

1. 确保您已登录 Claude Code 或拥有有效的 Anthropic API 密钥。
2. 使用 Node.js >= 20.19.0，启动服务器：

   npx cui-server

   或全局安装：

   npm install -g cui-server

3. 在浏览器中打开 http://localhost:3001/#your-token（令牌将显示在 cui-server 命令输出中）。
4. （可选）配置通知和听写设置。

使用方法

任务

• 启动新任务
  cui 自动扫描 ~/.claude/ 中现有的 Claude Code 历史记录并在主页上显示，允许您恢复任何之前的任务。输入区域的下拉菜单显示所有之前的工作目录。

• 分支任务
  要从现有任务创建分支（仅支持从 cui 启动的任务），导航到主页的"历史"选项卡，找到要分支的会话，并使用新消息恢复它。

• 管理任务
  启动任务后可以随意关闭页面——它将在后台继续运行。运行多个任务时（从 cui 启动），您可以在"任务"选项卡中检查其状态。您也可以通过点击"归档"按钮来归档任务。归档的任务在"已归档"选项卡中仍然可访问。

语音听写

cui 使用 Gemini 2.5 Flash 提供高度准确的语音听写，对长句子特别有效。要启用此功能，您需要具有慷慨免费层使用量的 Gemini API 密钥。在启动服务器之前设置 GOOGLE_API_KEY 环境变量。请注意，使用此功能将与 Google 共享您的音频数据。

通知

当任务完成或 Claude 等待您允许使用工具时，您可以接收推送通知。通知使用 ntfy 发送。要接收它们，在任何设备上安装 ntfy 并订阅主题（请参阅设置）。

键盘快捷键

更多键盘快捷键即将推出。目前可用：

• Enter: 输入新行
• Command/Ctrl + Enter: 发送消息
• /: 列出所有命令
• @: 列出当前工作目录中的所有文件

所有内联语法如 /init 或 @file.txt 都像在 CLI 中一样受支持。

远程访问

1. 打开 ~/.cui/config.json 设置 server.host (0.0.0.0) 和 server.port。或者，您可以在启动服务器时使用 --host 和 --port 标志。
2. 如果从本地网络外部访问服务器，请确保使用安全身份验证令牌。身份验证令牌在启动服务器时生成，可以在 ~/.cui/config.json 文件中更改。
3. 推荐：使用 HTTPS 访问服务器。您可以使用反向代理如 Caddy 来设置。在 iOS 上，听写功能仅在您使用 HTTPS 时可用。

配置

所有配置和数据都存储在 ~/.cui/ 中。

• config.json - 服务器设置
• session-info.json - 会话元数据
• preferences.json - 用户偏好

要卸载 cui，只需删除 ~/.cui/ 目录并使用 npm uninstall -g cui-server 删除包。

主要功能

基于 Web 的界面

• 浏览器访问: 从任何带有 Web 浏览器的设备访问 Claude Code
• 响应式设计: 在桌面、平板和移动设备上无缝工作
• 现代 UI: 符合现代 Web 标准的干净直观界面

多会话管理

• 并行处理: 同时运行多个 Claude Code 会话
• 后台执行: 即使关闭浏览器，任务也会继续运行
• 会话历史: 自动扫描并显示您现有的 Claude Code 历史记录

高级功能

• 语音听写: 由 Gemini 2.5 Flash 提供准确的语音转文本
• 推送通知: 任务完成或需要关注时的实时提醒
• 远程访问: 通过适当配置从任何地方安全访问

CLI 兼容性

• 熟悉命令: 所有 CLI 命令和快捷键在 Web 界面中工作
• 文件操作: 完全支持文件浏览和操作
• 工具集成: 完全访问所有 Claude Code 工具和功能

使用场景

对于开发者

• 远程开发: 从任何设备或位置访问 Claude Code
• 团队协作: 与团队成员共享会话和协作
• 移动开发: 在平板和移动设备上使用 Claude Code

对于团队

• 集中访问: 为团队成员提供基于 Web 的 Claude Code 访问
• 会话共享: 轻松共享和恢复协作会话
• 监控: 跟踪团队使用情况和会话活动

对于组织

• 企业部署: 在内部服务器上部署 CUI 以安全访问
• 用户管理: 通过配置控制访问和权限
• 集成: 与现有开发工作流程和工具集成

技术要求

• Node.js: >= 20.19.0
• Claude Code: 必须安装和配置
• 网络访问: 用于远程访问和通知
• 可选: 用于听写功能的 Gemini API 密钥

贡献

贡献的最佳方式是提出改进建议或在问题中报告错误，并给我们一个星标 ⭐！

在提交 PR 之前，请确保您（或您的 AI 伙伴）已阅读 CONTRIBUTING.md。

许可证

Apache-2.0 许可证

---

来源和致谢

本文基于 wbopan/cui GitHub 仓库整理而成。

原作者: wbopan
原始链接: https://github.com/wbopan/cui
许可证: Apache-2.0 License

感谢 wbopan 创建了这个优秀的 Claude Code Web UI，为 AI 辅助开发提供了现代化的浏览器界面和强大的多会话管理能力。