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 路由與工作階段隔離