Lattice

Inspiration

I am a designer and engineer, so naturally, I love whiteboarding ideas. Especially today, as the implementation of software can be abstracted more than ever, I find it both necessary and enjoyable to diagram architectures before I build my ideas with agents.

However, the revision loop has lately felt more drawn out that it needs to. I tried a bunch of whiteboarding apps before landing on the excellent tldraw, but as advanced as it is, it's still tedious to use it in conversation with an agent about a given diagram. I often turn to Computer Use, which relies on the slow process of screenshots and imprecise whiteboarding editing, and the alternative is building a custom API with an unnecessary amount of complexity just to allow and agent and I to collaborate on a whiteboard. WebMCP seemed like an excellent fit to make this workflow more efficient.

What it does

Lattice is an infinite canvas that functions similarly to tldraw, which it's built on, but specialized for reviewing architecture diagrams with your agents. It exposes WebMCP tools to view, create, and edit diagrams, so you can ask it to explain code concepts in an instant.

Where Lattice really excels, though, is in its comment tool. Just like Figma, you can easily mark up any node or area on the board, and the agent connected to Lattice is able to understand exactly what you annotated without any screenshots or even any semantic references in your comments.

How I built it

Each Lattice board is stored in the browser via localStorage, so it persists with no accounts or exports needed. The underlying architecture is stored as a semantic graph, where every node, edge, and comment has metadata labeling exactly what and where it is (ID, type, label, connection, position). This is what allows the connected agent to make targeted edits without screenshots and without editing unrelated parts of the board.

Challenges I ran into

While dogfooding the first version of this app, I found myself constantly telling the agent, "I added a few comments, check them." It became a bit tedious, so I thought this back-and-forth could be improved with a simple keyword, like "Lattice." A skill was a perfect fit here, so I wrote a lightweight one that explains what the user is trying to do when they say "/lattice create" or just "/lattice" (to edit).

Accomplishments that I'm proud of

Lattice is not just a demo for me. I've started using it every day in the Codex in-app browser, and it truly has made me more productive, allowing me to understand concepts better and churn out higher quality code more efficiently.

What I learned

Before this challenge, I hadn't heard of WebMCP, so I learned all about how it works and where it works best (hoping more companies begin integrating it into their apps!). I also learned how to maximize an agent's capabilities not by necessarily giving it more tools, but rather by improving its existing set of tools through more narrow typing, better tool descriptions, and more.

What's next for Lattice

I plan on sharing this app with a few friends to see if/how it fits into their workflows. I suspect that many of them use whiteboards for more than just diagramming architecture, and the great part about Lattice today is its simplicity and its foundation (tldraw) that can be expanded in countless ways to support more use cases.

Along with potentially expanding its feature set, I hope to find more ways to integrate it into my own workflow, like I did when I made the Lattice skill. I can imagine that instructing the agent to automatically create new diagrams when relevant would be useful, and I could even see some sort of cross-board context coming in handy as I work on one project across multiple Codex threads.

Built With

• chatgpt
• codex
• react
• tldraw
• typescript
• vercel
• vite
• webmcp