AI Engineer World's Fair 2025
tldraw computer
Read the talk
tldraw computer: making a canvas compute
An interactive canvas becomes a place to generate software, connect multimodal instructions, and let people and models edit the same objects.
From a talk by Steve Ruiz
A canvas built from ordinary web components
What becomes possible when a whiteboard can contain a working video player or code editor, with drawing tools still available around and above it? That is the starting point for Steve Ruiz’s tour of tldraw. His work on a digital ink library, subsequently implemented in Excalidraw, led to a broader question: why wasn’t there a reusable SDK for building this kind of application? The result was tldraw, available both as a free whiteboard at tldraw.com and as an SDK documented at tldraw.dev. Its canvas is built from ordinary web components—React throughout.
Ruiz plays an embedded YouTube video while retaining the ability to draw over it. A CodeSandbox editor remains an editor inside the canvas; Figma and Excalidraw can live there too. He then embeds tldraw inside itself and draws into the nested canvas. This recursive example belongs to the historical demonstration: the current embed documentation blocks nested tldraw rendering in an iframe and treats pasted tldraw links as bookmarks.
The SDK also handles the less spectacular details that make a canvas feel coherent. Arrows follow the boundaries of connected shapes, and box corners retain their geometry as the boxes change. These details matter for everything that follows: an AI experiment can use interactive web content and reliable drawing behavior without rebuilding a whiteboard first.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
From a wireframe to a working application
People were already drawing wireframes in tldraw. Make Real asked whether those drawings could become functioning software. With GPT-4 with Vision, the initial mechanism was straightforward: send a screenshot to the model, give it the role of a web developer receiving a designer’s low-fidelity mockup, and ask it to build the interface. The drawing supplies layout and intent that would otherwise need to be described in words.
The stop-motion example makes that intent concrete. Ruiz wants a camera feed, a way to capture pictures, a display of the captured frames, and sequential playback. He submits the drawn interface without even including its title. While that generation runs, he opens a version generated during the preceding talk: it captures frames, provides onion skinning, and produces a GIF. The functioning example is therefore a previously generated result, rather than the completion of the request just submitted onstage. Ruiz compares the input method to supplying an image in Cursor.
Returning the application to the canvas makes its output available as the next input. Ruiz draws annotations over the rendered website and uses them to request another version. An already completed revision shows a button changed to a solid fill. In the original Make Real implementation, the next request included the previous HTML alongside the annotated image: an iframe’s contents exported as a blank rectangle, so the image alone could not carry the existing application forward.
Make Real appeared at the end of 2023, and Ruiz describes it as an early route into software creation for people who could not program. Its visual loop also extends to debugging. After an application briefly flashes green, he captures the bug in a screenshot and submits it with the original source, asking for that particular problem to be fixed. He reports that the model repaired it. The canvas is doing more than collecting prompts: it holds the interface, the requested changes, and visual evidence of failure in the same workspace.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Changing an image by changing a drawing
Draw Fast applies a similar feedback loop to image generation. Ruiz tentatively identifies its mechanism as latent consistency models: the aim is to generate an image quickly enough that changes to a drawing can drive changes to the result. The server initially responds, and he begins manipulating the input. Flattening content gives him an image he can transform further, including rotating and stretching it.
Ruiz says Draw Fast can respond almost in real time under good circumstances, but the live demonstration updates intermittently. Even the uneven feedback exposes how the model interprets the canvas: sideways figures appear to become running people. Rotation changes more than composition; it can change the action inferred from the input. The public hosted demo has since ended, while the repository remains the reference for exploring the experiment.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
A commercial made by connected blocks
tldraw computer turns these individual transformations into a graph. Ruiz enters text about AI Engineer, MCP observability, and a conference, then sketches a large top hat with playing cards in its brim. He connects these inputs to an instruction to write a short commercial, adds a polite “please,” and runs it. The instruction block first creates a script describing its work, then executes that script.
The resulting commercial text feeds both speech generation and image generation. Each block accepts inputs and produces outputs; arrows make those dependencies visible. Ruiz then continues the graph with a transformation that makes the commercial sad and serious, followed by another generated image. A single collection of source material can therefore support several related outputs and successive revisions of their tone.
The instruction script is small. It tells the block to inspect its inputs for guidance about the product, services, style, and other requirements; write a short commercial; and output the result. A compact TypeScript representation makes the distinction between a reusable instruction and a particular set of inputs explicit:
typescript
const commercialBlock = {
instruction: [
'Analyze inputs for product, services, style, and requirements.',
'Write the text for a short commercial based on those inputs.',
'Output the result.',
].join('\n'),
inputs: [
{ kind: 'text', value: 'AI Engineer' },
{ kind: 'text', value: 'MCP observability' },
{ kind: 'text', value: 'conference' },
{ kind: 'drawing', description: 'Top hat with playing cards in the brim' },
],
}
The drawing description above stands in for the canvas drawing. The essential interface is that the block can reuse its instruction with new inputs, then emit data the next block can accept. The script describes the work; the model performs the transformation.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Working with the models already available
The project emerged from a collaboration with Google around the launch of Gemini 2. Ruiz hoped the invitation would include early access to the new models, particularly the real-time phone capabilities Google had shown. It did not: the team had to build with the models already available. Gemini 1.5 was out, and Gemini Flash offered the combination Ruiz found useful—speed, adequate quality, and multimodal input. Those existing capabilities inspired the graph experiment.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Adding numbers, an octopus, and a camera input
Once blocks could interpret instructions and pass results onward, they could do something resembling ordinary computation. Ruiz creates an instruction to add up all its inputs and supplies 2 and 11. It returns 13. But the operation is executed by a language model rather than an arithmetic function in code. That changes what the operation can accept—and how it decides what the inputs mean.
He replaces 11 with octopus. The prompt requires the model to infer a number even from nonnumeric input, so it interprets the octopus as eight and returns 10 after adding two. Next he adds a camera input and shows four fingers; the displayed result becomes 14.
| Inputs | Interpretation | Result |
|---|---|---|
2, 11 | Ordinary numeric inputs | 13 |
2, octopus | Infer eight from the octopus | 10 |
2, octopus, camera showing four | Add the visually inferred four | 14 |
The model supplies the interpretation as well as the calculation. An octopus does not carry a numeric type; the instruction and the model’s associations make it usable in this particular operation.
This permissiveness is also useful outside arithmetic. Ruiz’s favorite personal application is taking his daughter’s drawings and turning them into pictures and stories, then passing those results through other blocks. Text, drawings, and camera images can participate in the same workflow because the model can interpret their content.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Feedback, memory, and a third Boolean value
Ruiz had been playing Factorio while developing these ideas, and the next example resembles a small machine that keeps processing material. Its graph contains a cycle:
- Generate a random pop song.
- Append the song to a list.
- Feed that list back into generation so the next choice avoids previous songs.
- Ask whether the song is about love and route the answer.
The list carries information from one iteration into the next. The classification introduces another consequence of model execution: Ruiz jokingly gives his Boolean three values—yes, no, and maybe. The graph can preserve ambiguity instead of forcing every song into a binary category.
The cycle can continue indefinitely, consuming the credits Google supplied as it goes. It is a useful reminder that a looping diagram is also a looping workload. Ruiz says tldraw computer became popular, although less popular than Make Real, and describes it as a tool that rewards creative combinations of these small operations.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Designing a process that can wait
Ruiz has seen people use tldraw computer for multistage prompting and decision-making analysis. From there, he imagines moving execution into an asynchronous cloud process. His example starts with a CSV of email addresses belonging to people who have engaged with a product. The process would email them, wait for replies, analyze sentiment, and branch according to the response. Before contacting someone again, it could text the operator to ask for approval.
That long-lived workflow, potentially running many branches in parallel, is a proposed direction rather than a demonstrated deployment. The canvas would serve as an interface for designing it. This fits the project’s original creative brief: a computer that works the way Ruiz imagined computers worked before he understood their internals. Put some material here, say what should happen to it, and send the result over there. The graph makes that sequence something a person can arrange and inspect.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
A collaborator that edits the same objects
The final AI demonstration, Teach, moves from connecting transformations to collaborating directly on the canvas. Ruiz asks for a flowchart that begins with AI and ends with engineer, incorporating existing shapes. A canvas SDK with a runtime API gives the model a way to act on the workspace. Although Ruiz describes the models’ ability as imperfect, the integration is sufficient to make the model behave like a virtual collaborator.
He then asks it to draw a cat, mentioning a pelican riding a unicycle elsewhere on the page. The cat is not generated as a bitmap in the manner of Midjourney. The model returns text with a structure that the application maps into canvas shapes. Both the person and the model can edit the resulting objects. Ruiz can correct the drawing himself, and the model can work with things he adds.
Ruiz draws an orange element beside the cat and asks it to make the cat blow out the candle. He has not separately labeled his addition as a candle; the model must interpret it in context. The backend is Claude. The result shows the cat blowing toward the now-unlit candle, with blue strokes near its mouth and a small gray smoke mark above the candle. The edit combines recognition of a human addition with changes to an existing model-created drawing.
The result is rough, playful, and responsive enough to make the interaction compelling. Ruiz calls this “shitty but amazing,” a description he considers on brand for tldraw and an advantage over larger companies. The demonstration’s value is the shared, editable workspace: a person can add something the model did not create, and the model can continue the scene from there.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
The canvas as an authoring layer
Ruiz closes by inviting builders to discuss the tools that make these integrations easier. The examples extend beyond AI: Grant Kot’s Liquid Layers uses tldraw as a geometric control and authoring layer for a liquid simulation. He also points to commercial adoption by Observable; Observable Canvases is the product whose whiteboarding documentation identifies tldraw as its foundation.
A canvas can hold interactive applications, supply inputs to a model, expose the dependencies of a running graph, or provide shared objects for a person and an AI collaborator. Ruiz’s closing invitation is direct: “Please build something amazing.” The canvas and its tools are available; the remaining work is to decide what to make with them.
Suggest correction
This note stays in this page until you copy or download it. Nothing is submitted; reloading clears the draft.
Resources
From the talk
Build React canvas applications with custom shapes, interactions and programmatic canvas control.
Source and local setup instructions for tldraw's drawing-to-image experiment using fal; the hosted demo has ended.
Interactive liquid simulations, including a version integrated with tldraw.
Further reading
Steve Ruiz explains how screenshots, generated HTML and canvas annotations form an iterative interface-building workflow.
The original paper on distilling latent diffusion models for image generation with few inference steps.
- Whiteboarding in Observable CanvasesDocumentation
How Observable combines data-analysis nodes with tldraw drawing, annotation and organization tools.
Updates since the talk
Current documentation for iframe embeds, interaction modes, export limitations and nesting restrictions.
Read the complete timestamped transcript
- 0:00
[on-hold music] My name's Steve, uh, Steve Ruiz.
- 0:17
I am from a company that I started called tldraw. tldraw started as a, um... Well, a couple things. Started as, like, a, a, a digital ink library that then, uh, Christopher had me im-implement in Excalidraw.
- 0:30
When I was working on that, I was like, "You know, there should probably be, like, a kind of a, a really good SDK for building these types of things."
- 0:37
And I'd already worked on a couple of projects that, uh,
- 0:41
were kinda going in that direction, so I did. Turned out, if you build a canvas that other people can use, people will, will build cool stuff with it. So
- 0:52
today I'm gonna be talking about some of the stuff that we've done with, uh, AI using our, kind of our own toys, playing with our own canvas here. So I'm here in tldraw.com.
- 1:03
It's a free whiteboard. Um, you can come on, use it, make your diagrams, make your slides. Uh, very, very similar in, in use case to, uh, to Excalidraw actually.
- 1:14
Um, but there are a few things that are, are kinda special here, and I'll show you real quick. So again, this is tldraw.com, free, uh, end user whiteboard application.
- 1:25
Uh, and we also have tldraw.dev, which is the, um, SDK website. If you wanted to build stuff with tldraw, um, then you could go to tldraw.dev and learn all about the, the code and the documentation and how to do that.
- 1:41
The cool thing about the, the canvas is that it is, um... Well, I'll, I'll skip this one for a second. It is just normal web stuff. It's, like, React all the way down.
- 1:49
So for example, I can do, like, things like, you know, play YouTube videos and, uh, you know, still interact with them, still draw on top of them. But the, uh...
- 1:57
Yeah, every one of these little shapes, including, like, doing some pretty cool stuff like, um, you know, have a whole code editor here. This is just CodeSandbox that's embedded in tldraw.com.
- 2:08
This one is, uh, Figma, um, that, like, just is embedded in tldraw.com.
- 2:13
Uh, even y- if you really like Excalidraw, you can even use Excalidraw, uh, inside of, uh, tldraw.com. So, um, and I'm pretty sure, I hope, hope this doesn't break my slides, but if I paste the own- the tldraw inside of itself, um, then we can, we can kind of...
- 2:31
Let me see if I can draw inside of tldraw. Oop. Hang on a second.
- 2:37
Uh, wee. Yeah, right? Was that... We're, we're kind of modifying the, the inner from the outer, whatever. I'll let you think about how that works. Um, but yeah, and, and it has a lot of, like, kinda little details, I'll do this really quick, of, like, you know, nice arrows that just, you know, perfectly kinda follow the different
- 2:54
shapes of things and, you know, boxes where the, um, uh, you know, the, the, the, the corners of the boxes always stay in the corner of this, right? So that's part of our value propositions, that we, we take care of all these little, like, little details, make sure the corners are right, make sure the arrows are right,
- 3:11
stuff like that. Um, we did a couple of different
- 3:17
AI stuff on top of this, and some of these are gonna work, some of these are not, are, are not gonna work. Um, did we find out, is, is, uh, is Fal in the room here?
- 3:26
Uh, the... Okay. Well, in 2023 we had, um, a lot of success with, with Make Real. I'll skip this one for now. Uh, Make Real was the idea that, um, people were using tldraw for whiteboarding,
- 3:43
uh, as well as wi- like, drawing wireframes. And the idea would be like, well, what if we could take the diagrams that we were drawing, the wireframes that we were drawing, and we could just kinda, kinda make them real, right?
- 3:54
What would, what would be involved in that? Um, and so we, when the, uh, um, when the vision models came out, like GPT-4 with Vision... Uh, that's annoying.
- 4:08
I'll have to do it myself. We, uh, we realized you could just send a screenshot to, um, continue, boom, uh, to the model and say, "Hey, model, you're a web developer.
- 4:19
Your designers just gave you this lo-fi thing. Can you, can you create a, a higher... Like, can you actually prototype this? Can you build it?" And the models could do that really well.
- 4:27
Um, as usual, I'm gonna kinda, like, give this a second to, to load while we, uh... [chuckles] All right. They're really running with this input. All right. Well [laughs]
- 4:38
the models have since become very, very ambitious. Uh, here, here's another good one. Uh, let's say I wanna have a stop motion application where, like, I have a, a, a feed from my camera, and I wanna be able to take pictures, um, and I wanna be able to, like, see all those pictures there, but I also wanna
- 4:53
be able to play them, like, in series. Uh, using only the, the input here, right? I won't even do the title, just, just to be, uh, to be fun.
- 5:04
The model will, will spin off on that, and it will eventually... We can kinda watch it generate. But it will eventually come up with this. I just did this, um, during the last talk where, uh, that, that's my app.
- 5:16
You know, I can kinda do this. It's doing the onion skinning, uh, and there, there's my GIF, right? And not surprising. I mean, you can add images to cursor and stuff like that, and it, it just works really well.
- 5:29
Um, but the fun part is because, I'm gonna stop this, um, because this is back on the canvas, you can actually, um, annotate on top of the website and use that as the next prompt to kinda click this and kinda, kinda just generate the next one.
- 5:45
And I've done this already, but you can see that, yeah, sure enough, it made the button solid like I asked it to. And so using these drawing tools as a way of not only generating stuff, but annotating and, like, kinda iterating through these, uh, you can get some pretty, pretty wild results.
- 6:03
This came out at the end of 2023. It was, uh, one of the first kind of-
- 6:08
... tools that let people that, um, couldn't program and couldn't create software to, to, to kind of do it, and it was, uh, it was pretty remarkable. So, like, this, this being the input, uh, leads to, um, you know, leads to an app.
- 6:23
But you might have seen there the, uh, that it, it just did a little flash of green. You know, there was a bug involved. So I just took a screenshot of the bug and, and sent it together with the, uh, the original source and said, "Hey, uh, can you, can you fix that particular bug?"
- 6:38
And, and yeah, it did. So it's, uh, it's pretty cool. The, um, if I don't crash my browser. Hey. All right, so that's Make Real. Uh, we also did this one called Draw Fast, which may or may not work.
- 6:50
I'm just gonna see if it does. This used a, uh, a thing called, like, latent consistency models. I think that's the name. Basically, like, uh, uh, create an image for me as fast as possible, and we will see if I can wake up the, uh, the server here.
- 7:07
Oh, hey, look. Hey, this normally doesn't work. Special. Uh, where you have a drawing, you have an image being created from the drawing, and I, as I change the drawing...
- 7:16
Oh, come on, do it. Uh, then the image is gonna, gonna change as well. Um, you can even take these things and flatten them like this, and now I can interact with the, um, the model, the images like this.
- 7:30
And, you know, let's say I'm gonna rotate it or, or maybe stretch it out really big. Uh, and
- 7:37
in, in, in good circumstances, this stuff works almost in real time. But you'll have to, you'll have to accept the, uh, well, uh, whatever. [laughs]
- 7:46
Uh, the, the one, one moment of, uh, of, of working as the best that we're gonna get. I'm gonna need to use two hands to do this. But no.
- 7:56
If I just make a whole bunch of people, will they...
- 7:59
Oh, 'cause they, they're running 'cause they're all sideways, right? I got it. Anyway, this is Draw Fast. Uh, but the one that I'm gonna talk about, uh, mainly is tldraw computer.
- 8:12
So this is how... Well, I'll just, I'll just do it. This is a kind of a graph full of these little, other little components. Uh, I am gonna say,
- 8:22
uh, AI engineer, um, MCP observability. I don't know, whatever. Uh, [laughs]
- 8:33
uh, conference. Uh, and I'm gonna draw a, a picture too of, like, maybe a, uh... I'll just do, like, a big, um, uh, top hat or something like that.
- 8:45
I don't know, whatever, with some playing cards in the, in the brim. Got it.
- 8:51
Write a short commercial is the instruction here. Uh, I'll even do please, uh,
- 8:58
and run it. Okay, so a couple of things are gonna happen all at once here. This graph is gonna execute. Right now, the instruction is creating a script for itself, and then it just executed the script.
- 9:07
Sorry, this goes fast. Wrote the text. Now it's generating speech. It's al- also generating an image based on this. Um, each one of these blocks accepts inputs and produces outputs.
- 9:19
So this image [laughs] is based on, uh, [laughs] our, our, our text, which was based on this, this instruction, which was based on these inputs. Uh, and then it's, it's, you know, creating speech right now.
- 9:32
Um, and that's gonna be whatever. The AI Engineer Conference is where innovation- You got it. And then I can, I can keep piping it on, and it'll, you know, but this time it'll make it sad and, and serious, and we create an image based on that, right?
- 9:48
So we-- It, this is cool. Um, the--
- 9:53
Each one of these things, like I said, has this script of, like, how should I use my inputs? What should I produce based on my inputs? So for this write a short commercial, it's something like, it's tiny.
- 10:04
I'll, I'll read it. Analyze inputs, looking for guidance on the product services style or other requirements for the commercial. Based on the inputs, write the text for a short commercial script.
- 10:12
Output the result, right? And it'll repeat those same instructions based on whatever I give it, and it'll, it'll pipe it out in the same sort of data that, uh, um, is acceptable as inputs by the next, next thing down the line.
- 10:28
Um, we did this in, uh, collaboration with Google. They, uh, came to me and said, "Hey, we have, uh, Gemini 2 coming out, and we wanna launch with a bunch of cool demos and a bunch of cool partners.
- 10:38
Um, do you wanna have, uh, you know, be a part of that?" I'm like, "Awesome. Does that mean we get early access to the, the new models?" You know, these, um, they had shown the, you know, using your phone and kinda like, you know, where did I leave my keys, and all that type, type of real-time stuff.
- 10:51
And they're like, "No." I'm like, "All right." I'm like, "Do I-- Anything?" "No, no, you gotta work with what you got." So, uh, cool. All right, we'll do that.
- 11:00
The, uh, and so we did. Um, you know, Gemini 1.5 was out. That's pretty cool. But also, Gemini Flash was out, and Flash was fast and pretty good and multimodal.
- 11:12
So that was the kind of the inspiration for this. As we worked on it more... That's, that's good. That's good. Sad and serious AI engineer conference. [laughs]
- 11:22
Um, yeah, it's good stuff. As we worked on this more, we, we realized that, like, you could, you could kind of do computer stuff with it. You could kind of like take a, uh, an instruction, say something like, like increment or like, I'll, I'll do this, like add up, uh, all your inputs,
- 11:41
and then you give it some inputs, uh, like, um, you know, whatever, uh, two,
- 11:48
and, uh, it's hard to do this, you know, 11, and it will come up with, uh, like you, like you kind of expect. It'll, it'll come up with, whatever, 13.
- 11:57
But the execution here is not being done in code. The execution is being done by a language model. Languages models are capable of this kind of like nonlinear thinking.
- 12:07
Um, so if I gave it two and, uh, octopus, um, as the inputs and asked it to add that up-
- 12:15
Um, well, the octopus is not a number, but
- 12:19
if you forced me to, which we do in the prompt, uh, infer a number from whatever, you know, uh, maybe, maybe, maybe it's eight and, and eight and two should make 10, and there you go, right?
- 12:31
And, you know, if it, if it was a, uh, you know, a camera feed and it is me-- I'm gonna try and do this. Uh, hold on a second.
- 12:40
Um, four. You know. Like, is it gonna be 14?
- 12:49
Maybe. Yeah, there we go, right? So, like, it's, it's able to use... Thank you. Yeah. [laughs] [clapping]
- 12:59
And it's not-- it shouldn't be that, like, surprising, you know? It's, it's just, uh, you know, multimodal model, take a bunch of inputs, uh, produce outputs.
- 13:09
Um, we, we kind of went further with this. I'm gonna have to jump to... And by the way, the, the, the killer use case for this, if it's not immediately obvious, is turning your daughter's, uh, drawings and stuff into, uh, pictures and stories and piping them all around, right?
- 13:23
Uh, but the, um... Where is this one? This is a good one.
- 13:30
You can also do-- I was playing a lot of Factorio at the moment as, [chuckles] as well. Um, oh, no, this is the wrong one. Hang on. All the way down at the bottom.
- 13:40
Grab this one. And so, uh, the idea of having these, these machines that even include cycles and loops, and that'll just operate forever. Um, so in this one, it comes up with a random pop song,
- 13:54
adds it to a list, feeds it back in so it doesn't repeat.
- 13:58
Asks, "Is this song about love?" Uh, and then sorts it according to, you know, well, again, we're working with language models, so we have a Boolean value of yes, no, or maybe.
- 14:08
Um- [laughs] So we have... [laughs] And, and it, it feeds back around and it, it, it kind of pipes and I can just leave this forever just spending my, my, uh, the credits that Google gave me to, uh, to burn.
- 14:20
Um, and yeah, it-- this is, this is really fun. tldraw computer. It, it got pretty popular. Not, not necessarily as popular as the, uh, Make Real, but it was, uh, it's, it's pretty amazing what you can do, and it really rewards creativity, to put it lightly.
- 14:33
Um, I have seen people using this to, to do actual multi-stage prompting, um, you know, decision-making analysis. And you can imagine this being asynchronous and somewhere up in the cloud, and maybe that's, that's what we do next, where we say,
- 14:49
"Take this CSV of, uh, email addresses of people who've engaged with our product. Email them all. Get a response. Do sentiments analysis. If they like it, you know, do something next, uh, you know, so forth.
- 15:01
Wait for me, you know, text me and say, like, 'Should I really email this person again?' Maybe I say yes." So having a big, long, long-lived asynchronous process, um, that could be run in parallel, this would be a great, great interface for, for designing that.
- 15:16
And everyone seems to get this. Um, when we, when we [chuckles] originally, uh, did this, the creative prompt, the, the kind of the, the philosophy of this project before we-- uh, I went home and prototyped, it was like, I want a computer that works the way that I thought a computer worked before I knew how a computer works,
- 15:34
right? Where you would just have, like, I want this stuff, and I wanna do this to it, and then I wanna take the results and go over here. So that's, uh, that's tldraw computer.
- 15:43
Um, I wasn't gonna show teach, but I will show teach, uh, which is, uh, create a flowchart that begins with AI and ends with engineer. Incorporate existing shapes. Um, when you have a really cool hackable canvas, like an SDK for canvas with, like, a runtime API, um, it, it plays really, really well with other AI tools.
- 16:06
Um, and you can really quickly-- even though these models aren't, like, great at this, um, you can really get it to work with the canvas in a way that is, um,
- 16:19
kinda like a virtual collaborator. Like, you can kinda get it to do stuff. I mean, the demo that I always show and that I'll do really quick is the whole, like, you know, draw a cat.
- 16:30
Um, somewhere on this page is a uni- uh, a pelican riding a unicycle. But I, uh, [chuckles]
- 16:36
um... There's a lot of stupid drawings here. Uh, but yeah, draw a cat, and it'll draw a cat. But, you know, it's, it's doing this stuff not as a, as an image.
- 16:45
It's not painting pixels in the way that, like, Midjourney would. It's, it's doing it as text. It's, like, kind of returning a structure that I can map into, to, to shapes on the canvas.
- 16:55
And so, you know, I can, I can work with them myself. I can correct it. Um, and it can, it can work with my stuff as well. So if I do, like, uh, this, it's, like, orange, uh, and I say, uh, "Make the cat,
- 17:09
the cat blow out the candle." I didn't tell it was, it was a candle, but, uh, let's see if it can do it. Um, I don't think cats can actually blow.
- 17:21
But I don't know that for sure. Uh, [laughs]
- 17:25
uh, this is using Claude as, as the back end. If you wanna know how this works, definitely catch me up afterwards. Um,
- 17:31
yeah, right on. [laughs] [clapping] Hey, and we get smoke as well. That's wonderful, right? Uh, the, uh, tldraw, a lot of this stuff, and, and, in fact, I would say our, uh, our advantage over the bigger companies in this space is that, uh, shitty but amazing is definitely on brand for tldraw.
- 17:50
Uh- [laughs] And yeah, if, if this seems like a good problem that you might wanna work on, definitely talk to me because we have some tools that make it easier.
- 17:59
Um, people build all sorts of crazy stuff with tldraw. Um, this is, uh, Grant Kat's liquid, you know, uh, simulation that's using tldraw as, like, the, the geometric physical in- you know, like, control layer, I don't know, authoring layer on top of it.
- 18:15
Um, companies build really cool stuff with tldraw, like Observables is built with tldraw now. It's, it's incredible. Um, I think we're only... It, it-- not even scratching the surface, uh, of what can be done with this paradigm and these tools.
- 18:31
Please build something amazing. Uh, I got the canvas. We have the technology. So that's my talk. Uh, thank you very much. [clapping] [outro music]