• “AI assistant dashboard”
• “OpenClaw browser control”

For OpenClaw v2026.2 | This article assumes you have completed basic installation and want to manage OpenClaw via the browser.

TL;DR: Access Web UI at http://127.0.0.1:18789. It includes Chat (conversation), Sessions, Config, Nodes, Logs, and Skills pages. Canvas is an Agent-driven visual workspace for creating charts, dashboards, and interactive interfaces. Remote access: Tailscale Serve or SSH tunnel. Mobile Canvas is available in iOS/Android apps.

Web Control UI

Accessing Web UI

After starting the Gateway, open your browser and visit:

http://127.0.0.1:18789

Interface Overview

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat]
        Sessions[Sessions]
        Config[Config]
        Nodes[Nodes]
        Logs[Logs]
        Skills[Skills]
    end
    
    subgraph Features["Features"]
        F1[Real-time Chat]
        F2[Session Management]
        F3[Config Editing]
        F4[Node Control]
        F5[Log Viewing]
        F6[Skill Management]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Page Features

Chat

Sessions

Config

Nodes

Logs

Skills

Configuring Web UI

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

Remote Access

Option 1: Tailscale

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

Access via Tailscale network:

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

Option 2: SSH Tunnel

# Create SSH tunnel on local machine
ssh -L 18789:localhost:18789 user@remote-server

# Then access
http://localhost:18789

Option 3: Reverse Proxy

Using Caddy or Nginx:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas Visual Workspace

What is Canvas?

Canvas is an Agent-driven visual workspace. The Agent can:

• Create dynamic charts
• Build interactive interfaces
• Display real-time data
• Generate dashboards
• Embed external content

Canvas Architecture

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[Analyze Request]
        GEN[Generate A2UI]
        EXEC[Execute Actions]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Render Engine]
        STATE[State Management]
        EVENT[Event Handling]
    end
    
    subgraph UI["User Interface"]
        DISPLAY[Display Canvas]
        INTERACT[User Interaction]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Basic Usage

Using Canvas in Chat

User: Create a simple todo app

Agent: I'll create a todo Canvas app...
[Generates Canvas components]

Canvas Commands

Canvas Components

Text Component

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

Button Component

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

List Component

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

Chart Component

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

Form Component

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

Practical Examples

Example 1: Data Dashboard

// Agent-generated Canvas code
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>
`)

Example 2: Interactive Calculator

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

Example 3: Real-time Monitor

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

// Update data periodically
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

Render Canvas content.

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

canvas.update()

Update Canvas state.

state.count++
canvas.update()

canvas.clear()

Clear Canvas.

canvas.clear()

canvas.snapshot()

Get Canvas snapshot.

const image = await canvas.snapshot()

canvas.eval(code)

Execute code in Canvas context.

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

A2UI Component Library

Canvas uses the A2UI (Agent-to-UI) component library:

Layout Components

Data Display

Interactive Components

Canvas and Agent Collaboration

Agent Creates Canvas

User: Help me create a project progress tracking panel

Agent: Sure, I'll create a project progress tracking Canvas...

The Agent will:

1. Analyze requirements
2. Design layout
3. Generate Canvas code
4. Render the interface

Canvas Triggers Agent

When users interact with Canvas, they can trigger Agent actions:

canvas.button({
  label: "Generate Report",
  onClick: async () => {
    await agent.send("Generate monthly report")
  }
})

Using Canvas on Different Devices

macOS

Canvas displays as a standalone window:

openclaw canvas show

iOS

Canvas is integrated in the iOS Node App:

• Open OpenClaw iOS App
• Switch to Canvas tab

Android

Canvas is integrated in the Android Node App:

• Open OpenClaw Android App
• Switch to Canvas tab

Web

Canvas displays in Web UI:

• Open http://localhost:18789
• Click Canvas tab

Configuring Canvas

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

Summary

Web Control UI and Canvas make OpenClaw more than a chat assistant—they turn it into a full interaction platform:

• Web UI: Browser control panel for managing everything
• Canvas: Agent-driven visual workspace
• A2UI: Rich component library for rapid interface building
• Cross-device: Unified experience on macOS, iOS, Android, and Web

With these features, you can have the Agent create dashboards, management interfaces, and interactive tools, greatly expanding the AI assistant’s application scenarios.

Key Takeaways:

• Mastered Web Control UI features and usage
• Learned Canvas basics and components
• Understood the A2UI component library
• Learned how Canvas collaborates with the Agent
• Mastered Canvas usage across multiple devices

Changelog:

• 2026-02-26: Initial release, based on OpenClaw v2026.2

Series Navigation:

• ← Previous: Agent Personality Customization
• → Next: Multi-Agent Routing and Session Isolation