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 アプリで利用可能です。

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（チャット）

Sessions（セッション）

Config（設定）

Nodes（ノード）

Logs（ログ）

Skills（スキル）

Web UI の設定

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

リモートアクセス

方法1：Tailscale

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

Tailscale ネットワーク経由でアクセス：

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

方法2：SSH トンネル

# ローカルで SSH トンネルを作成
ssh -L 18789:localhost:18789 user@remote-server

# その後アクセス
http://localhost:18789

方法3：リバースプロキシ

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 ランタイム"]
        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 を使用

ユーザー：シンプルな ToDo アプリを作成して

Agent：ToDo アプリの Canvas を作成します...
[Canvas コンポーネントを生成]

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)
  }
})

実践例

例1：データダッシュボード

// 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>
`)

例2：インタラクティブ電卓

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()
}

例3：リアルタイム監視

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）コンポーネントライブラリを使用します：

レイアウトコンポーネント

データ表示

インタラクティブコンポーネント

Canvas と Agent の連携

Agent が Canvas を作成

ユーザー：プロジェクト進捗トラッキングパネルを作成して

Agent：プロジェクト進捗トラッキング Canvas を作成します...

Agent は以下を実行します：

1. 要件を分析
2. レイアウトを設計
3. Canvas コードを生成
4. インターフェースをレンダリング

Canvas から Agent をトリガー

ユーザーが Canvas とやり取りすると、Agent 操作をトリガーできます：

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("月次レポートを生成")
  }
})

様々なデバイスで Canvas を使用

macOS

Canvas は独立ウィンドウで表示されます：

openclaw canvas show

iOS

Canvas は iOS Node アプリに統合されています：

• OpenClaw iOS アプリを開く
• Canvas タブに切り替え

Android

Canvas は Android Node アプリに統合されています：

• OpenClaw Android アプリを開く
• Canvas タブに切り替え

Web

Canvas は Web UI で表示されます：

• http://localhost:18789 を開く
• Canvas タブをクリック

Canvas の設定

{
  "canvas": {
    "enabled": 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 ルーティングとセッション分離