Для 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 (Чат)

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

Текстовый компонент

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: Дашборд данных

// Код Canvas, сгенерированный Agent
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>
      // ... остальные кнопки
    </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

Создание Canvas Agent

Пользователь: Создай панель отслеживания прогресса проекта

Agent: Создаю Canvas для отслеживания прогресса проекта...

Agent выполняет:

1. Анализ требований
2. Проектирование макета
3. Генерацию кода Canvas
4. Рендеринг интерфейса

Вызов Agent из Canvas

При взаимодействии пользователя с 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
  }
}

Итоги

Web Control UI и Canvas превращают OpenClaw в полноценную интерактивную платформу:

• Web UI: панель управления в браузере для всего
• Canvas: визуальная рабочая область на базе Agent
• A2UI: богатая библиотека компонентов для быстрой сборки интерфейсов
• Кроссплатформенность: единый опыт на macOS, iOS, Android и Web

С этими возможностями можно создавать дашборды, панели управления и интерактивные инструменты, значительно расширяя сценарии применения ИИ-ассистента.

Итоги статьи:

• Освоены функции и использование Web Control UI
• Изучены базовые концепции и компоненты Canvas
• Узнана библиотека компонентов A2UI
• Изучено взаимодействие Canvas и Agent
• Освоено использование Canvas на разных устройствах

История обновлений:

• 2026-02-26: Первая версия, на основе OpenClaw v2026.2

Навигация по серии:

• ← Предыдущая статья: Кастомизация Agent
• → Следующая статья: Мульти-Agent маршрутизация и изоляция сессий