09. OpenClaw Web Control UI 与 Canvas 使用指南

适用于 OpenClaw v2026.2 | 本文假设你已完成基础安装，想通过浏览器管理 OpenClaw。

TL;DR: Web UI 访问 http://127.0.0.1:18789，包含 Chat（对话）、Sessions（会话）、Config（配置）、Nodes（节点）、Logs（日志）、Skills（技能）页面。Canvas 是 Agent 驱动的可视化工作区，可创建图表、仪表盘、交互界面。远程访问：Tailscale Serve 或 SSH 隧道。移动端 Canvas 在 iOS/Android App 中可用。

Web Control UI

访问 Web UI

启动 Gateway 后，打开浏览器访问：

http://127.0.0.1:18789

界面概览

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat 对话]
        Sessions[Sessions 会话]
        Config[Config 配置]
        Nodes[Nodes 节点]
        Logs[Logs 日志]
        Skills[Skills 技能]
    end
    
    subgraph Features["功能"]
        F1[实时对话]
        F2[会话管理]
        F3[配置编辑]
        F4[节点控制]
        F5[日志查看]
        F6[技能管理]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

页面功能

Chat（对话）

功能	说明
消息输入	支持文本、Markdown、代码块
消息历史	显示完整对话记录
工具调用	显示工具调用过程和结果
思考过程	可选显示 Agent 思考过程
Token 统计	显示 Token 使用量
模型切换	快速切换使用的模型

Sessions（会话）

功能	说明
会话列表	查看所有活跃会话
会话详情	查看单个会话的状态和配置
会话操作	重置、删除、导出会话
会话切换	在不同会话间切换
会话隔离	按渠道、用户查看会话

Config（配置）

功能	说明
配置编辑	在线编辑配置文件
配置验证	实时验证配置语法
配置热更新	无需重启即可生效
配置导出	导出配置备份
配置历史	查看配置变更历史

Nodes（节点）

功能	说明
节点列表	查看已连接的设备节点
节点状态	显示在线状态、权限
节点控制	启用/禁用节点功能
节点配对	配对新节点

Logs（日志）

功能	说明
实时日志	流式显示系统日志
日志过滤	按级别、模块过滤
日志搜索	关键词搜索日志
日志导出	下载日志文件

Skills（技能）

功能	说明
技能列表	查看已安装技能
技能安装	从 ClawHub 安装技能
技能配置	配置技能参数
技能禁用	启用/禁用技能

配置 Web UI

{
  "web": {
    "enabled": true,
    "port": 18789,
    "bind": "loopback",
    "auth": {
      "mode": "password",
      "password": "your-secure-password"
    },
    "theme": "dark"
  }
}

配置项	说明	默认值
`enabled`	启用 Web UI	`true`
`port`	监听端口	`18789`
`bind`	绑定地址	`loopback`
`auth.mode`	认证模式	`none`
`auth.password`	访问密码	-
`theme`	主题	`dark`

远程访问

方式一：Tailscale

{
  "gateway": {
    "tailscale": {
      "mode": "serve"
    }
  }
}

通过 Tailscale 网络访问：

https://your-tailnet-name.ts.net

方式二：SSH 隧道

# 在本地创建 SSH 隧道
ssh -L 18789:localhost:18789 user@remote-server

# 然后访问
http://localhost:18789

方式三：反向代理

使用 Caddy 或 Nginx：

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas 可视化工作区

什么是 Canvas？

Canvas 是一个由 Agent 驱动的可视化工作区。Agent 可以：

创建动态图表
构建交互界面
显示实时数据
生成仪表盘
嵌入外部内容

Canvas 架构

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[分析请求]
        GEN[生成 A2UI]
        EXEC[执行操作]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[渲染引擎]
        STATE[状态管理]
        EVENT[事件处理]
    end
    
    subgraph UI["用户界面"]
        DISPLAY[显示 Canvas]
        INTERACT[用户交互]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

基本使用

在聊天中使用 Canvas

用户：创建一个简单的待办事项应用

Agent：我来创建一个待办事项 Canvas 应用...
[生成 Canvas 组件]

Canvas 命令

命令	说明
`/canvas create`	创建新 Canvas
`/canvas show`	显示当前 Canvas
`/canvas clear`	清空 Canvas
`/canvas export`	导出 Canvas

Canvas 组件

文本组件

canvas.text({
  content: "Hello, World!",
  style: {
    fontSize: "24px",
    color: "#333",
    fontWeight: "bold"
  }
})

按钮组件

canvas.button({
  label: "Click Me",
  onClick: () => {
    console.log("Button clicked!")
  },
  style: {
    background: "#3b82f6",
    color: "white"
  }
})

列表组件

canvas.list({
  items: ["Item 1", "Item 2", "Item 3"],
  onSelect: (item) => {
    console.log(`Selected: ${item}`)
  }
})

图表组件

canvas.chart({
  type: "bar",
  data: {
    labels: ["Jan", "Feb", "Mar"],
    datasets: [{
      label: "Revenue",
      data: [100, 200, 150]
    }]
  }
})

表单组件

canvas.form({
  fields: [
    { name: "username", type: "text", label: "Username" },
    { name: "email", type: "email", label: "Email" },
    { name: "submit", type: "submit", label: "Submit" }
  ],
  onSubmit: (data) => {
    console.log("Form submitted:", data)
  }
})

实战示例

示例一：数据仪表盘

// Agent 生成的 Canvas 代码
canvas.render(`
  <Dashboard>
    <Header title="Sales Dashboard" />
    <Row>
      <Card title="Total Revenue" value="$125,430" trend="+12%" />
      <Card title="Active Users" value="3,245" trend="+5%" />
      <Card title="Conversion Rate" value="4.2%" trend="-1%" />
    </Row>
    <Row>
      <Chart type="line" data={revenueData} title="Revenue Trend" />
      <Chart type="bar" data={usersData} title="User Growth" />
    </Row>
  </Dashboard>
`)

示例二：交互式计算器

canvas.render(`
  <Calculator>
    <Display value={display} />
    <Keypad>
      <Button onClick={() => input('7')}>7</Button>
      <Button onClick={() => input('8')}>8</Button>
      <Button onClick={() => input('9')}>9</Button>
      <Button onClick={() => input('/')}>/</Button>
      // ... more buttons
    </Keypad>
  </Calculator>
`)

const state = { display: '0' }
function input(value) {
  state.display = calculate(state.display, value)
  canvas.update()
}

示例三：实时监控

canvas.render(`
  <Monitor>
    <Header title="System Monitor" />
    <Metrics>
      <Metric 
        label="CPU Usage" 
        value={cpuUsage} 
        threshold={80}
        unit="%"
      />
      <Metric 
        label="Memory" 
        value={memoryUsed} 
        threshold={90}
        unit="GB"
      />
      <Metric 
        label="Disk I/O" 
        value={diskIO} 
        unit="MB/s"
      />
    </Metrics>
    <Chart type="line" data={historyData} realtime />
  </Monitor>
`)

// 定期更新数据
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

渲染 Canvas 内容。

canvas.render(`
  <Container>
    <Text>Hello</Text>
  </Container>
`)

canvas.update()

更新 Canvas 状态。

state.count++
canvas.update()

canvas.clear()

清空 Canvas。

canvas.clear()

canvas.snapshot()

获取 Canvas 快照。

const image = await canvas.snapshot()

canvas.eval(code)

在 Canvas 上下文中执行代码。

await canvas.eval(`
  document.getElementById('counter').innerText = '${count}'
`)

A2UI 组件库

Canvas 使用 A2UI（Agent-to-UI）组件库：

布局组件

组件	说明
`<Container>`	容器
`<Row>`	水平布局
`<Column>`	垂直布局
`<Grid>`	网格布局
`<Card>`	卡片容器

数据展示

组件	说明
`<Text>`	文本
`<Heading>`	标题
`<List>`	列表
`<Table>`	表格
`<Chart>`	图表

交互组件

组件	说明
`<Button>`	按钮
`<Input>`	输入框
`<Select>`	下拉选择
`<Checkbox>`	复选框
`<Form>`	表单

Canvas 与 Agent 协作

Agent 创建 Canvas

用户：帮我创建一个项目进度跟踪面板

Agent：好的，我来创建一个项目进度跟踪 Canvas...

Agent 会：

分析需求
设计布局
生成 Canvas 代码
渲染界面

Canvas 触发 Agent

用户与 Canvas 交互时，可以触发 Agent 操作：

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("生成月度报告")
  }
})

在不同设备使用 Canvas

macOS

Canvas 作为独立窗口显示：

openclaw canvas show

iOS

Canvas 集成在 iOS Node App 中：

打开 OpenClaw iOS App
切换到 Canvas 标签页

Android

Canvas 集成在 Android Node App 中：

打开 OpenClaw Android App
切换到 Canvas 标签页

Web

Canvas 在 Web UI 中显示：

打开 http://localhost:18789
点击 Canvas 标签页

配置 Canvas

{
  "canvas": {
    "enabled": true,
    "theme": "dark",
    "autoUpdate": true,
    "updateInterval": 1000,
    "maxComponents": 100,
    "persistState": true
  }
}

配置项	说明	默认值
`enabled`	启用 Canvas	`true`
`theme`	主题	`dark`
`autoUpdate`	自动更新状态	`true`
`updateInterval`	更新间隔（毫秒）	`1000`
`maxComponents`	最大组件数	`100`
`persistState`	持久化状态	`true`

小结

Web Control UI 和 Canvas 让 OpenClaw 不仅是一个聊天助手，更是一个完整的交互平台：

Web UI：浏览器控制面板，管理一切
Canvas：Agent 驱动的可视化工作区
A2UI：丰富的组件库，快速构建界面
跨设备：macOS、iOS、Android、Web 统一体验

通过这些功能，你可以让 Agent 创建仪表盘、管理界面、交互工具，极大扩展了 AI 助手的应用场景。

本篇小结：

掌握了 Web Control UI 的功能和使用
学会了 Canvas 的基本概念和组件
了解了 A2UI 组件库
学习了 Canvas 与 Agent 的协作方式
掌握了多设备 Canvas 使用方法

更新记录：

2026-02-26：初版发布，基于 OpenClaw v2026.2

系列导航：

← 上一篇：Agent 人格定制
→ 下一篇：多 Agent 路由与会话隔离