Guide · Agent skill

How to use the Canvas Display agent skill: setup and examples

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

The canvas skill lets an AI agent write HTML pages and show them on a screen that belongs to you, such as a connected Mac, iPhone, iPad or Android device running the Brigade node app. It is useful for dashboards, visualizations, games and interactive demos that are easier to look at than to read in a chat window. After this guide you will be able to install the skill, confirm your Brigade setup, and ask the agent to present a page on a connected node.

Canvas Displayspinabot/brigade · MIT Download the skill

Quick start

1Install the skill. Download the canvas ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
2Enable canvasHost. Set canvasHost.enabled to true and choose a root folder in your Brigade config file, by default ~/.brigade/brigade.json.
3Pick the right URL. Read gateway.bind and build a URL with the full hostname that matches your mode, not localhost when bound to Tailscale.
4Find a connected node. Run brigade nodes list and note the ID of an online Mac, iOS or Android node.
5Ask for the page. Describe the dashboard, visualization or demo you want. The agent writes the HTML into the canvas root and presents it on your node.
6Adjust or hide. Use navigate, snapshot or hide with the node ID to change or close the view.

What the canvas skill makes the agent do

The skill teaches the agent to write HTML files into a folder served by a local Brigade canvas host. It then sends the URL of that page to a connected node app, which renders it in a WebView so it appears on that device's screen.

Once a page is showing, the agent can navigate the view to a new URL, run JavaScript in it, take a screenshot, or hide it. Live reload refreshes open pages whenever the files change, which helps when you are iterating on a design.

present: show the canvas, optionally at a target URL
navigate: move the canvas to a new URL
eval: run JavaScript in the canvas
snapshot: capture a screenshot of the canvas
hide: hide the canvas

What you need before installing the skill

The skill does nothing without a Brigade gateway and at least one connected node app (Mac, iOS or Android). You also need a Brigade config file, by default at ~/.brigade/brigade.json, with canvasHost enabled.

Some debugging and URL steps use jq and curl. The Tailscale CLI is needed if you use tailnet or auto bind modes, and lsof is optional for port debugging. The skill runs scripts and uses the network.

Brigade gateway and at least one connected node app (Mac, iOS or Android)
Brigade config file with canvasHost enabled (default ~/.brigade/brigade.json)
jq and curl for the debugging and URL steps
Tailscale CLI if using tailnet or auto bind modes
lsof for port debugging (optional)

Install the canvas skill

Download the ZIP for the canvas skill from this page. The package contains a single file, SKILL.md. Unzip it into your personal skills folder ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill only for that project.

If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.

Personal install: unzip into ~/.claude/skills/
Project install: unzip into the project's .claude/skills/ folder
Claude apps: Settings → Capabilities → Skills, then upload

Configure the canvas host

In your active Brigade config file (the path in $BRIGADE_CONFIG_PATH, default ~/.brigade/brigade.json), enable canvasHost and set the root folder where your HTML lives. Live reload is on by default. The gateway bind mode controls which address the canvas host uses.

canvasHost.enabled: true
canvasHost.port: 18793 in the example config
canvasHost.root: the folder that holds your HTML files
canvasHost.liveReload: true
gateway.bind: auto in the example config

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

Build the URL the node will open

Nodes need the full hostname that matches your bind mode. localhost does not work when the server is bound to Tailscale, because the node receives the Tailscale hostname from the bridge. For loopback, use 127.0.0.1. For lan, tailnet or auto, use the hostname of the machine.

Files in the canvas root are served under the /__brigade__/canvas/ path. A file at games/snake.html in the root is reached at that path plus games/snake.html.

loopback: http://127.0.0.1:18793/__brigade__/canvas/<file>.html
lan, tailnet or auto: http://<hostname>:18793/__brigade__/canvas/<file>.html

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

Ask the agent for a canvas page

Describe what you want in plain language, for example a small dashboard or a playable game. The agent writes the HTML into the canvas root, finds your node with brigade nodes list, and presents the page. You can also ask it directly to use the canvas skill.

To run the steps yourself, list nodes first, then present the page using the node ID and the full URL.

Find nodes: brigade nodes list (look for Mac, iOS or Android nodes with canvas capability)
Present: canvas action:present node:<node-id> target:<full-url>
Change view: canvas action:navigate node:<node-id> url:<new-url>
Screenshot: canvas action:snapshot node:<node-id>
Hide: canvas action:hide node:<node-id>

canvas action:present node:<node-id> target:<full-url>

Troubleshoot a blank screen or stale content

A white screen usually means a URL mismatch between the server bind and what the node expects. Check your bind mode, confirm the port with lsof, and test the URL with curl. Use the full hostname that matches your bind mode, not localhost.

If content is not updating, confirm liveReload is true, make sure the file is inside the canvas root, and check the logs for watcher errors.

Check bind mode: read gateway.bind from your config with jq
Check the port: lsof -i :18793
Test the URL: curl http://<hostname>:18793/__brigade__/canvas/<file>.html
"node required" error: always pass node:<node-id>
"node not connected" error: the node is offline, so run brigade nodes list to find online nodes

curl http://<hostname>:18793/__brigade__/canvas/<file>.html

What people use it for

Showing a live dashboard or chart on a tablet on your desk
Previewing an interactive HTML prototype on an iPhone or Android device you own
Displaying a small browser game or visualization on a Mac while you keep working
Capturing a screenshot of the canvas view to check how a page renders

Frequently asked questions

How do I install the canvas agent skill?

Download the canvas ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.

What are the requirements for the canvas skill?

You need a Brigade gateway, at least one connected node app on Mac, iOS or Android, and a Brigade config file with canvasHost enabled. jq and curl are used for debugging steps, the Tailscale CLI is needed for tailnet or auto bind modes, and lsof is optional.

Is the canvas skill free to use?

The skill is published under the MIT licence. The source does not list pricing for Brigade or the node apps, so check those separately.

Why does my canvas show a white screen?

A white screen usually means the URL does not match your gateway bind mode. Use the full hostname that matches the mode rather than localhost, and test the URL with curl.

Can the canvas skill show any website?

No. It displays HTML files placed in the canvas root or URLs you give it. It is not a general web browser.

Is it safe to show private data on the canvas?

Be careful. Pages are served over the network and the canvas can run arbitrary JavaScript through eval, so avoid showing sensitive or private data on a shared screen.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits developers who already run Brigade with connected nodes and want the agent to show dashboards, visualizations or prototypes on a device they own. It is not useful without a gateway and nodes, and it is a poor choice for showing sensitive data on shared screens or for general web browsing.

Download the skill