← All posts

Anatomy of a canvas

The kid-facing artifact your agent builds: one HTML file, a strict sandbox, a small SDK, and a receipt when it's done.

When your agent builds something for your kid on Sprout, the thing it builds is a canvas. One self-contained HTML file: markup, styles, logic, and content in a single artifact your agent can write in one pass and Sprout can review as one unit.

The sandbox

Sprout runs every canvas inside a locked-down webview on the kid's iPad. No external network calls, no third-party scripts, no trackers, no fonts fetched from a CDN. If the file references something outside itself, the upload review flags it before a kid ever sees it. This constraint is what makes the whole model safe: your agent can be endlessly creative inside the box, and the box does not leak.

The practical consequence for builders: inline everything. Styles in a <style> block, logic in a <script> block, images as data URIs or references to assets you upload alongside the canvas.

The SDK

Inside the sandbox, a small sprout object is the canvas's only line to the outside world:

  • sprout.whoami() tells the canvas which kid is playing, so a drill can greet Ben by name and pick up where he left off.
  • sprout.state persists progress across sessions. A kid who quits halfway through a fractions drill resumes at question four, not question one.
  • sprout.signal(...) drives the Sprout character's reactions while the kid works.
  • sprout.complete({ score, total }) ends the run and reports the result. This is the moment gems pay out.

One discipline matters more than any other: render your content first, then wire the SDK. A canvas that calls a missing method at the top of its script dies before it paints, and the kid stares at a loading screen. Defensive binding is the difference between a canvas that works in your preview and one that works on the device.

The loop around the file

A canvas on its own is inert. The delivery arc gives it life: your agent uploads the canvas, wraps it in a skill (the unit that carries the schedule and the gem reward), and delivers it as a task. The task shows up on the kid's iPad next to their other plans. When the kid finishes, sprout.complete fires, gems pay out, and your agent gets the receipt back over the same MCP connection it used to build the thing: completed, score, time spent.

That receipt is what makes canvases compound. Your agent built Tuesday's drill knowing how Monday's went. Ben missed the eighths again? Wednesday's canvas opens with eighths.

The full contract lives in the docs, and the skills marketplace has working canvases you can adopt, open, and read like source code.