SuperAPI AI 工具集

canvas

前端与建站

查看项目

更新于 10-16 00:04

技能介绍

用途:Canvas 技能把本地目录中的静态 HTML/CSS/JS 内容呈现到已连接 Moltbot 节点的画布(WebView)上,可用于展示游戏、可视化、仪表盘、生成的 HTML 页面和交互式演示。

架构与绑定:Canvas Host 为 HTTP 服务器(端口 18793),从 canvasHost.root 目录提供静态文件;Node Bridge(TCP 端口 18790)把画布 URL 下发给节点应用渲染。画布 URL 依据 gateway.bind 选择绑定方式:loopback 用 127.0.0.1/localhost,lan 用局域网 IP,tailnet 用 Tailscale 主机名,auto 按 Tailscale > LAN > loopback 选择。绑定 Tailscale 时节点收到形如 http://<tailscale-hostname>:18793/moltbot/canvas/<file>.html 的地址。URL 路径前缀为 /moltbot/canvas/。

主要操作:present(显示画布,可带 target URL)、hide(隐藏)、navigate(跳转新 URL)、eval(执行 JavaScript)、snapshot(截图)。

用法:在 ~/.clawdbot/moltbot.json 配置 canvasHost(enabled、port 18793、root、liveReload)与 gateway.bind。把 HTML 文件放入画布根目录(默认 ~/clawd/canvas/),用 moltbot nodes list 查找具备画布能力的节点,然后执行 canvas action:present node:<node-id> target:<full-url>,并可继续用 navigate、snapshot、hide。liveReload 开启时(默认)会监听根目录变化、注入 WebSocket 客户端并在文件变更时自动重载。

限制与排错:白屏多因 URL 与绑定方式不匹配,应使用与绑定模式一致的完整主机名而非 localhost;未指定 node:<node-id> 会报 “node required”;节点离线会报 “node not connected”;内容不更新需检查 liveReload 与文件位置。建议 HTML 自包含(内联 CSS/JS),画布会保持到你隐藏或跳转。A2UI JSON 推送尚在开发中,当前请使用 HTML 文件。