What we've built with the tldraw ChatGPT plugin
This week we launched the tldraw plugin for ChatGPT and Codex.
It puts a live tldraw canvas next to your chat, so you and your agent can sketch, diagram and plan in the same place. Every board is a real tldraw.com file, with multiplayer and comments switched on.
Since launching, the team has been putting it through its paces. Some of what we made is useful, some of it is just fun.
Here are a few of our favourites.
Visually explain how something works
Some things are easier to draw than to describe. Tim, tldraw’s product manager, asked ChatGPT to create a visual explanation of how different traffic light systems work on the canvas.
If you wanted, you could take it further by asking questions about the drawing, or select part of it and ask the agent to go deeper.
Sketch a bug fix before writing any code
See how Codex would fix a bug, sketched out on the canvas, before it even writes a line of code. That’s what Max, a product engineer at tldraw, used the tldraw plugin to do, and the different answers were sketched out side by side for her to choose from.
From there, you can work like a whiteboard session with a teammate. Pick the fix you like, leave a comment on it, and ask for changes. The agent reads your comments and updates the drawing live. When you’re happy, tell it to build that one.
Build a QBR deck from your CRM
Build a full 12-slide sales QBR in tldraw, using real data pulled from HubSpot, in a matter of seconds. That’s what Spencer, tldraw’s US sales lead, tested out. The slides come out as real tldraw frames, so you can move things around, restyle them or redraw a chart by hand.
The interesting part is what you can do next. Your team can comment on the deck, and so can the agent. Ask it to rework a slide from a comment thread, and it edits the board while everyone watches.
Turn a playlist into a set of cards
Not everything had to be practical. Luke, tldraw’s solutions engineer, asked ChatGPT to turn a Spotify playlist of London grime into a board of cards, one per track. It’s a small example of what the canvas does well: taking a list and laying it out so you can see it all at once, then sort, group, and rearrange it by hand.
Design with your team and your agent
Use the canvas to design features and get feedback from colleagues, with your agent already in the room. Max started with a board of screenshots and wireframes, and asked Tim to join and leave feedback as comments.
Then, you can go deeper by annotating the screenshots and asking Codex to implement it in the app. Because the plugin knows what’s on the board and what you have selected, “build this” is enough. Codex can then drop a screenshot of the new view back onto the board for the next review round.
Diagram how a pull request works
Max played around with diagramming how code works and how logic flows through it: keep a diagram of an open issue on a board, then ask Codex to read a PR and add a second diagram showing how it solves the problem.
It’s a quick way to check the direction of a fix, not just the details. You can ask for more detail on one part, or sketch your own version and ask whether it would work.
Plan an office layout
We’ve just moved into a new office and are still figuring out exactly how we want to configure the space.
Max took a photo of the space and had Codex cut out each piece of furniture as its own sticker, then place them on the board. Now we can drag things around to try new layouts, and ask the agent to tidy up a version to share with the team.
All three of those examples are explored in Max’s launch video:
Try it yourself
To get started, go to Plugins in ChatGPT or Codex and search for tldraw. Install the plugin, sign in with your tldraw.com account, and open a new chat.
We’d love to see what you build. Share it with us on Discord or follow us on X. If you'd like to put a canvas like this in your own product, check out our docs or starter kits.
