Visualizza e controlla contenuti HTML su nodi OpenClaw connessi (Mac, iOS, Android) con ricaricamento in tempo reale ed esecuzione JS.
npx clawhub@latest install canvasLa Canvas Skill permette al tuo agente AI di presentare, navigare e interagire con contenuti HTML renderizzati su qualsiasi nodo OpenClaw connesso — app Mac, iOS o Android. Collega un server di file HTTP con un bridge TCP per nodi, in modo che dashboard, giochi, visualizzazioni o demo interattive generati appaiano istantaneamente in una WebView sul tuo dispositivo. Le azioni includono la presentazione di URL, il nascondere il canvas, la navigazione verso nuove pagine, l'esecuzione di JavaScript e l'acquisizione di screenshot.
npx clawhub@latest install canvasFai clic sul pulsante Installa in cima a questa pagina per la configurazione con un clic
Cinque azioni distinte — present, hide, navigate, eval e snapshot — offrono agli agenti un controllo granulare su ciò che viene visualizzato su un nodo. Presenta un URL, scambia i contenuti tramite navigate, esegui JavaScript senza ricaricare la pagina, o acquisisci uno screenshot, tutto da un unico Canvas Skill.
Quando liveReload: true (impostazione predefinita), il canvas host monitora la directory radice tramite chokidar e inietta un client WebSocket nei file HTML. Il salvataggio di qualsiasi file aggiorna istantaneamente i canvas connessi, rendendo veloce la generazione iterativa di HTML.
Il server HTTP può collegarsi al loopback, a un'interfaccia LAN, a un'interfaccia Tailscale, oppure scegliere automaticamente. Il nome host corretto viene inoltrato automaticamente ai nodi tramite il bridge, in modo che i contenuti si carichino correttamente indipendentemente dalla topologia di rete.
L'azione eval consente agli agenti di eseguire JavaScript arbitrario all'interno del WebView canvas attivo. Ciò permette aggiornamenti dinamici — inviare nuovi dati a un grafico, avviare animazioni o leggere lo stato del DOM — senza navigare verso una nuova pagina.
L'azione snapshot acquisisce uno screenshot del canvas corrente su un nodo specificato e lo restituisce all'agente, consentendo l'ispezione visiva o la registrazione del contenuto renderizzato.
Un agente genera una dashboard HTML che riassume dati (ad esempio metriche di vendita, statistiche di sistema) e la scrive in ~/clawd/canvas/dashboard.html. Successivamente chiama canvas action:present puntando al nodo del tuo Mac, e la dashboard appare immediatamente nella visualizzazione Canvas Skill.
Inserisci un gioco HTML5 autonomo nella radice del canvas, quindi fai in modo che l'agente lo presenti su un nodo iPhone collegato. L'agente può successivamente chiamare hide o passare a una demo diversa senza alcun passaggio manuale sul dispositivo.
Presenta una pagina con un grafico una volta sola, poi utilizza azioni eval ripetute per inserire nuovi punti dati nel contesto JavaScript in esecuzione. Il grafico si aggiorna in tempo reale senza ricaricare la pagina, utile per il monitoraggio o l'output di agenti in tempo reale.
Durante lo sviluppo, tieni il canvas aperto su un nodo connesso e modifica i file HTML nella root del canvas. Ogni salvataggio attiva un ricaricamento automatico, fornendo un feedback visivo immediato senza dover aggiornare manualmente o rieseguire i comandi.
openclaw nodes list per verificare i nodi disponibili.canvasHost.enabled: true deve essere impostato in ~/.openclaw/openclaw.json, con una directory root valida contenente i tuoi file HTML.gateway.bind è impostato su tailnet o auto, il daemon Tailscale deve essere in esecuzione e l'hostname deve essere raggiungibile dai nodi connessi.npx clawhub@latest install canvasAccedi per scrivere una recensione
Nessuna recensione ancora. Sii il primo a condividere la tua esperienza!