Dotyczy OpenClaw v2026.2 | Artykuł zakłada ukończenie podstawowej instalacji i chęć zarządzania OpenClaw przez przeglądarkę.

TL;DR: Web UI dostępny pod http://127.0.0.1:18789, zawiera strony: Chat (rozmowa), Sessions (sesje), Config (konfiguracja), Nodes (węzły), Logs (logi), Skills (umiejętności). Canvas to przestrzeń wizualizacji sterowana przez agenta — tworzenie wykresów, dashboardów, interfejsów interaktywnych. Zdalny dostęp: Tailscale Serve lub tunel SSH. Mobilny Canvas dostępny w aplikacjach iOS/Android.

Web Control UI

Dostęp do Web UI

Po uruchomieniu Gateway otwórz przeglądarkę:

http://127.0.0.1:18789

Przegląd interfejsu

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat — Rozmowa]
        Sessions[Sessions — Sesje]
        Config[Config — Konfiguracja]
        Nodes[Nodes — Węzły]
        Logs[Logs — Logi]
        Skills[Skills — Umiejętności]
    end
    
    subgraph Features["Funkcje"]
        F1[Rozmowa w czasie rzeczywistym]
        F2[Zarządzanie sesjami]
        F3[Edycja konfiguracji]
        F4[Sterowanie węzłami]
        F5[Przeglądanie logów]
        F6[Zarządzanie umiejętnościami]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Funkcje stron

Chat (Rozmowa)

Sessions (Sesje)

Config (Konfiguracja)

Nodes (Węzły)

Logs (Logi)

Skills (Umiejętności)

Konfiguracja Web UI

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

Zdalny dostęp

Metoda 1: Tailscale

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

Dostęp przez sieć Tailscale:

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

Metoda 2: Tunel SSH

# Utworzenie tunelu SSH lokalnie
ssh -L 18789:localhost:18789 user@remote-server

# Następnie otwórz
http://localhost:18789

Metoda 3: Reverse proxy

Za pomocą Caddy lub Nginx:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas — wizualna przestrzeń robocza

Czym jest Canvas?

Canvas to przestrzeń wizualizacji sterowana przez agenta. Agent może:

• Tworzyć dynamiczne wykresy
• Budować interaktywne interfejsy
• Wyświetlać dane w czasie rzeczywistym
• Generować dashboardy
• Osadzać zewnętrzne treści

Architektura Canvas

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[Analiza żądania]
        GEN[Generowanie A2UI]
        EXEC[Wykonanie operacji]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Silnik renderowania]
        STATE[Zarządzanie stanem]
        EVENT[Obsługa zdarzeń]
    end
    
    subgraph UI["Interfejs użytkownika"]
        DISPLAY[Wyświetlanie Canvas]
        INTERACT[Interakcja użytkownika]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Podstawowe użycie

Użycie Canvas w czacie

Użytkownik: Stwórz prostą aplikację listy zadań

Agent: Tworzę aplikację listy zadań w Canvas...
[Generowanie komponentu Canvas]

Komendy Canvas

Komponenty Canvas

Komponent tekstowy

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

Komponent przycisku

canvas.button({
  label: "Kliknij mnie",
  onClick: () => {
    console.log("Przycisk kliknięty!")
  },
  style: {
    background: "#3b82f6",
    color: "white"
  }
})

Komponent listy

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

Komponent wykresu

canvas.chart({
  type: "bar",
  data: {
    labels: ["Sty", "Lut", "Mar"],
    datasets: [{
      label: "Przychód",
      data: [100, 200, 150]
    }]
  }
})

Komponent formularza

canvas.form({
  fields: [
    { name: "username", type: "text", label: "Nazwa użytkownika" },
    { name: "email", type: "email", label: "Email" },
    { name: "submit", type: "submit", label: "Wyślij" }
  ],
  onSubmit: (data) => {
    console.log("Formularz wysłany:", data)
  }
})

Praktyczne przykłady

Przykład 1: Dashboard danych

// Kod Canvas wygenerowany przez agenta
canvas.render(`
  <Dashboard>
    <Header title="Dashboard sprzedaży" />
    <Row>
      <Card title="Łączny przychód" value="$125,430" trend="+12%" />
      <Card title="Aktywni użytkownicy" value="3,245" trend="+5%" />
      <Card title="Współczynnik konwersji" value="4.2%" trend="-1%" />
    </Row>
    <Row>
      <Chart type="line" data={revenueData} title="Trend przychodów" />
      <Chart type="bar" data={usersData} title="Wzrost użytkowników" />
    </Row>
  </Dashboard>
`)

Przykład 2: Interaktywny kalkulator

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>
      // ... więcej przycisków
    </Keypad>
  </Calculator>
`)

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

Przykład 3: Monitoring w czasie rzeczywistym

canvas.render(`
  <Monitor>
    <Header title="Monitor systemu" />
    <Metrics>
      <Metric 
        label="Użycie CPU" 
        value={cpuUsage} 
        threshold={80}
        unit="%"
      />
      <Metric 
        label="Pamięć" 
        value={memoryUsed} 
        threshold={90}
        unit="GB"
      />
      <Metric 
        label="Dysk I/O" 
        value={diskIO} 
        unit="MB/s"
      />
    </Metrics>
    <Chart type="line" data={historyData} realtime />
  </Monitor>
`)

// Okresowa aktualizacja danych
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

API Canvas

canvas.render(template)

Renderowanie zawartości Canvas.

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

canvas.update()

Aktualizacja stanu Canvas.

state.count++
canvas.update()

canvas.clear()

Wyczyszczenie Canvas.

canvas.clear()

canvas.snapshot()

Pobranie zrzutu Canvas.

const image = await canvas.snapshot()

canvas.eval(code)

Wykonanie kodu w kontekście Canvas.

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

Biblioteka komponentów A2UI

Canvas używa biblioteki komponentów A2UI (Agent-to-UI):

Komponenty układu

Wyświetlanie danych

Komponenty interaktywne

Współpraca Canvas z agentem

Agent tworzy Canvas

Użytkownik: Stwórz panel śledzenia postępu projektu

Agent: Tworzę panel śledzenia postępu projektu w Canvas...

Agent:

1. Analizuje wymagania
2. Projektuje układ
3. Generuje kod Canvas
4. Renderuje interfejs

Canvas wyzwala agenta

Interakcja użytkownika z Canvas może wyzwalać operacje agenta:

canvas.button({
  label: "Generuj raport",
  onClick: async () => {
    await agent.send("Wygeneruj raport miesięczny")
  }
})

Canvas na różnych urządzeniach

macOS

Canvas wyświetlany jako osobne okno:

openclaw canvas show

iOS

Canvas zintegrowany w iOS Node App:

• Otwórz aplikację OpenClaw iOS
• Przełącz na zakładkę Canvas

Android

Canvas zintegrowany w Android Node App:

• Otwórz aplikację OpenClaw Android
• Przełącz na zakładkę Canvas

Web

Canvas wyświetlany w Web UI:

• Otwórz http://localhost:18789
• Kliknij zakładkę Canvas

Konfiguracja Canvas

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

Podsumowanie

Web Control UI i Canvas sprawiają, że OpenClaw to nie tylko asystent czatowy, ale kompletna platforma interakcji:

• Web UI: panel sterowania w przeglądarce, zarządza wszystkim
• Canvas: przestrzeń wizualizacji sterowana przez agenta
• A2UI: bogata biblioteka komponentów, szybkie budowanie interfejsów
• Wieloplatformowość: macOS, iOS, Android, Web — spójne doświadczenie

Dzięki tym funkcjom agent może tworzyć dashboardy, interfejsy zarządzania, narzędzia interaktywne, znacząco rozszerzając scenariusze zastosowań asystenta AI.

Podsumowanie artykułu:

• Opanowałeś funkcje i użycie Web Control UI
• Poznałeś podstawowe koncepcje i komponenty Canvas
• Zapoznałeś się z biblioteką komponentów A2UI
• Nauczyłeś się współpracy Canvas z agentem
• Opanowałeś użycie Canvas na wielu urządzeniach

Historia zmian:

• 2026-02-26: Pierwsza wersja, na podstawie OpenClaw v2026.2

Nawigacja po serii:

• ← Poprzedni artykuł: Personalizacja agenta
• → Następny artykuł: Routing wielu agentów i izolacja sesji