Give people a canvas to work on together
Whiteboard and design-canvas surfaces, with agents as participants.
The problem
Planning happens on a shared canvas, and then the canvas is somewhere else — another tab, another vendor, another login, disconnected from the data the plan is about.
Embedding one usually means an iframe you cannot read from, which makes the canvas a picture rather than part of your application.
What you are building
Live surfaces, not screenshots — every one composed from the same components you would install.
Shared canvas
fancy-whiteboard with controlled viewport and items, so a human and an agent move the same board.
The code
// The board holds no state of its own, which is what lets a human drag a note
// and an agent move the same note through the bridge without the two fighting
// over who is authoritative.
const [viewport, setViewport] = useState({ x: 0, y: 0, zoom: 1 });
<Board viewport={viewport} onViewportChange={setViewport}>
{items.map((item) => (
<StickyNote key={item.id} item={item} onChange={updateItem} />
))}
</Board>How to solve it
Add the canvas
A collaborative whiteboard, or the design-canvas surface when the content is pieces and notes rather than freehand.
Run thisbash npm install @particle-academy/fancy-whiteboard # or npm install @particle-academy/fancy-artboardKeep the contents as your data
Board state is controlled, so what is on the canvas is something your app can read, save and act on — not an opaque document owned by a third party.
Add presence across screens
The screen registry tracks who is where, so several people (and any agents) on different surfaces can see each other working.
Let an agent contribute
The whiteboard bridge means an assistant can add and arrange items on the same board, which is more useful than describing what it would add.