cui

3周前发布 36 0 0

cui为您的代理提供现代化的 Web 用户界面。启动服务器后,即可通过浏览器随时随地访问您的代理。Common Agent UI 由Claude Code SDK提供支持,并兼容所有类型的 LLM,配备最强大的代理工具.

收录时间:
2025-12-24

claude code web ui

精彩片段

  • 🎨 现代设计:简洁流畅、响应迅速的用户界面,可在任何设备上使用
  • ⚡并行后台代理:同时传输多个会话
  • 📋 管理任务:访问所有对话并进行分支/恢复/归档操作
  • 🤖 多模型支持:使用任何模型享受代理工作流的强大功能
  • 🔧 Claude 代码一致性:熟悉的自动补全功能以及与 CLI 的交互
  • 🔔 推送通知:当您的代理完成工作时,您将收到通知。
  • 🎤语音输入:由 Gemini 2.5 Flash 提供支持的精准语音输入

入门

  1. 使用 Node.js 20.19.0 或更高版本启动服务器:

    npx cui-server

    或者全局安装:

    npm install -g cui-server
  2. 在浏览器中打开http://localhost:3001/#your-token(令牌将显示在 cui-server 命令输出中)。

  3. 选择模型提供商:

    • 如果您已登录 Claude Code 或在您的环境中拥有有效的 Anthropic API 密钥,则 cui 可直接使用。
    • 或者您可以前往settings -> provider并选择模型提供商。cui 使用claude-code-router配置,支持从 openrouter 到 ollama 的不同模型提供商。
  4. (可选)配置通知和语音输入设置。

用法

任务

  • 开始新任务

    cui 会自动扫描您现有的 Claude Code 历史记录~/.claude/并将其显示在主页上,方便您继续之前的任何任务。输入区域的下拉菜单会显示您之前的所有工作目录。

  • 创建一个任务

    要从现有任务创建分支(仅支持从 cui 启动的任务),请导航到主页上的“历史记录”选项卡,找到要 fork 的会话,然后使用新消息恢复它。

  • 管理任务

    启动任务后,您可以关闭页面——任务会在后台继续运行。运行多个任务(通过 CUI 启动)时,您可以在“任务”选项卡中查看它们的状态。您还可以点击“归档”按钮归档任务。归档的任务仍然可以在“已归档”选项卡中访问。

听写

cui 使用Gemini 2.5 Flash提供高度精准的语音识别,尤其适用于长句。要启用此功能,您需要一个具有充足免费额度的Gemini API 密钥GOOGLE_API_KEY。请在启动服务器前设置环境变量。请注意,使用此功能会将您的音频数据分享给 Google。

通知

当您的任务完成或 Claude 等待您授权使用工具时,您可以收到推送通知。通知通过ntfy或原生Web 推送发送。要接收通知,请按照设置中的说明操作。

键盘快捷键

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

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

所有内联语法(例如/init`or`)@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.db– 会话元数据

要卸载 cui,只需删除该目录并使用.~/.cui/删除该软件包即可。npm uninstall -g cui-server

数据统计

相关导航