Project · Lakshay Mehandru · Aug 2026

Canvas

A whiteboard you can ask for a drawing. Type a sentence, a cursor shows up and draws it, and then you edit it by hand.

Aswin Nair and I built this one over a weekend. More of his work is at aswinnair.com.

Next.jstldrawClaudeWeekend project
Canvas

Drew 10 elements

Prompt
A web version of the idea. The drawing is scripted and nothing here calls the real app. Pick a prompt to run it.

A whiteboard you can ask

What if you typed a sentence into a whiteboard and it drew the thing?

Aswin and I wanted to see what a blank canvas feels like when you can ask it for a flowchart. You type “a flowchart for choosing what to eat” into the bar at the bottom. A cursor shows up, and the boxes and arrows land one at a time while you watch.

What it does

It's a tldraw canvas first, so you can draw, erase, drag things around and double-click a label to fix a typo. The AI is the extra. It sees what's already on the canvas, so you can select two boxes and ask it to add a step, or ask it to move things. One undo takes back a whole drawing, not one box at a time.

A share button opens a live room, so two people can draw on the same canvas.

Agents in the room

The part worth pointing at is the connector. Inside a live room you can make a private link and hand it to Claude, Codex or Cursor, and they join over MCP. They get four tools: read the board, add shapes, update shapes and undo. So you can rough out an idea and an agent in another window fills in the boxes on the same canvas, live.

One call can add up to 100 items, and the whole connector has a kill switch.

Changing our minds

We changed our minds about a lot in the first few days. We deleted multiplayer on day one and rebuilt it three days later, properly this time, on a small sync server of our own. We swapped the canvas library for Excalidraw and swapped back to tldraw once we had a license. We gave the page a dotted-paper background, spent a commit turning the dots into one clean grid, then took the grid out the same day.

The half-diagram

The bug I liked best was a quiet one. Bigger diagrams were getting cut off halfway and nothing said so. The model's thinking comes out of the same token budget as its drawing, so a long diagram ran out of room in the middle of its list. The fix was a bigger budget, and a plain message when a drawing does get cut short: ask again to continue.

Try it

There's a live copy in the links below. If you draw something good with it, send it to me.

How it's built

The canvas

Next.js 16 and Tailwind 4, with tldraw doing the drawing and editing. The tools are select, draw and eraser, on the keys V, D and E. Undo, redo, zoom to fit and PNG export sit in a small pill at the top right.

Asking for a drawing

Your prompt goes to one route that streams structured items from Claude through the Vercel AI SDK. On a blank canvas the model designs inside a 1600 by 1000 frame centered on your view. With something already drawn, it also gets a PNG of the canvas and the shapes as JSON, and an item can be a new shape, text, a note, an arrow, an update or a delete. Each item is validated as it arrives and drawn straight away.

The drawing cursor

A pointer appears the moment you send, then darts to each element as it lands. Every shape fades in over 180 ms. The whole run is closed as one history step, so a single undo removes the entire drawing.

Live rooms

A share button opens a live room. Rooms run on a self-hosted tldraw sync server on Cloudflare, one Durable Object per room, with R2 for uploaded images.

The agent connector

Inside a room, a popover mints a private link that Claude, Codex or Cursor can use over MCP. The server gives them four tools, to read the board, add shapes, update shapes and undo. One call can add up to 100 items, and the whole connector has a kill switch.

Links

The live version calls Claude, so it's rate limited.