‹ 首页

canvas

@bitterbot-ai · 收录于 今天 · 上游提交 今天

Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server. Use when presenting games, visualizations, dashboards, or interactive demos on a connected device, navigating canvas URLs, capturing canvas snapshots, or debugging canvas connectivity.

场景设备演示可视化展示调试连接

适合你，如果需要在多设备上展示或调试HTML页面

/ 下载安装
https://github.com/bitterbot-ai/bitterbot-desktop/tree/main/skills/canvas ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add bitterbot-ai/bitterbot-desktop/canvas
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitterbot-ai/bitterbot-desktop/canvas
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify bitterbot-ai/bitterbot-desktop/canvas
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
2425GitHub stars
~1.2K上下文体积 · 单文件
索引托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 867a130

Canvas

Display HTML content on connected Bitterbot nodes (Mac app, iOS, Android).

Overview

The canvas tool lets you present web content on any connected node's canvas view. Great for:

  • Displaying games, visualizations, dashboards
  • Showing generated HTML content
  • Interactive demos
How It Works
Architecture
┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘
  1. Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory
  2. Node Bridge: Communicates canvas URLs to connected nodes
  3. Node Apps: Render the content in a WebView
Tailscale Integration

The canvas host server binds based on gateway.bind setting:

| Bind Mode | Server Binds To | Canvas URL Uses | | ---------- | ------------------- | -------------------------- | | loopback | 127.0.0.1 | localhost (local only) | | lan | LAN interface | LAN IP address | | tailnet | Tailscale interface | Tailscale hostname | | auto | Best available | Tailscale > LAN > loopback |

Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:

http://<tailscale-hostname>:18793/__bitterbot__/canvas/<file>.html

This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!

Actions

| Action | Description | | ---------- | ------------------------------------ | | present | Show canvas with optional target URL | | hide | Hide the canvas | | navigate | Navigate to a new URL | | eval | Execute JavaScript in the canvas | | snapshot | Capture screenshot of canvas |

Configuration

In ~/.bitterbot/bitterbot.json:

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/bitterbot/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}
Live Reload

When liveReload: true (default), the canvas host:

  • Watches the root directory for changes (via chokidar)
  • Injects a WebSocket client into HTML files
  • Automatically reloads connected canvases when files change

Great for development!

Workflow
1. Create HTML content

Place files in the canvas root directory (default ~/bitterbot/canvas/):

cat > ~/bitterbot/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
  <h1>Hello Canvas!</h1>
</body>
</html>
HTML
2. Find your canvas host URL

Check how your gateway is bound:

cat ~/.bitterbot/bitterbot.json | jq '.gateway.bind'

Then construct the URL:

  • loopback: http://127.0.0.1:18793/__bitterbot__/canvas/<file>.html
  • lan/tailnet/auto: http://<hostname>:18793/__bitterbot__/canvas/<file>.html

Find your Tailscale hostname:

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'
3. Find connected nodes
bitterbot nodes list

Look for Mac/iOS/Android nodes with canvas capability.

4. Present content
canvas action:present node:<node-id> target:<full-url>

Example:

canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__bitterbot__/canvas/snake.html
5. Navigate, snapshot, or hide
canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>
Debugging
White screen / content not loading

Cause: URL mismatch between server bind and node expectation.

Debug steps:

  1. Check server bind: cat ~/.bitterbot/bitterbot.json | jq '.gateway.bind'
  2. Check what port canvas is on: lsof -i :18793
  3. Test URL directly: curl http://<hostname>:18793/__bitterbot__/canvas/<file>.html

Solution: Use the full hostname matching your bind mode, not localhost.

"node required" error

Always specify node:<node-id> parameter.

"node not connected" error

Node is offline. Use bitterbot nodes list to find online nodes.

Content not updating

If live reload isn't working:

  1. Check liveReload: true in config
  2. Ensure file is in the canvas root directory
  3. Check for watcher errors in logs
URL Path Structure

The canvas host serves from /__bitterbot__/canvas/ prefix:

http://<host>:18793/__bitterbot__/canvas/index.html  → ~/bitterbot/canvas/index.html
http://<host>:18793/__bitterbot__/canvas/games/snake.html → ~/bitterbot/canvas/games/snake.html

The /__bitterbot__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.

Tips
  • Keep HTML self-contained (inline CSS/JS) for best results
  • Use the default index.html as a test page (has bridge diagnostics)
  • The canvas persists until you hide it or navigate away
  • Live reload makes development fast - just save and it updates!
  • A2UI JSON push is WIP - use HTML files for now
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…