Canvas Skill

• Vous souhaitez qu'un agent IA envoie une page HTML générée (tableau de bord, jeu, visualisation) vers votre Mac, iPhone ou appareil Android en temps réel.
• Vous prototypez du contenu HTML interactif et avez besoin d'un rechargement en direct — enregistrez un fichier et le canvas connecté se met à jour automatiquement.
• Vous avez besoin que l'agent exécute du JavaScript à distance dans un WebView en cours d'exécution (par exemple, mettre à jour des données de graphique sans rechargement complet).
• Vous souhaitez capturer une capture d'écran du contenu canvas rendu depuis un workflow d'agent.

• Vous n'utilisez pas de nœuds OpenClaw — cette compétence est exclusivement destinée à l'écosystème OpenClaw Mac/iOS/Android.
• Vous avez besoin de servir du contenu publiquement ou à des pairs non-Tailscale ; le serveur est uniquement destiné à un accès local/LAN/Tailscale.
• Vous souhaitez intégrer un navigateur complet ou afficher des URL externes arbitraires — l'hôte canvas ne sert que des fichiers depuis un répertoire racine local configuré.

Cinq actions distinctes — present, hide, navigate, eval et snapshot — offrent aux agents un contrôle précis sur ce qui est affiché sur un nœud. Présentez une URL, échangez du contenu via navigate, exécutez du JavaScript sans rechargement, ou capturez une capture d'écran, le tout depuis une seule Canvas Skill.

Lorsque liveReload: true (valeur par défaut), l'hôte canvas surveille le répertoire racine via chokidar et injecte un client WebSocket dans les fichiers HTML. L'enregistrement de n'importe quel fichier actualise instantanément les canvas connectés, rendant la génération HTML itérative rapide.

Le serveur HTTP peut se lier à l'interface loopback, à une interface LAN, à une interface Tailscale, ou choisir automatiquement. Le nom d'hôte correct est automatiquement transmis aux nœuds via le pont, de sorte que le contenu se charge correctement quelle que soit la topologie réseau.

L'action eval permet aux agents d'exécuter du JavaScript arbitraire à l'intérieur du WebView canvas en direct. Cela permet des mises à jour dynamiques — envoyer de nouvelles données à un graphique, déclencher des animations ou lire l'état du DOM — sans naviguer vers une nouvelle page.

L'action snapshot capture une capture d'écran du canevas actuel sur un nœud spécifié et la retourne à l'agent, permettant l'inspection visuelle ou la journalisation du contenu rendu.

Un agent génère un tableau de bord HTML résumant des données (par exemple, des métriques de ventes, des statistiques système) et l'écrit dans ~/clawd/canvas/dashboard.html. Il appelle ensuite canvas action:present en ciblant le nœud de votre Mac, et le tableau de bord apparaît immédiatement dans la vue Canvas Skill.

Déposez un jeu HTML5 autonome dans la racine du Canvas Skill, puis demandez à l'agent de le présenter sur un nœud iPhone connecté. L'agent peut ensuite appeler hide ou passer à une autre démo sans aucune manipulation manuelle sur l'appareil.

Affichez une page de graphique une seule fois, puis utilisez des actions eval répétées pour injecter de nouveaux points de données dans le contexte JavaScript en cours d'exécution. Le graphique se met à jour en direct sans rechargement de la page, ce qui est utile pour la surveillance ou la sortie d'agent en temps réel.

Pendant le développement, gardez le canvas ouvert sur un nœud connecté et modifiez les fichiers HTML dans la racine du canvas. Chaque sauvegarde déclenche un rechargement automatique, offrant un retour visuel instantané sans avoir à actualiser manuellement ou à relancer des commandes.