Canvas Skill

• Quieres que un agente de IA envíe una página HTML generada (panel de control, juego, visualización) a tu Mac, iPhone o dispositivo Android en tiempo real.
• Estás creando prototipos de contenido HTML interactivo y necesitas recarga en vivo — guarda un archivo y el canvas conectado se actualiza automáticamente.
• Necesitas que el agente ejecute JavaScript de forma remota dentro de un WebView en ejecución (por ejemplo, actualizando datos de un gráfico sin una recarga completa).
• Quieres capturar una captura de pantalla del contenido del canvas renderizado desde dentro de un flujo de trabajo de agente.

• No estás utilizando nodos OpenClaw — esta habilidad es exclusivamente para el ecosistema OpenClaw Mac/iOS/Android.
• Necesitas servir contenido públicamente o a peers que no sean de Tailscale; el servidor está destinado únicamente para acceso local/LAN/Tailscale.
• Quieres incrustar un navegador completo o mostrar URLs externas arbitrarias — el host del canvas solo sirve archivos desde un directorio raíz local configurado.

Cinco acciones independientes — present, hide, navigate, eval y snapshot — otorgan a los agentes un control preciso sobre lo que se muestra en un nodo. Presenta una URL, intercambia contenido mediante navigate, ejecuta JavaScript sin recargar la página o captura una captura de pantalla, todo desde una única Canvas Skill.

Cuando liveReload: true (el valor predeterminado), el host del canvas observa el directorio raíz mediante chokidar e inyecta un cliente WebSocket en los archivos HTML. Guardar cualquier archivo actualiza instantáneamente los canvases conectados, haciendo que la generación iterativa de HTML sea más rápida.

El servidor HTTP puede enlazarse a loopback, una interfaz LAN, una interfaz Tailscale, o elegir automáticamente. El nombre de host correcto se reenvía automáticamente a los nodos a través del puente, por lo que el contenido se carga correctamente independientemente de la topología de red.

La acción eval permite a los agentes ejecutar JavaScript arbitrario dentro del WebView activo del Canvas Skill. Esto posibilita actualizaciones dinámicas — enviar nuevos datos a un gráfico, activar animaciones o leer el estado del DOM — sin necesidad de navegar a una nueva página.

La acción snapshot captura una captura de pantalla del lienzo actual en un nodo especificado y la devuelve al agente, lo que permite la inspección visual o el registro del contenido renderizado.

Un agente genera un panel HTML que resume datos (por ejemplo, métricas de ventas, estadísticas del sistema) y lo escribe en ~/clawd/canvas/dashboard.html. Luego llama a canvas action:present apuntando al nodo de tu Mac, y el panel aparece de inmediato en la vista de Canvas Skill.

Coloca un juego HTML5 autónomo en la raíz del canvas y luego haz que el agente lo presente en un nodo de iPhone conectado. El agente puede posteriormente llamar a hide o cambiar a una demo diferente sin ningún paso manual en el dispositivo.

Presenta una página con gráfico una vez y luego utiliza acciones eval repetidas para introducir nuevos puntos de datos en el contexto JavaScript en ejecución. El gráfico se actualiza en tiempo real sin recargar la página, lo que resulta útil para monitorización o salida de agentes en tiempo real.

Durante el desarrollo, mantén el canvas abierto en un nodo conectado y edita los archivos HTML en la raíz del canvas. Cada vez que guardes, se activará una recarga automática, proporcionando retroalimentación visual instantánea sin necesidad de actualizar manualmente ni volver a ejecutar comandos.