Web UI

2026-10-12   访问量:1001


概述

Web UI 提供与终端界面相同的核心能力,并针对浏览器进行了可视化布局优化:

对话:发送消息、查看对话、实时监控工具执行

终端:内嵌终端,支持分屏布局(最多 4 个面板)

Workers:管理 CLI Worker 进程和 Daemon 守护进程

日志:独立日志查看器,支持多种日志类型和关键词搜索

远程控制:连接微信和企业微信渠道

监控:系统资源指标和各 Worker 进程级内存/运行时间指标

任务:浏览任务模版并创建定时任务

插件:管理插件安装和插件市场

设置:配置主题、语言、模型和权限模式

文档:浏览 CLI 文档,支持全文搜索

API 文档:查看交互式 Swagger UI,方便 HTTP API 探索

访问 Web UI

方式一:Serve 模式

使用 --serve 参数启动 CodeBuddy Code:

codebuddy --serve --port 7890

然后在浏览器中打开:

http://127.0.0.1:7890

方式二:远程控制

在已有的 CodeBuddy Code 会话中启动 Gateway:

/gateway

终端会显示二维码和 URL。用手机扫码或在浏览器中打开 URL。详见远程控制文档。

认证方式

Web UI 支持两种认证模式:

模式

设置

说明

密码认证(默认)

--auth password / CODEBUDDY_GATEWAY_AUTH=password

--serve 的默认行为,启动时终端打印密码和带密码的可点链接

免认证

--auth none / CODEBUDDY_GATEWAY_AUTH=none

显式关闭,启动时打印警告。同机任意进程可经此服务执行命令、读写文件,仅建议在隔离环境或 CI 中使用

认证方式(以下任一方式均可):

URL 参数:?password=xxx — 打开 Web UI 首页时自动登录并下发 Cookie(仅首页有效,对 /api/v1/* 端点无效)

登录页面:输入终端显示的密码

Bearer Token:Authorization: Bearer <password>,用于 API 访问

Cookie:gateway_session,浏览器登录后自动携带,有效期 30 天

在 ~/.codebuddy/settings.json 中配置:

{  "gateway.auth": "none"}

功能详解

对话视图

默认视图,用于与 Agent 交互。核心功能:

富文本消息渲染:Markdown、语法高亮代码块、表格、图片

工具执行展示:内联查看工具调用、参数和结果

权限管理:在浏览器中直接批准或拒绝工具权限

问答面板:回答 Agent 的多选问题

任务进度:实时监控后台任务和 Team 进度

会话管理:新建对话、浏览历史、切换会话

工作目录管理:添加/移除附加工作目录,扩展 Agent 的文件访问范围(底部工具栏堆叠图标)

终端视图

基于 xterm.js 的内嵌终端:

分屏布局:支持水平和垂直分屏,最多 4 个面板

独立会话:每个面板有独立的 PTY 会话

持久连接:终端会话在页面刷新后保持

自适应调整:窗口大小变化时面板自动调整

文档视图

在 Web UI 中直接浏览 CLI 文档:

全文搜索:基于 MiniSearch 搜索所有文档

多语言:自动跟随 UI 语言设置(中文/英文)

目录导航:根据文档标题自动生成,带滚动追踪

内部跳转:文档链接在查看器内导航(SPA 模式)

API 文档:快速链接到 /api/docs 的交互式 Swagger UI

实例管理

管理多个 CodeBuddy Code 实例:

实例列表:查看所有运行中的实例及其工作目录和状态

快速切换:一键切换实例

手动添加:通过 URL 添加远程实例

隧道支持:通过 Cloudflare Tunnel 访问实例

设置

主题:浅色、深色或跟随系统(自动检测)

语言:中文、英文或跟随系统(自动检测)

模型:从可用选项中选择 AI 模型

权限模式:默认、接受编辑、跳过权限或规划模式

API 文档

HTTP 服务运行时,可在以下地址访问交互式 API 探索器:

http://127.0.0.1:{PORT}/api/docs

Swagger UI 提供以下功能:

浏览所有可用的 REST API 端点

查看请求/响应 Schema

直接在浏览器中测试 API 调用

在 /api/openapi.json 下载 OpenAPI 3.1 规范

完整的 API 参考请见 HTTP API 文档。

移动端支持

Web UI 完全响应式,支持移动设备:

侧边栏:小屏幕上折叠为滑出式抽屉

PWA 支持:添加到主屏幕获得类原生应用体验

触控优化:所有交互针对触摸操作优化

扫码访问:终端扫码即可在手机上打开

快捷键

快捷键

操作

Enter

发送消息

Shift+Enter

输入换行

Escape

停止运行中的 Agent

技术细节

框架:React 18 + Zustand 状态管理

通信:ACP 协议,基于 HTTP/SSE(非 WebSocket)

样式:Tailwind CSS + CSS 变量主题

终端:xterm.js + fit addon

搜索:MiniSearch 客户端全文搜索

Markdown:react-markdown + remark-gfm + 语法高亮

相关文档

远程控制 — 通过 Gateway 和 Tunnel 启动 Web UI

HTTP API — 完整的 REST API 文档

ACP 协议 — IDE 集成的 Agent Client Protocol

设置 — 配置选项


热门文章
更多>