MCP HubMCP Hub
返回技能列表

clawdis-canvas

steipete
更新于 Today
54 次查看
468
45
468
在 GitHub 上查看
设计design

关于

This skill enables developers to programmatically control the Clawdis Canvas panel via CLI for presenting HTML/JS interfaces and A2UI surfaces. Key capabilities include rendering content, evaluating JavaScript, capturing snapshots, and managing gateway-hosted A2UI applications with action bridging. Use it to automate UI testing, visualization, and interaction workflows within the Clawdis environment.

快速安装

Claude Code

推荐
插件命令推荐
/plugin add https://github.com/steipete/clawdis
Git 克隆备选方式
git clone https://github.com/steipete/clawdis.git ~/.claude/skills/clawdis-canvas

在 Claude Code 中复制并粘贴此命令以安装该技能

技能文档

Clawdis Canvas

Use Canvas to render HTML/JS or A2UI surfaces and capture snapshots.

Core commands

  • Present: clawdis canvas present [--node <id>] [--target <path>]
  • Hide: clawdis canvas hide
  • Eval JS: clawdis canvas eval --js "..."
  • Snapshot: clawdis canvas snapshot

A2UI

  • Push JSONL: clawdis canvas a2ui push --jsonl /path/to/file.jsonl
  • Reset: clawdis canvas a2ui reset

Notes

  • Keep HTML under ~/clawd/canvas when targeting remote nodes.
  • Use snapshot after renders to verify UI state.
  • Treat A2UI as gateway-hosted at http(s)://<gateway-host>:18789/__clawdis__/a2ui/.
  • Rely on canvas a2ui push/reset to auto-navigate the Canvas to the gateway-hosted A2UI page.
  • Expect A2UI to fail if the Gateway does not advertise canvasHostUrl or is unreachable:
    • A2UI_HOST_NOT_CONFIGURED
    • A2UI_HOST_UNAVAILABLE

A2UI quick flow

  1. Ensure the Gateway is running and reachable from the node.
  2. Build JSONL with v0.8 server→client messages (beginRendering, surfaceUpdate, dataModelUpdate, deleteSurface).
    • Do not use v0.9 createSurface (unsupported).
  3. Push JSONL and (optionally) snapshot the result.

Example JSONL (v0.8)

cat > /tmp/a2ui-v0.8.jsonl <<'EOF'
{"surfaceUpdate":{"surfaceId":"main","components":[{"id":"root","component":{"Column":{"children":{"explicitList":["title","content"]}}}},{"id":"title","component":{"Text":{"text":{"literalString":"A2UI (v0.8)"},"usageHint":"h1"}}},{"id":"content","component":{"Text":{"text":{"literalString":"If you can read this, A2UI is live."},"usageHint":"body"}}}]}}
{"beginRendering":{"surfaceId":"main","root":"root"}}
EOF

clawdis canvas a2ui push --jsonl /tmp/a2ui-v0.8.jsonl --node <id>

Action callbacks (A2UI → agent)

  • A2UI user actions (buttons, etc.) are bridged from the WebView back to the node via clawdisCanvasA2UIAction.
  • Handle them on the agent side as CANVAS_A2UI messages (node → gateway → agent).

GitHub 仓库

steipete/clawdis
路径: skills/clawdis-canvas
relaywhatsapp

相关推荐技能

content-collections

Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。

查看技能

creating-opencode-plugins

该Skill为开发者创建OpenCode插件提供指导,涵盖命令、文件、LSP等25+种事件类型。它详细说明了插件结构、事件API规范及JavaScript/TypeScript实现模式,帮助开发者构建事件驱动的模块。适用于需要拦截操作、扩展功能或自定义AI助手行为的插件开发场景。

查看技能

langchain

LangChain是一个用于构建LLM应用程序的框架,支持智能体、链和RAG应用开发。它提供多模型提供商支持、500+工具集成、记忆管理和向量检索等核心功能。开发者可用它快速构建聊天机器人、问答系统和自主代理,适用于从原型验证到生产部署的全流程。

查看技能

Algorithmic Art Generation

这个Claude Skill帮助开发者使用p5.js创建算法艺术,特别适用于生成式艺术和交互式可视化项目。它支持种子随机性、流场和粒子系统等关键技术,确保艺术作品的重复性和独特性。当讨论生成艺术、算法艺术或计算美学时,该技能会自动激活,指导开发者完成从概念设计到技术实现的全过程。

查看技能