Canvas Skill

• Sie möchten, dass ein KI-Agent eine generierte HTML-Seite (Dashboard, Spiel, Visualisierung) in Echtzeit auf Ihren Mac, Ihr iPhone oder Ihr Android-Gerät überträgt.
• Sie erstellen Prototypen für interaktive HTML-Inhalte und benötigen Live-Reload — speichern Sie eine Datei und das verbundene Canvas aktualisiert sich automatisch.
• Sie benötigen den Agenten, um JavaScript remote innerhalb einer laufenden WebView auszuführen (z. B. um Diagrammdaten ohne vollständiges Neuladen zu aktualisieren).
• Sie möchten einen Screenshot des gerenderten Canvas-Inhalts innerhalb eines Agenten-Workflows aufnehmen.

• Sie verwenden keine OpenClaw-Nodes — diese Canvas Skill ist ausschließlich für das OpenClaw Mac/iOS/Android-Ökosystem.
• Sie Inhalte öffentlich oder für Nicht-Tailscale-Peers bereitstellen müssen; der Server ist nur für lokalen/LAN/Tailscale-Zugriff gedacht.
• Sie einen vollständigen Browser einbetten oder beliebige externe URLs anzeigen möchten — der Canvas-Host stellt nur Dateien aus einem konfigurierten lokalen Stammverzeichnis bereit.

Fünf separate Aktionen — present, hide, navigate, eval und snapshot — geben Agenten eine präzise Kontrolle darüber, was auf einem Node angezeigt wird. Präsentieren Sie eine URL, tauschen Sie Inhalte über „navigate" aus, führen Sie JavaScript ohne Neuladen aus oder erstellen Sie einen Screenshot – alles über eine einzige Canvas Skill.

Wenn liveReload: true gesetzt ist (der Standardwert), überwacht der Canvas-Host das Stammverzeichnis über chokidar und fügt einen WebSocket-Client in HTML-Dateien ein. Das Speichern einer beliebigen Datei aktualisiert verbundene Canvases sofort und macht die iterative HTML-Generierung schnell.

Der HTTP-Server kann sich an Loopback, eine LAN-Schnittstelle, eine Tailscale-Schnittstelle binden oder automatisch auswählen. Der korrekte Hostname wird automatisch über die Bridge an die Nodes weitergeleitet, sodass Inhalte unabhängig von der Netzwerktopologie korrekt geladen werden.

Die Aktion eval ermöglicht es Agenten, beliebigen JavaScript-Code innerhalb der aktiven Canvas-WebView auszuführen. Dies ermöglicht dynamische Aktualisierungen – das Übertragen neuer Daten an ein Diagramm, das Auslösen von Animationen oder das Lesen des DOM-Zustands – ohne zu einer neuen Seite zu navigieren.

Die Aktion snapshot erfasst einen Screenshot des aktuellen Canvas auf einem angegebenen Knoten und gibt ihn an den Agenten zurück, wodurch die visuelle Überprüfung oder Protokollierung von gerendertem Inhalt ermöglicht wird.

Ein Agent generiert ein HTML-Dashboard, das Daten zusammenfasst (z. B. Verkaufskennzahlen, Systemstatistiken), und schreibt es in ~/clawd/canvas/dashboard.html. Anschließend ruft er canvas action:present auf, das auf deinen Mac-Node abzielt, und das Dashboard erscheint sofort in der Canvas Skill-Ansicht.

Füge ein eigenständiges HTML5-Spiel in den Canvas-Stamm ein und lass den Agenten es anschließend auf einem verbundenen iPhone-Knoten präsentieren. Der Agent kann später hide aufrufen oder zu einer anderen Demo wechseln, ohne dass manuelle Schritte auf dem Gerät erforderlich sind.

Präsentiere eine Diagrammseite einmalig und verwende anschließend wiederholte eval-Aktionen, um neue Datenpunkte in den laufenden JavaScript-Kontext zu übertragen. Das Diagramm aktualisiert sich live, ohne die Seite neu zu laden – nützlich für die Überwachung oder die Echtzeit-Ausgabe von Agenten.

Halte während der Entwicklung die Canvas Skill auf einem verbundenen Knoten geöffnet und bearbeite HTML-Dateien im Canvas-Stammverzeichnis. Jedes Speichern löst einen automatischen Neuladevorgangs aus, der sofortiges visuelles Feedback liefert – ohne manuelles Aktualisieren oder erneutes Ausführen von Befehlen.