Gilt für OpenClaw v2026.2 | Dieser Artikel setzt voraus, dass Sie die Grundinstallation abgeschlossen haben und OpenClaw über den Browser verwalten möchten.

TL;DR: Web UI erreichbar unter http://127.0.0.1:18789, enthält die Seiten Chat (Konversation), Sessions (Sitzungen), Config (Konfiguration), Nodes (Knoten), Logs (Protokolle), Skills (Fähigkeiten). Canvas ist ein Agent-gesteuerter visueller Arbeitsbereich zum Erstellen von Diagrammen, Dashboards und interaktiven Oberflächen. Fernzugriff: Tailscale Serve oder SSH-Tunnel. Mobiles Canvas ist in der iOS/Android App verfügbar.

Web Control UI

Zugriff auf die Web UI

Nach dem Start des Gateways öffnen Sie den Browser und navigieren zu:

http://127.0.0.1:18789

Oberflächenübersicht

flowchart LR
    subgraph WebUI["Web Control UI"]
        Chat[Chat Konversation]
        Sessions[Sessions Sitzungen]
        Config[Config Konfiguration]
        Nodes[Nodes Knoten]
        Logs[Logs Protokolle]
        Skills[Skills Fähigkeiten]
    end
    
    subgraph Features["Funktionen"]
        F1[Echtzeit-Konversation]
        F2[Sitzungsverwaltung]
        F3[Konfigurationsbearbeitung]
        F4[Knotensteuerung]
        F5[Protokollanzeige]
        F6[Fähigkeitenverwaltung]
    end
    
    Chat --> F1
    Sessions --> F2
    Config --> F3
    Nodes --> F4
    Logs --> F5
    Skills --> F6

Seitenfunktionen

Chat (Konversation)

Sessions (Sitzungen)

Config (Konfiguration)

Nodes (Knoten)

Logs (Protokolle)

Skills (Fähigkeiten)

Web UI konfigurieren

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

Fernzugriff

Methode 1: Tailscale

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

Zugriff über das Tailscale-Netzwerk:

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

Methode 2: SSH-Tunnel

# Lokalen SSH-Tunnel erstellen
ssh -L 18789:localhost:18789 user@remote-server

# Dann zugreifen
http://localhost:18789

Methode 3: Reverse Proxy

Mit Caddy oder Nginx:

Caddyfile:

your-domain.com {
    reverse_proxy localhost:18789
}

Canvas – Visueller Arbeitsbereich

Was ist Canvas?

Canvas ist ein von Agents gesteuerter visueller Arbeitsbereich. Der Agent kann:

• Dynamische Diagramme erstellen
• Interaktive Oberflächen aufbauen
• Echtzeitdaten anzeigen
• Dashboards generieren
• Externe Inhalte einbetten

Canvas-Architektur

flowchart TB
    subgraph Agent["Agent"]
        PROMPT[Anfrage analysieren]
        GEN[A2UI generieren]
        EXEC[Operationen ausführen]
    end
    
    subgraph Canvas["Canvas Runtime"]
        RENDER[Rendering-Engine]
        STATE[Zustandsverwaltung]
        EVENT[Ereignisverarbeitung]
    end
    
    subgraph UI["Benutzeroberfläche"]
        DISPLAY[Canvas anzeigen]
        INTERACT[Benutzerinteraktion]
    end
    
    Agent --> Canvas
    PROMPT --> GEN
    GEN --> RENDER
    RENDER --> DISPLAY
    DISPLAY --> INTERACT
    INTERACT --> EVENT
    EVENT --> EXEC

Grundlegende Verwendung

Canvas im Chat verwenden

Benutzer: Erstelle eine einfache To-Do-Anwendung

Agent: Ich erstelle eine To-Do-Canvas-Anwendung...
[Canvas-Komponenten werden generiert]

Canvas-Befehle

Canvas-Komponenten

Textkomponente

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

Schaltflächenkomponente

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

Listenkomponente

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

Diagrammkomponente

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

Formularkomponente

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

Praxisbeispiele

Beispiel 1: Daten-Dashboard

// Vom Agent generierter 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>
`)

Beispiel 2: Interaktiver Taschenrechner

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>
      // ... weitere Schaltflächen
    </Keypad>
  </Calculator>
`)

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

Beispiel 3: Echtzeit-Überwachung

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

// Daten regelmäßig aktualisieren
setInterval(() => {
  cpuUsage = getCpuUsage()
  memoryUsed = getMemoryUsed()
  diskIO = getDiskIO()
  canvas.update()
}, 1000)

Canvas API

canvas.render(template)

Canvas-Inhalt rendern.

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

canvas.update()

Canvas-Zustand aktualisieren.

state.count++
canvas.update()

canvas.clear()

Canvas leeren.

canvas.clear()

canvas.snapshot()

Canvas-Snapshot erstellen.

const image = await canvas.snapshot()

canvas.eval(code)

Code im Canvas-Kontext ausführen.

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

A2UI-Komponentenbibliothek

Canvas verwendet die A2UI-Komponentenbibliothek (Agent-to-UI):

Layout-Komponenten

Datenanzeige

Interaktive Komponenten

Zusammenarbeit von Canvas und Agent

Agent erstellt Canvas

Benutzer: Erstelle mir ein Projektfortschritts-Dashboard

Agent: In Ordnung, ich erstelle ein Projektfortschritts-Canvas...

Der Agent wird:

1. Anforderungen analysieren
2. Layout entwerfen
3. Canvas-Code generieren
4. Oberfläche rendern

Canvas löst Agent-Aktionen aus

Wenn Benutzer mit Canvas interagieren, können Agent-Operationen ausgelöst werden:

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

Canvas auf verschiedenen Geräten verwenden

macOS

Canvas wird als eigenständiges Fenster angezeigt:

openclaw canvas show

iOS

Canvas ist in die iOS Node App integriert:

• Öffnen Sie die OpenClaw iOS App
• Wechseln Sie zum Canvas-Tab

Android

Canvas ist in die Android Node App integriert:

• Öffnen Sie die OpenClaw Android App
• Wechseln Sie zum Canvas-Tab

Web

Canvas wird in der Web UI angezeigt:

• Öffnen Sie http://localhost:18789
• Klicken Sie auf den Canvas-Tab

Canvas konfigurieren

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

Fazit

Web Control UI und Canvas machen OpenClaw nicht nur zu einem Chat-Assistenten, sondern zu einer vollständigen Interaktionsplattform:

• Web UI: Browser-Kontrollpanel zur Verwaltung aller Aspekte
• Canvas: Agent-gesteuerter visueller Arbeitsbereich
• A2UI: Umfangreiche Komponentenbibliothek für schnellen Oberflächenbau
• Geräteübergreifend: Einheitliche Erfahrung auf macOS, iOS, Android, Web

Mit diesen Funktionen kann der Agent Dashboards, Verwaltungsoberflächen und interaktive Werkzeuge erstellen, was die Einsatzszenarien des KI-Assistenten erheblich erweitert.

Zusammenfassung dieses Artikels:

• Die Funktionen und Nutzung der Web Control UI gemeistert
• Die grundlegenden Konzepte und Komponenten von Canvas erlernt
• Die A2UI-Komponentenbibliothek kennengelernt
• Die Zusammenarbeit zwischen Canvas und Agent verstanden
• Die Nutzung von Canvas auf mehreren Geräten gemeistert

Änderungsprotokoll:

• 2026-02-26: Erstveröffentlichung, basierend auf OpenClaw v2026.2

Seriennavigation:

• ← Vorheriger Artikel: Agent-Persönlichkeitsanpassung
• → Nächster Artikel: Multi-Agent-Routing und Sitzungsisolierung