canvas-os

🖥️ OpenClaw原生可视化应用平台

编辑精选

OpenClaw官方生态的Canvas应用平台,支持在本地构建、部署富交互可视化应用,实现Agent与UI的双向实时通信。

收藏
6k
安装
1.8k
版本
v1.0.1
CLS 安全性认证2026-05-01
点击查看完整报告 >

使用说明

核心用法

Canvas OS 是 OpenClaw 生态中的可视化应用平台,将 Canvas 面板转化为富交互 UI 窗口。用户通过三类命令与系统交互:"Open [app]" 启动本地服务器并导航 Canvas 加载应用;"Build me a [type]" 从模板创建新应用;"Update [element]" 通过 JS eval 实时注入数据修改界面。应用采用标准 HTML/CSS/JS 技术栈,存储于 ~/.openclaw/workspace/apps// 目录,通过 Python http.server 提供 localhost 服务,最终由 Agent 调用 openclaw nodes canvas navigate 在 Canvas 面板上渲染。

技术实现上,Canvas OS 提供三种加载策略:localhost 服务器适合复杂应用与外部资源;直接 HTML 注入适用于快速演示,通过 canvas.eval 执行 document.write()() 绕过文件路径安全限制;Data URL 则用于小型自包含内容。应用需暴露 window.app API 对象供 Agent 调用,同时支持通过 openclaw://agent 深度链接实现用户操作回调,形成完整的双向通信闭环。

显著优点

原生集成优势:深度绑定 OpenClaw 生态,与 Agent 系统无缝协作,命令语义自然("Show my dashboard"),降低学习成本。技术栈普适:基于标准 Web 技术,无需学习专有框架,前端开发者可立即上手。实时交互能力:JS eval 注入机制支持毫秒级界面更新,远优于传统轮询或页面刷新方案。模板化快速启动:内置 Dashboard、Tracker 等模板,配合自包含 HTML 设计(内联 CSS/JS),单文件即可运行。安全边界清晰:服务仅限 localhost,无公网暴露风险;文件操作限定用户目录,权限需求最小化。

潜在缺点与局限性

平台锁定严重:完全依赖 OpenClaw 专有生态,Canvas 面板、CLI 命令、、openclaw-canvas:// URL 方案均为平台特有,无法迁移至其他 Agent 系统。文件路径限制:Canvas 安全沙箱彻底阻断 file://// 访问,强制要求 localhost 或 HTML 注入,增加了架构复杂度。URL 方案缺陷:官方文档明确指出 openclaw-canvas:// 存在实现问题,需回退到 http://localhost 方案。注入安全风险canvas-inject.py 仅转义反引号,HTML 内容中的 $ 等模板字符串特殊字符可能引发意外行为。调试体验受限:Canvas 面板内嵌于 OpenClaw 应用,缺乏浏览器 DevTools 的完整调试能力,问题排查依赖日志与试错。

适合的目标群体

OpenClaw 深度用户:已构建 Agent 工作流,需要将文本交互升级为可视化界面的高级用户。快速原型开发者:需要为演示、监控场景快速搭建数据看板,而非构建生产级 Web 应用的技术人员。个人效率工具爱好者:希望将习惯追踪、计时器等工具集成到统一 Agent 界面的生产力用户。前端技术背景者:熟悉 HTML/CSS/JS,希望利用现有技能扩展 Agent 能力的开发者。

不适合:需要跨平台部署的企业用户、追求浏览器原生体验的 Web 开发者、对供应商锁定敏感的开源倡导者。

使用风险

性能风险:Python http.server 为单线程阻塞模型,高并发或大量静态资源请求时响应迟缓;每个应用占用独立端口,长期运行可能导致端口耗尽。依赖稳定性:核心功能依赖 OpenClaw CLI 的持续兼容性,平台升级可能破坏现有命令;canvas.eval 等内部 API 无公开稳定性承诺。数据持久化局限:应用状态依赖 data.json 文件,无内置同步或备份机制,设备故障易致数据丢失。进程管理粗糙kill -9 强制终止可能遗留僵尸进程或临时文件,建议配合 lsof 定期检查端口占用。安全细节待完善:缺乏输入验证(app-name 未过滤路径遍历字符)、HTML 转义不完整,在共享或多用户环境中需谨慎使用。

安全解读

核心用法

Canvas OS 将 OpenClaw 的 Canvas 面板转化为本地应用运行时环境,让用户在 AI 助手的协助下构建、存储和运行具有完整交互性的可视化应用。不同于传统的对话式交互,它支持富 HTML/CSS/JS 界面,包括动画效果、实时数据更新和双向通信。

核心工作流分为三步:
1. 构建:使用模板或自定义 HTML 创建应用,存放于 ~/.openclaw/workspace/apps/[app-name]/

2. 运行:通过本地 HTTP 服务器(python3 -m http.server)或直接 HTML 注入两种方式加载到 Canvas

3. 交互:Agent 通过 JavaScript 注入更新数据,应用通过 openclaw:// 深链回传指令

显著优点

| 优势 | 说明 |
|------|------|
| **零第三方依赖** | 仅需 Python 3 标准库和系统内置工具,供应链攻击面极小 |
| **灵活的双模式加载** | 复杂应用用 localhost 服务器,快速展示用直接 HTML 注入 |
| **实时双向通信** | `window.app.*` API 让 Agent 动态更新,`openclaw://agent` 深链让应用回调 |
| **自包含设计** | 推荐内联 CSS/JS,应用可移植性强 |
| **OpenClaw 原生集成** | 官方技能生态,与 Canvas 面板深度整合 |

潜在缺点与局限性

  • 安全沙箱限制file:/// 协议被完全阻断,必须通过 localhost 或注入方式加载
  • 端口管理负担:多应用需手动分配端口(9876+),存在冲突风险
  • 无持久化状态管理data.json 需应用自行读写,无内置数据库
  • 平台锁定:仅支持 macOS 版 OpenClaw,依赖特定节点能力
  • openclaw-canvas:// URL scheme 当前版本存在问题,需改用 http://localhost

适合人群

  • 需要将 AI 输出可视化的开发者(仪表盘、数据监控)
  • 追求本地优先、隐私敏感的用户(零云端依赖)
  • 习惯用 HTML/JS 快速原型的前端开发者
  • OpenClaw 深度用户,希望扩展 Canvas 面板功能

常规风险

| 风险类型 | 等级 | 说明 |
|----------|------|------|
| 进程强制终止 | 中 | 使用 `kill -9` 管理 HTTP 服务器,建议先尝试 `kill -15` |
| 输入验证不足 | 低 | 脚本参数缺乏格式校验,需自行确保 PORT 为数字、APP_NAME 无路径遍历 |
| HTML 注入 | 低 | `document.write()` 为核心功能,已实现反引号转义,建议增加内容大小限制 |
| 端口冲突 | 低 | 默认端口范围需手动管理,多应用并行时需注意 |

安全认证摘要

  • 来源可信度:T2(OpenClaw 官方 GitHub 组织 fraction12/clawdbot 维护)
  • 综合评分:75/100,A 级
  • 关键结论:功能与声明一致,无数据外泄或恶意代码,零第三方依赖降低供应链风险

canvas-os 内容

templates文件夹
dashboard文件夹
tracker文件夹
手动下载zip · 13.2 kB
index.htmltext/plain
请选择文件