可观测性仪表盘#

使用本地 Web 仪表盘实时监控 agent-browser 会话，展示实时浏览器视口和命令活动流。

用法#

仪表盘已打包进二进制文件，无需单独安装。启动服务器后打开任意会话：

agent-browser dashboard start
agent-browser open example.com

然后在浏览器中打开 http://localhost:4848，或者打开经代理/转发后的仪表盘 URL，例如 https://dashboard.agent-browser.localhost，即可查看实时仪表盘。

所有会话都会自动流式传输到仪表盘，无需额外标志。浏览器会停留在仪表盘来源下，而服务器会在内部代理每个会话的标签页、状态和流量，因此无需暴露会话端口。

自定义流端口#

默认情况下，每个会话都会把 WebSocket 流服务器绑定到操作系统分配的端口。若要使用特定端口，请设置 AGENT_BROWSER_STREAM_PORT 环境变量：

AGENT_BROWSER_STREAM_PORT=9223 agent-browser open example.com

你也可以使用运行时命令来控制正在运行会话的流式传输：

agent-browser stream enable --port 9223
agent-browser stream status
agent-browser stream disable

仪表盘功能#

仪表盘是一个单页 Web 应用，包含三个区域：

WebSocket 协议#

仪表盘连接到与 Streaming 相同的 WebSocket 端点，并额外提供用于可观测性的消息类型：

命令事件#

当命令开始执行时发送：

{
  "type": "command",
  "action": "click",
  "id": "r123",
  "params": { "selector": "@e5" },
  "timestamp": 1711367000000
}

结果事件#

当命令完成时发送：

{
  "type": "result",
  "id": "r123",
  "action": "click",
  "success": true,
  "data": {},
  "duration_ms": 45,
  "timestamp": 1711367000045
}

控制台事件#

当浏览器向控制台输出日志时发送：

{
  "type": "console",
  "level": "log",
  "text": "Page loaded",
  "args": [{"type": "string", "value": "Page loaded"}],
  "timestamp": 1711367000100
}

args 数组包含可供程序化访问的原始 CDP Runtime.consoleAPICalled 参数。对象参数会带有预览数据（例如 {userId: "abc", count: 42}，而不是 "Object"）。

这些是对 Streaming 页面中已记录的 frame、status 和 error 消息类型的补充。

架构#

仪表盘是一个 Next.js 静态导出（output: 'export'），会生成纯 HTML、CSS 和 JS。它位于 monorepo 的 packages/dashboard/ 中，构建命令如下：

pnpm build:dashboard

仪表盘在编译时通过 rust-embed 嵌入到 CLI 二进制中。普通 HTTP 请求会提供嵌入的仪表盘资源和同源 API 路由。每个会话特定的标签页、状态和流 WebSocket 流量都会通过仪表盘服务器代理到仅限 loopback 的会话端口。

AI 聊天#

仪表盘包含一个可选的 AI 聊天面板，由 Vercel AI Gateway 驱动。启用后，右侧面板会出现一个 Chat 标签页，与 Activity、Console、Network、Storage 和 Extensions 并列。

设置#

Chat 标签页始终可见。设置 API key 后即可启用响应：

export AI_GATEWAY_API_KEY=gw_your_key_here
agent-browser dashboard start

也可以选择覆盖 gateway URL 或模型：

export AI_GATEWAY_URL=https://ai-gateway.vercel.sh   # this is the default
export AI_GATEWAY_MODEL=openai/gpt-4o-mini           # default: anthropic/claude-sonnet-4.6

工作方式#

Rust 服务会把仪表盘的聊天请求代理到 Vercel AI Gateway，并使用 Vercel AI SDK 的 UI Message Stream 协议把响应流式返回。仪表盘前端使用 @ai-sdk/react 中的 useChat，并搭配 DefaultChatTransport。