Canvas für macOS nutzen

Kennst du das? Du entwickelst einen Agenten und willst eigentlich nur kurz das Ergebnis einer HTML-Änderung sehen, aber landest in einem Loop aus Terminal-Ausgaben und Browser-Tabs. Es fehlt ein direkter Weg, UI-Elemente ohne großen Setup-Aufwand anzuzeigen.

Dieses Hin- und Herwechseln zwischen Tools bremst den Workflow massiv aus. Canvas löst das Problem, indem es eine leichtgewichtige Arbeitsfläche direkt in macOS integriert, die dein Agent steuern kann.

Voraussetzungen

• OpenClaw macOS App
• Gateway WebSocket Verbindung
• Aktivierte “Allow Canvas” Einstellung in den Settings
• Lokale Dateien unter ~/Library/Application Support/OpenClaw/canvas/

Schnellstart

In fünf Minuten hast du dein erstes interaktives Panel am Laufen. Folge diesen Schritten:

1. Canvas aktivieren: Gehe in die Settings und aktiviere Allow Canvas.
2. Panel anzeigen: Nutze die CLI, um das Fenster zu öffnen:

   openclaw nodes canvas present --node <id>

3. Inhalt laden: Navigiere zu deiner lokalen index.html oder einer URL:

   openclaw nodes canvas navigate --node <id> --url "/"

4. JavaScript ausführen: Teste die Verbindung direkt über die Konsole:

   openclaw nodes canvas eval --node <id> --js "document.title"

A2UI Integration

Wenn du A2UI nutzt, ist Canvas der Standard-Host. Beachte, dass aktuell A2UI v0.8 unterstützt wird. Neuere Befehle wie createSurface (v0.9) funktionieren noch nicht.

Hier ist ein Beispiel, wie du UI-Komponenten per Push an das Canvas sendest:

cat > /tmp/a2ui-v0.8.jsonl <<'EOFA2'
{"surfaceUpdate":{"surfaceId":"main","components":[{"id":"root","component":{"Column":{"children":{"explicitList":["title","content"]}}}},{"id":"title","component":{"Text":{"text":{"literalString":"Canvas (A2UI v0.8)"},"usageHint":"h1"}}},{"id":"content","component":{"Text":{"text":{"literalString":"If you can read this, A2UI push works."},"usageHint":"body"}}}]}}
{"beginRendering":{"surfaceId":"main","root":"root"}}
EOFA2

openclaw nodes canvas a2ui push --jsonl /tmp/a2ui-v0.8.jsonl --node <id>

Für einen schnellen Test reicht auch dieser Befehl:

openclaw nodes canvas a2ui push --node <id> --text "Hello from A2UI"

Agent-Runs aus Canvas triggern

Du kannst direkt aus dem Canvas heraus neue Agent-Runs starten. Das ist besonders nützlich für interaktive Dashboards. Nutze dafür Deep Links:

// Beispiel in JavaScript innerhalb deines Canvas
window.location.href = "openclaw://agent?message=Review%20this%20design";

Die App fragt aus Sicherheitsgründen nach einer Bestätigung, außer du hast einen gültigen Key hinterlegt.

Fehlerbehebung

• Fehlermeldung CANVAS_DISABLED: Du musst Canvas erst unter Settings → Allow Canvas freischalten.
• Leere Seite: Wenn keine index.html im Root-Verzeichnis deines Sessions-Ordners liegt, zeigt die App automatisch eine integrierte Scaffold-Seite an.

Du hast Fragen zum Setup? Nutze den AI Setup Assistant.

Nächste Schritte

• Gateway Protokoll Details
• A2UI Komponenten-Referenz