Using with AI agents

CanvasFlow is written to be easy for coding agents to use correctly. Three things help.

AGENTS.md in the package#

The package includes AGENTS.md: a map of the source, the rules the code follows (zero dependencies, a platform-free core, one outline per shape, immutable records, every mutation in a batch, untrusted data stays data, tree-shakeable modules) and recipes for common tasks. Agents that read node_modules find it at node_modules/canvasflow/AGENTS.md.

These docs, as Markdown#

Every page on this site is also plain Markdown, which agents read far better than HTML:

• /llms.txt lists every page with a one-line summary and the address of its Markdown.
• /agent-index.json is the same list with each page's headings, for tools that want to pick what to read.
• Add index.md to any page's address to get its Markdown, like /guides/custom-shapes/index.md.
• "Copy page as Markdown" in the right column of every page puts it on your clipboard, ready to paste into a chat.

Types everywhere#

Every option, event and record is typed, and the types carry doc comments. Agents working in TypeScript get the same guidance you see in your editor.

A good brief#

When you hand CanvasFlow work to an agent, a short brief goes a long way:

We use CanvasFlow (npm: canvasflow) for our whiteboard.
Read node_modules/canvasflow/AGENTS.md first, and https://canvasflow.dev/llms.txt for the docs.

Task: add a "progress bar" shape with a draggable handle that sets its value (0 to 1).
- Follow the ShapeUtil pattern in "Custom shapes".
- Geometry must match what render draws.
- All changes go through the editor, inside one batch.
- Add it to the toolbar with createBoxTool.

The rules in AGENTS.md are the same ones the engine's own test suite enforces, so code that follows them tends to just work.