القائمة
Display HTML content on connected BuilderForceAgents nodes (Mac app, iOS, Android).
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | canvas |
| description | Display HTML content on connected BuilderForceAgents nodes (Mac app, iOS, Android). |
| author | builderForceAgents |
| author-url | https://builderforce.ai |
Display HTML content on connected BuilderForceAgents nodes (Mac app, iOS, Android).
The canvas tool lets you present web content on any connected node's canvas view. Great for:
┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐
│ Canvas Host │────▶│ Node Bridge │────▶│ Node App │
│ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │
│ Port 18793 │ │ Port 18790 │ │ Android) │
└─────────────────┘ └──────────────────┘ └─────────────┘
canvasHost.root directoryThe 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/__builderforce__/canvas/<file>.html
This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!
| 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 |
In ~/.builderforce/builderforce.json:
{
"canvasHost": {
"enabled": true,
"port": 18793,
"root": "/Users/you/builderforce/canvas",
"liveReload": true
},
"gateway": {
"bind": "auto"
}
}
When liveReload: true (default), the canvas host:
Great for development!
Place files in the canvas root directory (default ~/builderforce/canvas/):
cat > ~/builderforce/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
<h1>Hello Canvas!</h1>
</body>
</html>
HTML
Check how your gateway is bound:
cat ~/.builderforce/builderforce.json | jq '.gateway.bind'
Then construct the URL:
http://127.0.0.1:18793/__builderforce__/canvas/<file>.htmlhttp://<hostname>:18793/__builderforce__/canvas/<file>.htmlFind your Tailscale hostname:
tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'
builderforce nodes list
Look for Mac/iOS/Android nodes with canvas capability.
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/__builderforce__/canvas/snake.html
canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>
Cause: URL mismatch between server bind and node expectation.
Debug steps:
cat ~/.builderforce/builderforce.json | jq '.gateway.bind'lsof -i :18793curl http://<hostname>:18793/__builderforce__/canvas/<file>.htmlSolution: Use the full hostname matching your bind mode, not localhost.
Always specify node:<node-id> parameter.
Node is offline. Use builderforce nodes list to find online nodes.
If live reload isn't working:
liveReload: true in configThe canvas host serves from /__builderforce__/canvas/ prefix:
http://<host>:18793/__builderforce__/canvas/index.html → ~/builderforce/canvas/index.html
http://<host>:18793/__builderforce__/canvas/games/snake.html → ~/builderforce/canvas/games/snake.html
The /__builderforce__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.
hide it or navigate awayDelegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), or any work in ~/builderforce workspace (never spawn agents here). Requires a bash tool that supports pty:true.
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
OpenProse VM skill pack. Activate on any `prose` command, .prose files, or OpenProse mentions; orchestrates multi-agent workflows.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
Use the AgentHub CLI to search, install, update, and publish agent skills from agenthub.com. Use when you need to fetch new skills on the fly, sync installed skills to latest or a specific version, or publish new/updated skill folders with the npm-installed agenthub CLI.
Manage Apple Notes via the `memo` CLI on macOS (create, view, edit, delete, search, move, and export notes). Use when a user asks BuilderForceAgents to add a note, list notes, search notes, or manage note folders.