Näytä ja hallitse HTML-sisältöä yhdistetyissä OpenClaw-solmuissa (Mac, iOS, Android) live-päivityksellä ja JS-suorituksella.
npx clawhub@latest install canvasCanvas Skill antaa tekoälyagentillesi mahdollisuuden esittää, navigoida ja olla vuorovaikutuksessa HTML-sisällön kanssa, joka renderöidään millä tahansa yhdistetyllä OpenClaw-solmulla — Mac-sovelluksessa, iOS:ssä tai Androidissa. Se yhdistää HTTP-tiedostopalvelimen TCP-solmusiltaan siten, että luodut kojelaudat, pelit, visualisoinnit tai interaktiiviset demot näkyvät välittömästi laitteesi WebView-näkymässä. Toimintoihin kuuluu URL-osoitteiden esittäminen, kankaan piilottaminen, uusille sivuille navigointi, JavaScriptin suorittaminen ja kuvakaappausten ottaminen.
npx clawhub@latest install canvasNapsauta Asenna-painiketta sivun yläosassa yhdellä napsauksella tapahtuvaa asennusta varten
Viisi erillistä toimintoa — present, hide, navigate, eval ja snapshot — antavat agenteille tarkan hallinnan siitä, mitä solmussa näytetään. Esitä URL-osoite, vaihda sisältöä navigoimalla, suorita JavaScript ilman sivun uudelleenlatausta tai ota kuvakaappaus — kaikki yhdestä Canvas Skill -taidosta.
Kun liveReload: true (oletusarvo) on käytössä, canvas-isäntä tarkkailee juurihakemistoa chokidarin avulla ja lisää WebSocket-asiakkaan HTML-tiedostoihin. Minkä tahansa tiedoston tallentaminen päivittää välittömästi yhdistetyt canvakset, mikä tekee iteratiivisesta HTML-generoinnista nopeaa.
HTTP-palvelin voi sitoutua loopback-osoitteeseen, LAN-rajapintaan, Tailscale-rajapintaan tai valita automaattisesti. Oikea isäntänimi välitetään automaattisesti solmuille sillan kautta, joten sisältö latautuu oikein verkkotopologiasta riippumatta.
eval-toiminto antaa agenteille mahdollisuuden suorittaa mielivaltaista JavaScriptiä live-kankaan WebView'ssa. Tämä mahdollistaa dynaamiset päivitykset — uuden datan lähettämisen kaaviolle, animaatioiden käynnistämisen tai DOM-tilan lukemisen — ilman siirtymistä uudelle sivulle.
snapshot-toiminto ottaa kuvakaappauksen nykyisestä kanvaasista määritetyssä solmussa ja palauttaa sen agentille, mahdollistaen renderöidyn sisällön visuaalisen tarkastelun tai kirjaamisen.
Agentti luo HTML-koontinäytön, joka tiivistää tiedot (esim. myyntimittarit, järjestelmätilastot) ja kirjoittaa sen tiedostoon ~/clawd/canvas/dashboard.html. Sen jälkeen se kutsuu komentoa canvas action:present kohdistettuna Mac-solmuusi, ja koontinäyttö ilmestyy välittömästi canvas-näkymään.
Pudota itsenäinen HTML5-peli canvas-juureen, minkä jälkeen agentti esittää sen yhdistetyssä iPhone-solmussa. Agentti voi myöhemmin kutsua hide-komentoa tai vaihtaa toiseen demoon ilman manuaalisia toimenpiteitä laitteella.
Esitä kaaviosivu kerran, ja käytä sen jälkeen toistuvia eval-toimintoja uusien datapisteiden työntämiseen käynnissä olevaan JavaScript-kontekstiin. Kaavio päivittyy reaaliajassa ilman sivun uudelleenlatausta, mikä on hyödyllistä seurantaan tai agentin reaaliaikaiseen tulostukseen.
Kehityksen aikana pidä canvas auki yhdistetylle solmulle ja muokkaa HTML-tiedostoja canvas-juurihakemistossa. Jokainen tallennus käynnistää automaattisen uudelleenlatauksen, mikä tarjoaa välittömän visuaalisen palautteen ilman manuaalista päivittämistä tai komentojen uudelleenajamista.
openclaw nodes list varmistaaksesi käytettävissä olevat solmut.canvasHost.enabled: true täytyy olla asetettuna tiedostossa ~/.openclaw/openclaw.json, ja root-hakemiston täytyy olla kelvollinen ja sisältää HTML-tiedostosi.gateway.bind-arvoksi on asetettu tailnet tai auto, Tailscale-daemonin täytyy olla käynnissä ja isäntänimen täytyy olla tavoitettavissa yhditetyistä solmuista.npx clawhub@latest install canvasKirjaudu sisään kirjoittaaksesi arvostelun
Ei arvosteluja vielä. Ole ensimmäinen jakamaan kokemuksesi!