Material Notes

Material is an app to collect the things I'm thinking about: essays, tweets, videos, screenshots, and my own notes, and arrange them on an infinite canvas to think with them.

why this is a strong fit for webmcp

Material is a strong fit for webmcp because it turns an infinite canvas into a shared workspace between you and an agent.

normally, all the context on a canvas stays inside the canvas. if I want to work with an agent, I have to leave it, copy dozens of notes and references into a chat, explain which ones I'm looking at and how they relate, wait for a response, then bring that response back into material and reorganize it on the canvas myself. every time I do that, I lose the spatial context I was working in — and usually the flow of thought that came with it.

with webmcp, the agent can work from the same context I already have in front of me. it knows what's on the canvas, what I'm currently selecting, and how things are arranged, and it can work directly in that same space.

how it makes the experience better

the biggest change is that interacting with the agent becomes part of interacting with the canvas.

I can select a messy pile of 30 references and say "group these by theme." the agent reads them, finds the themes, writes a synthesis for each cluster, and lays everything out. or I can select three cards that caught my attention and ask "what connects these?" I don't have to name them, paste their contents, or explain what I'm pointing at. selecting something is enough.

that makes the interaction much more fluid. pointing, selecting, moving, and arranging are already how I think on a canvas. now those actions can carry context to the agent too, and its response comes back as part of the canvas rather than another piece of text I have to translate into my workspace.

what people and agents can do together that wasn't possible

the part I find most interesting is that I don't have to hand the canvas over to the agent or stop what I'm doing to give it instructions. we can work on the same thing at the same time.

I might be moving things around, reading, and selecting a few cards that feel related without knowing exactly why yet. I can ask the agent what it sees in them, and it can read much more of the surrounding material than I would at once, find a pattern, write a synthesis, or reorganize the cards around that idea. I can immediately react to what it did — move something back, rewrite a sentence, select a different group — and continue from there.

the human contribution is often directional and intuitive: this feels important, these things belong together, this is the thread I want to follow. the agent can take that partial signal and work across much more of the material at once. because we're working on the same canvas, the result doesn't arrive as an answer in a separate chat. it becomes part of the thing I'm already making.

how I implemented it

I registered eight tools with document.modelContext.registerTool, covering canvas state, selection, card content, creation, editing, and placement.

reads come directly from a ref kept in sync with the live react canvas state. writes run through the same reducers as the UI and update state immediately, so there's no server round-trip. spatial operations are batched: the agent can place an entire cluster with one call containing all of its coordinates rather than issuing individual moves.

the demo is intentionally ephemeral: the initial canvas is server-rendered from a postgres space and cached for 30 minutes, but all agent and user edits stay local and a reload resets them. the same eight tools run against persistent state in the authenticated product.