Canvas Skill

• Você quer que um agente de IA envie uma página HTML gerada (dashboard, jogo, visualização) para seu Mac, iPhone ou dispositivo Android em tempo real.
• Você está prototipando conteúdo HTML interativo e precisa de live-reload — salve um arquivo e o canvas conectado é atualizado automaticamente.
• Você precisa que o agente execute JavaScript remotamente dentro de um WebView em execução (por exemplo, atualizando dados de um gráfico sem recarregar a página completamente).
• Você quer capturar um screenshot do conteúdo de canvas renderizado dentro de um fluxo de trabalho de agente.

• Você não está usando nós OpenClaw — esta skill é exclusivamente para o ecossistema OpenClaw Mac/iOS/Android.
• Você precisa servir conteúdo publicamente ou para peers não-Tailscale; o servidor é destinado apenas para acesso local/LAN/Tailscale.
• Você quer incorporar um navegador completo ou exibir URLs externas arbitrárias — o host do canvas serve apenas arquivos de um diretório raiz local configurado.

Cinco ações distintas — present, hide, navigate, eval e snapshot — oferecem aos agentes controle preciso sobre o que é exibido em um nó. Apresente uma URL, troque o conteúdo via navegação, execute JavaScript sem recarregar a página ou capture uma captura de tela, tudo a partir de um único Canvas Skill.

Quando liveReload: true (o padrão), o host do canvas monitora o diretório raiz via chokidar e injeta um cliente WebSocket nos arquivos HTML. Salvar qualquer arquivo atualiza instantaneamente os canvases conectados, tornando a geração iterativa de HTML mais ágil.

O servidor HTTP pode se vincular ao loopback, a uma interface LAN, a uma interface Tailscale ou escolher automaticamente. O hostname correto é encaminhado automaticamente aos nós por meio da bridge, para que o conteúdo carregue corretamente independentemente da topologia de rede.

A ação eval permite que agentes executem JavaScript arbitrário dentro do WebView ativo do canvas. Isso possibilita atualizações dinâmicas — enviar novos dados para um gráfico, acionar animações ou ler o estado do DOM — sem navegar para uma nova página.

A ação snapshot captura um screenshot do canvas atual em um nó especificado e o retorna ao agente, permitindo a inspeção visual ou o registro do conteúdo renderizado.

Um agente gera um painel HTML resumindo dados (ex.: métricas de vendas, estatísticas do sistema) e o grava em ~/clawd/canvas/dashboard.html. Em seguida, ele chama canvas action:present direcionando ao nó do seu Mac, e o painel aparece imediatamente na visualização do Canvas Skill.

Insira um jogo HTML5 independente na raiz do canvas e, em seguida, peça ao agente para apresentá-lo em um nó de iPhone conectado. O agente pode posteriormente chamar hide ou alternar para uma demonstração diferente sem nenhuma etapa manual no dispositivo.

Apresente uma página de gráfico uma vez e, em seguida, use ações eval repetidas para enviar novos pontos de dados ao contexto JavaScript em execução. O gráfico é atualizado ao vivo sem recarregar a página, sendo útil para monitoramento ou saída de agentes em tempo real.

Durante o desenvolvimento, mantenha o canvas aberto em um nó conectado e edite os arquivos HTML na raiz do canvas. Cada salvamento aciona um recarregamento automático, fornecendo feedback visual instantâneo sem a necessidade de atualizar manualmente ou executar comandos novamente.