Agents reply with sandboxed HTML that renders inline: charts, dashboards, diagrams, and small widgets instead of ASCII art.
$cast install visual
The visual canvas lets an agent answer with a designed page instead of a wall of text. When structure or magnitude carries the meaning — comparisons, flows, timelines, metrics, dashboards — the agent emits a cast-canvas block of self-contained HTML, CSS, and SVG, and codecast renders it inline in the conversation: themed to match the app, expandable to fullscreen.
The visual snippet teaches agents the format and, just as important, the restraint: reach for a canvas when a visual beats prose; the default stays markdown. It is installed via the snippet system.
The format
A canvas is a fenced block:
```cast-canvas
<div data-canvas-title="Shown in the header">
…HTML/CSS/SVG…
</div>
```
data-canvas-title names the block in its header; data-canvas-size="wide" on the root lets a dashboard take the full screen width.
Sandboxed by design
Canvas HTML runs with no scripts and no third-party network. Remote images and fonts are stripped — images must be inline data: URIs or codecast image links (below), and the canvas inherits codecast's mono font. This is what makes it safe to render agent-authored HTML inside the app: the block can lay out anything, but it cannot phone home, run code, or read anything outside itself.
Theming rides on CSS variables. The snippet instructs agents to color everything with the --sol-* tokens — --sol-text, --sol-card, --sol-border, and the eight accents — and never hardcode colors, so a canvas follows the app's light and dark themes automatically.
Declarative interactivity
Because scripts are stripped, interactivity is declarative: the agent writes a class or attribute, codecast supplies the behavior.
Charts compile to Observable Plot, and the whole mark and transform vocabulary is available by name: dot, boxY, density, cell heatmaps, stacked areaY, arrow, vector, and the rest. Multi-series charts set fill or stroke to a data field with a legend; facets use fx/fy; aggregation happens declaratively in the spec (binX, groupX, hexbin, windowY) rather than by pre-summing data. The agent describes the data and the form; codecast renders it themed.
Screenshots and images
Agents constantly have images worth showing — a screenshot of the UI they just built, a chart they rendered, a diagram from the web. A link to a local file path is dead in your browser, so the snippet teaches cast image instead:
The command uploads the image to codecast's storage and prints a stable URL plus ready-to-paste markdown. That URL renders inline — no click-to-load gate — in message markdown () and inside a canvas (<img src="url">), for you and for teammates reading the session. Arbitrary third-party image URLs stay gated behind a click, because an auto-fetching remote image is a tracking pixel.
Where canvases show up
Anywhere conversations render: the web dashboard, the desktop app, and mobile. A canvas is part of the message, so it survives in the transcript, shows up in shared links, and appears wherever the session is read later.
For deliverables that should live outside a conversation — a report a stakeholder opens by URL — use published pages instead: same authoring skills, but a standalone page with a stable link, version history, and access gates.