Canvas Skill

• AI 에이전트가 생성된 HTML 페이지(대시보드, 게임, 시각화)를 Mac, iPhone 또는 Android 기기에 실시간으로 푸시하기를 원합니다.
• 인터랙티브 HTML 콘텐츠를 프로토타이핑하면서 라이브 리로드가 필요한 경우 — 파일을 저장하면 연결된 캔버스가 자동으로 업데이트됩니다.
• 에이전트가 실행 중인 WebView 내에서 JavaScript를 원격으로 실행해야 하는 경우(예: 전체 리로드 없이 차트 데이터 업데이트).
• 에이전트 워크플로우 내에서 렌더링된 캔버스 콘텐츠의 스크린샷을 캡처하려는 경우.

• OpenClaw 노드를 사용하지 않는 경우 — 이 스킬은 OpenClaw Mac/iOS/Android 생태계 전용입니다.
• 콘텐츠를 공개적으로 또는 Tailscale 외부 피어에 제공해야 하는 경우; 이 서버는 로컬/LAN/Tailscale 접근 전용입니다.
• 전체 브라우저를 임베드하거나 임의의 외부 URL을 표시하려는 경우 — 캔버스 호스트는 구성된 로컬 루트 디렉토리의 파일만 제공합니다.

다섯 가지 개별 액션인 present, hide, navigate, eval, snapshot은 에이전트가 노드에 표시되는 내용을 세밀하게 제어할 수 있도록 합니다. URL을 표시하거나, navigate를 통해 콘텐츠를 교체하거나, 페이지 새로고침 없이 JavaScript를 실행하거나, 스크린샷을 캡처하는 작업을 모두 단일 Canvas Skill에서 수행할 수 있습니다.

liveReload: true(기본값)로 설정하면, 캔버스 호스트가 chokidar를 통해 루트 디렉토리를 감시하고 HTML 파일에 WebSocket 클라이언트를 주입합니다. 파일을 저장하면 연결된 캔버스가 즉시 새로고침되어, 반복적인 HTML 생성 작업을 빠르게 진행할 수 있습니다.

HTTP 서버는 루프백, LAN 인터페이스, Tailscale 인터페이스에 바인딩하거나 자동으로 선택할 수 있습니다. 올바른 호스트명은 브리지를 통해 노드에 자동으로 전달되므로, 네트워크 토폴로지에 관계없이 콘텐츠가 올바르게 로드됩니다.

eval 액션을 사용하면 에이전트가 라이브 Canvas Skill WebView 내에서 임의의 JavaScript를 실행할 수 있습니다. 이를 통해 새 페이지로 이동하지 않고도 차트에 새 데이터를 푸시하거나, 애니메이션을 트리거하거나, DOM 상태를 읽는 등의 동적 업데이트가 가능합니다.

snapshot 액션은 지정된 노드의 현재 캔버스 스크린샷을 캡처하여 에이전트에 반환하며, 렌더링된 콘텐츠의 시각적 검사 또는 로깅을 가능하게 합니다.

에이전트가 데이터(예: 판매 지표, 시스템 통계)를 요약한 HTML 대시보드를 생성하고 이를 ~/clawd/canvas/dashboard.html에 저장합니다. 그런 다음 Mac 노드를 대상으로 canvas action:present를 호출하면, 대시보드가 Canvas Skill 화면에 즉시 표시됩니다.

독립형 HTML5 게임을 캔버스 루트에 추가한 다음, 에이전트가 연결된 iPhone 노드에서 이를 표시하도록 합니다. 에이전트는 이후 기기에서 별도의 수동 작업 없이 hide를 호출하거나 다른 데모로 전환할 수 있습니다.

차트 페이지를 한 번 표시한 후, 반복적인 eval 액션을 사용하여 실행 중인 JavaScript 컨텍스트에 새로운 데이터 포인트를 추가합니다. 차트는 페이지를 새로 고침하지 않고도 실시간으로 업데이트되며, 모니터링이나 실시간 에이전트 출력에 유용합니다.

개발 중에는 연결된 노드에서 캔버스를 열어 두고 캔버스 루트의 HTML 파일을 편집하세요. 저장할 때마다 자동으로 리로드가 트리거되어, 수동으로 새로 고침하거나 명령어를 다시 실행하지 않아도 즉각적인 시각적 피드백을 얻을 수 있습니다.