Canvas Skill

• Du vill att en AI-agent ska skicka en genererad HTML-sida (dashboard, spel, visualisering) till din Mac, iPhone eller Android-enhet i realtid.
• Du prototypar interaktivt HTML-innehåll och behöver live-reload — spara en fil och den anslutna canvasen uppdateras automatiskt.
• Du behöver att agenten fjärrexekverar JavaScript inuti en körande WebView (t.ex. uppdatering av diagramdata utan en fullständig omladdning).
• Du vill ta en skärmbild av renderat canvas-innehåll inifrån ett agentarbetsflöde.

• Du använder inte OpenClaw-noder — denna Canvas Skill är uteslutande för OpenClaw Mac/iOS/Android-ekosystemet.
• Du behöver tillhandahålla innehåll offentligt eller till icke-Tailscale-peers; servern är avsedd för lokal/LAN/Tailscale-åtkomst endast.
• Du vill bädda in en fullständig webbläsare eller visa godtyckliga externa URL:er — canvas-värden tillhandahåller endast filer från en konfigurerad lokal rotkatalog.

Fem separata åtgärder — present, hide, navigate, eval och snapshot — ger agenter detaljerad kontroll över vad som visas på en nod. Visa en URL, byt innehåll via navigate, kör JavaScript utan omladdning eller ta en skärmbild, allt från en enda Canvas Skill.

När liveReload: true (standardinställningen) bevakar canvas-värden rotkatalogen via chokidar och injicerar en WebSocket-klient i HTML-filer. Att spara en fil uppdaterar omedelbart anslutna canvaser, vilket gör iterativ HTML-generering snabb.

HTTP-servern kan bindas till loopback, ett LAN-gränssnitt, ett Tailscale-gränssnitt eller välja automatiskt. Det korrekta värdnamnet vidarebefordras automatiskt till noder via bryggan, så att innehåll laddas korrekt oavsett nätverkstopologi.

Åtgärden eval låter agenter köra godtycklig JavaScript inuti den aktiva Canvas Skill WebView. Detta möjliggör dynamiska uppdateringar — att skicka ny data till ett diagram, utlösa animationer eller läsa DOM-tillstånd — utan att navigera till en ny sida.

Åtgärden snapshot tar en skärmdump av den aktuella canvasen på en angiven nod och returnerar den till agenten, vilket möjliggör visuell inspektion eller loggning av renderat innehåll.

En agent genererar en HTML-instrumentpanel som sammanfattar data (t.ex. försäljningsmätvärden, systemstatistik) och skriver den till ~/clawd/canvas/dashboard.html. Den anropar sedan canvas action:present riktad mot din Mac-nod, och instrumentpanelen visas omedelbart i Canvas Skill-vyn.

Släpp ett fristående HTML5-spel i canvas-roten och låt sedan agenten presentera det på en ansluten iPhone-nod. Agenten kan senare anropa hide eller byta till en annan demo utan några manuella steg på enheten.

Presentera en diagramsida en gång och använd sedan upprepade eval-åtgärder för att skicka nya datapunkter till det aktiva JavaScript-kontextet. Diagrammet uppdateras i realtid utan att sidan laddas om, vilket är användbart för övervakning eller realtidsutdata från agenter.

Under utveckling, håll canvasen öppen på en ansluten nod och redigera HTML-filer i canvasens rotkatalog. Varje sparning utlöser en automatisk omladdning, vilket ger omedelbar visuell återkoppling utan att manuellt behöva uppdatera eller köra om kommandon.