my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	{
#2	"skillId": "canvas",
#3	"name": "canvas",
#4	"description": "",
#5	"category": "pump-protocol",
#6	"path": "canvas/SKILL.md",
#7	"url": "https://x402.wtf/api/skills/canvas",
#8	"tags": [
#9	"canvas",
#10	"solana"
#11	],
#12	"requiredEnv": [],
#13	"homepage": null,
#14	"attestation": {
#15	"status": "pending",
#16	"isFormallyVerified": false,
#17	"attestationPda": null,
#18	"verificationTimestamp": null
#19	},
#20	"markdown": "# Canvas Skill\n\nDisplay HTML content on connected SolanaOS nodes (Mac app, iOS, Android).\n\n## Overview\n\nThe canvas tool lets you present web content on any connected node's canvas view. Great for:\n\n- Displaying games, visualizations, dashboards\n- Showing generated HTML content\n- Interactive demos\n\n## How It Works\n\n### Architecture\n\n```\n┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐\n│ Canvas Host │────▶│ Node Bridge │────▶│ Node App │\n│ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │\n│ Port 18793 │ │ Port 18790 │ │ Android) │\n└─────────────────┘ └──────────────────┘ └─────────────┘\n```\n\n1. Canvas Host Server: Serves static HTML/CSS/JS files from `canvasHost.root` directory\n2. Node Bridge: Communicates canvas URLs to connected nodes\n3. Node Apps: Render the content in a WebView\n\n### Tailscale Integration\n\nThe canvas host server binds based on `gateway.bind` setting:\n\n\| Bind Mode \| Server Binds To \| Canvas URL Uses \|\n\| ---------- \| ------------------- \| -------------------------- \|\n\| `loopback` \| 127.0.0.1 \| localhost (local only) \|\n\| `lan` \| LAN interface \| LAN IP address \|\n\| `tailnet` \| Tailscale interface \| Tailscale hostname \|\n\| `auto` \| Best available \| Tailscale > LAN > loopback \|\n\nKey insight: The `canvasHostHostForBridge` is derived from `bridgeHost`. When bound to Tailscale, nodes receive URLs like:\n\n```\nhttp://<tailscale-hostname>:18793/__solanaos__/canvas/<file>.html\n```\n\nThis is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!\n\n## Actions\n\n\| Action \| Description \|\n\| ---------- \| ------------------------------------ \|\n\| `present` \| Show canvas with optional target URL \|\n\| `hide` \| Hide the canvas \|\n\| `navigate` \| Navigate to a new URL \|\n\| `eval` \| Execute JavaScript in the canvas \|\n\| `snapshot` \| Capture screenshot of canvas \|\n\n## Configuration\n\nIn `~/.solanaos/solanaos.json`:\n\n```json\n{\n \"canvasHost\": {\n \"enabled\": true,\n \"port\": 18793,\n \"root\": \"/Users/you/clawd/canvas\",\n \"liveReload\": true\n },\n \"gateway\": {\n \"bind\": \"auto\"\n }\n}\n```\n\n### Live Reload\n\nWhen `liveReload: true` (default), the canvas host:\n\n- Watches the root directory for changes (via chokidar)\n- Injects a WebSocket client into HTML files\n- Automatically reloads connected canvases when files change\n\nGreat for development!\n\n## Workflow\n\n### 1. Create HTML content\n\nPlace files in the canvas root directory (default `~/clawd/canvas/`):\n\n```bash\ncat > ~/clawd/canvas/my-game.html << 'HTML'\n<!DOCTYPE html>\n<html>\n<head><title>My Game</title></head>\n<body>\n <h1>Hello Canvas!</h1>\n</body>\n</html>\nHTML\n```\n\n### 2. Find your canvas host URL\n\nCheck how your gateway is bound:\n\n```bash\ncat ~/.solanaos/solanaos.json \| jq '.gateway.bind'\n```\n\nThen construct the URL:\n\n- loopback: `http://127.0.0.1:18793/__solanaos__/canvas/<file>.html`\n- lan/tailnet/auto: `http://<hostname>:18793/__solanaos__/canvas/<file>.html`\n\nFind your Tailscale hostname:\n\n```bash\ntailscale status --json \| jq -r '.Self.DNSName' \| sed 's/\\.$//'\n```\n\n### 3. Find connected nodes\n\n```bash\nsolanaos nodes list\n```\n\nLook for Mac/iOS/Android nodes with canvas capability.\n\n### 4. Present content\n\n```\ncanvas action:present node:<node-id> target:<full-url>\n```\n\nExample:\n\n```\ncanvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__solanaos__/canvas/snake.html\n```\n\n### 5. Navigate, snapshot, or hide\n\n```\ncanvas action:navigate node:<node-id> url:<new-url>\ncanvas action:snapshot node:<node-id>\ncanvas action:hide node:<node-id>\n```\n\n## Debugging\n\n### White screen / content not loading\n\nCause: URL mismatch between server bind and node expectation.\n\nDebug steps:\n\n1. Check server bind: `cat ~/.solanaos/solanaos.json \| jq '.gateway.bind'`\n2. Check what port canvas is on: `lsof -i :18793`\n3. Test URL directly: `curl http://<hostname>:18793/__solanaos__/canvas/<file>.html`\n\nSolution: Use the full hostname matching your bind mode, not localhost.\n\n### \"node required\" error\n\nAlways specify `node:<node-id>` parameter.\n\n### \"node not connected\" error\n\nNode is offline. Use `solanaos nodes list` to find online nodes.\n\n### Content not updating\n\nIf live reload isn't working:\n\n1. Check `liveReload: true` in config\n2. Ensure file is in the canvas root directory\n3. Check for watcher errors in logs\n\n## URL Path Structure\n\nThe canvas host serves from `/__solanaos__/canvas/` prefix:\n\n```\nhttp://<host>:18793/__solanaos__/canvas/index.html → ~/clawd/canvas/index.html\nhttp://<host>:18793/__solanaos__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html\n```\n\nThe `/__solanaos__/canvas/` prefix is defined by `CANVAS_HOST_PATH` constant.\n\n## Tips\n\n- Keep HTML self-contained (inline CSS/JS) for best results\n- Use the default index.html as a test page (has bridge diagnostics)\n- The canvas persists until you `hide` it or navigate away\n- Live reload makes development fast - just save and it updates!\n- A2UI JSON push is WIP - use HTML files for now\n"
#21	}
#22

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public