Drawing the Future with AI featuring tldraw’s Steve Ruiz | E1863

Episode Summary

Steve Ruiz, the founder of TL Draw, was interviewed on This Week in Startups about his company's product called Make Real. TL Draw started as an open source project to build a hackable whiteboard engine that could be reused across applications. It gained popularity in the developer community, amassing over 28,000 GitHub stars. The company then formed around commercializing the open source project. When the GPT-3 API with image captions was released, the TL Draw team experimented with using their canvas as the interface to prompt the AI model. They were able to create websites just from sketches of the UI layouts. This went viral as people were amazed at being able to create functioning web prototypes just by drawing. Make Real is built on top of the TL Draw canvas and allows users to sketch interfaces, annotate them, and then prompt an AI assistant to generate HTML/CSS prototypes. The AI model is given the prompt to act as a web developer that takes the sketches and tries its best to build an interactive prototype. Make Real puts the output back onto the TL Draw canvas so users can test it out and iterate further by sketching additional changes. Steve demonstrated Make Real by creating a color picker widget, a timer app, and a stopwatch app just from rough sketches and some text annotations. In some cases, Make Real was also able to generate functioning apps from just textual descriptions without any sketches. The output isn't always perfect, but allows for rapid iteration by sketching clarifications. TL Draw aims to become the "Mapbox for canvas experiences" by providing the core building blocks for developers to build their own whiteboard and spatial computing applications. The company plans to monetize through licensing for commercial applications built on top of TL Draw.

Episode Show Notes

This Week in Startups is brought to you by…

Miro. Working remotely doesn’t mean you need to feel disconnected from your team. Miro is an online whiteboard that brings teams together - anytime, anywhere. Go to https://www.miro.com/startups to sign up for a FREE account with unlimited team members.

The Equinix Startup program offers a hybrid infrastructure solution for startups, including up to $100K in credits and personalized consultations and guidance from the Equinix team. Go to https://deploy.equinix.com/startups to apply today.

NetSuite. Once your business gets to a certain size the cracks start to emerge.  Things you used to do in a day take a week. You deserve a customized solution - and that's NetSuite. Learn more when you download NetSuite’s popular KPI Checklist - absolutely free, at http://www.netsuite.com/twist

*

Today’s show:

Steve Ruiz, Founder of tldraw, joins Jason to discuss how Make Real went viral just one week after a recent funding round (5:35), diving into the debate of creating consciousness with AI (20:41), highlighting tldraw's versatility with multiple demonstrations including creating a stopwatch from simple sketches (24:21), and much more!

*

Timestamps:

(0:00) Steve Ruiz, Founder of tldraw, joins Jason.

(2:26) The story behind tldraw and exploring its origins.

(5:35) Discussing tldraw's business and how Make Real went viral just one week after a recent venture round.

(6:46) Understanding “Open Core”

(7:59) Demos: tldraw and Make Real, including the creation of a color picker.

(12:01) Miro - Sign up for a free account at https://www.miro.com/startups

(14:42) Further exploring tldraw demos using Iterations

(16:18) How multimodal AI responds to different instructions.

(20:41) Are we creating consciousness in AI or merely simulating it?

(21:25) Equinix - Join the Equinix Startup Program for up to $100K in credits and much more at https://www.deploy.equinix.com/startups

(24:21) More demos! Creating a stopwatch application with varied approaches.

(31:21) NetSuite - Download your free KPI Checklist at http://www.netsuite.com/twist

(32:42) The future of tldraw and its potential to integrate across various AI models.

*

Check out tldraw: https://www.tldraw.com

Thank you to our partners:

(12:01) Miro - Sign up for a free account at https://www.miro.com/startups

(21:25) Equinix - Join the Equinix Startup Program for up to $100K in credits and much more at https://www.deploy.equinix.com/startups

(31:21) NetSuite - Download your free KPI Checklist at http://www.netsuite.com/twist

*

Follow Steve

X: https://twitter.com/steveruizok

LinkedIn: https://www.linkedin.com/in/steve-ruiz-61a150239?originalSubdomain=uk

*

Follow Jason:

X: https://twitter.com/jason

Instagram: https://www.instagram.com/jason

LinkedIn: https://www.linkedin.com/in/jasoncalacanis

*

Great 2023 interviews: Steve Huffman, Brian Chesky, Aaron Levie, Sophia Amoruso, Reid Hoffman, Frank Slootman, Billy McFarland

*

Check out Jason’s suite of newsletters: https://substack.com/@calacanis

*

Follow TWiST:

Substack: https://twistartups.substack.com

Twitter: https://twitter.com/TWiStartups

YouTube: https://www.youtube.com/thisweekin

*

Subscribe to the Founder University Podcast: https://www.founder.university/podcast


Episode Transcript

SPEAKER_03: First off, to see how well this worked and how much it cut out, and to watch people who'd never programmed before, never really thought of themselves as folks who can have a creative experience with digital stuff. You know, just try the skids, like for the first time. It was incredible. And yeah, it went really, really viral. SPEAKER_00: This Week in Startups is brought to you by Miro helps take ideas from in your head to out there in the world, with its ability to democratize collaboration and input. Sign up for free at Miro.com slash startups. The Equinix Startup Program provides hybrid infrastructure solutions for startups, including up to $100,000 in credits and personalized consultations and guidance from the Equinix team. Go to EquinixStartups.com to apply today. And NetSuite. Once your business gets to a certain size, the cracks start to emerge. Things you used to do in a day take a week. You deserve a customized solution. And that's NetSuite. Learn more when you download NetSuite's popular KPI checklist absolutely free at NetSuite.com slash twist. SPEAKER_01: All right, last week, Sunny Madra and I demoed a really interesting product called Make Real. It's by a startup called TL Draw. And Sunny was able to recreate the classic game of Pong in just a few minutes by drawing. We were completely blown away. AI and building of products from sketches is generally falls under two pieces of the AI puzzle. You have multimodal mode where you can take images, text, video, you know, code data, and then create output. And then there's of course, writing code. And those are co pilots like the GitHub co pilot and ripplet has one and many other people have them. And so we have just been amazed at how many different facets of AI are coming together. And our guest today is the founder of TL Draw. His name is Steve Ruiz. And welcome to the show, Steve. SPEAKER_03: Hello. Thanks for having me. SPEAKER_01: Yeah. So you saw us playing with your tool. And we were blown away. And so tell us a little bit about your company, how big it is, how long you've been working on on stuff, and what is TL Draw? And then what is make real? SPEAKER_03: Yeah, for sure. TL Draw is a company that kind of grew out of my own open source, I had started building a kind of a hackable whiteboard like engine for myself. Basically, I created a bunch of different infinite canvas type of apps where you could zoom in and zoom out, move around kind of like figma or Miro. And I wanted to have something that I could basically just reuse myself. They're quite complex, and they're not worth building from scratch every time. So I was like, I'll just kind of build all that undifferentiated parts of all those apps, the kind of the middle of the Venn diagram between Miro, Figma and everything. And it turned out that that was a pretty popular idea, that a lot of other people had ideas about building these types of types of apps or building features that felt like Miro or Figma into into other types of products. And it got popular enough, enough sponsorship, etc, that that sort of became the company. And so we have essentially spent the last two years, not quite in obscurity, but kind of in relative obscurity, building this component, this SDK for building whiteboards and whiteboard like things called TL Draw. And we've done a bunch of different demos of how you can plug this into various technologies, or how you might use it as a whiteboard or use it as an annotation layer, or use it as a way of, you know, working with data or something on the canvas. When the GPT-4 vision came out, we also picked up a project originally started by a Figma developer, where they were using TL Draw as the kind of the multimodal input to Chachie PT-4 with vision and saying, hey, here's a drawing of a website, give me back the real website. Now this thing came out like five hours after the API was around, so it was like almost instantaneous, but it was built on top of the canvas, which we had labored over for two years. And so you were able to express yourself very well, drop in screenshots, do whatever you wanted. And we took that and ran with it. The first thing we did, of course, was because our canvas itself is a normal website, like it's a React application all the way down. And that's how we were able to put these websites that you created back onto the canvas, and even allow you to like draw on top of them as a kind of a markup strategy to create a new prompt based on the prompt that you got back last time. And it was just, I mean, I've worked in design tools, I've worked kind of in this sort of like pseudo-programming languages that you might build into a kind of a no-code platform. And to see the, like, first off, to see how well this worked and how much it cut out, and to watch people who'd never programmed before, or never really thought of themselves as folks who can have a creative experience with digital stuff, you know, just try this, kids, like for the first time, it was incredible. And yeah, it went really, really viral. So this TL draw isn't just to be clear, SPEAKER_01: an open source project is very popular. I see it's got, you know, looks like 28,000 stars on GitHub. And stars is basically how people subscribe to stuff. Yeah. GitHub, and 1600 forks. So which means people took the code base and then forked it, which means created their own flavor version of it. Yeah. So this is getting popular in the developer community. Let's do some demos here of, you know, what you're discovering. Sure. Now as a business, you have the open source piece, but what is the business of your company? How do you make money? What's the goal here? Or is it a venture backed business? Or is it a project? Yeah, I should say we're venture backed business. We've SPEAKER_03: raised 4.7 so far. Funny enough, we had just closed an extension round right before this thing went viral. So, and a little twist of fate. And yeah, I, um, we're early. So a bunch of EC's called you right after you close your last round and offered you a massive uptick in your SPEAKER_01: valuation and you've banged your head against the wall. Oh my God, I just need to go viral and get more of these VCs on the line. We have a hard stop at seven for a good reason. Yeah. The business plan SPEAKER_03: is to have this canvas become the sort of the map box of this type of experience. Just reach ubiquity, get everywhere. And in the short term, we're licensing it. So it is open source, but at the 2.0, we're switching licenses. If you want to use this in a commercial product, you know, have a conversation with me, I'll set you up. But yeah, long story or it's a longer conversation. I mean, WordPress does the same thing, right? There's the WordPress opensourceproject.org. SPEAKER_01: And then there's the wordpress.com, the commercial project. Yeah, whatever 40%, 50% of the web runs on WordPress. Some of them work on wordpress.com. Other ones pop up their own servers and use the open source project. Totally get it. I think you're seeing, yeah, OpenCore is like a big, SPEAKER_03: I guess it's a big topic these days in software. And I think for us, I don't know, front end components, this is code you're giving to your users. People tend to like to read it before they hand it off. Explain OpenCore model or costs. For sure. Yeah. So without I'm not a, not exactly an SPEAKER_03: open source expert, nor am I sort of open source zealot. But the, the general idea with OpenCore is that you have part of your product, which is available to anyone with certain restrictions. And those could be like, you cannot use this. You have to use this in an open source project. You can't use this in a commercial product, et cetera, et cetera. And then you commercialize the use for which there's a business case for it. So I think Mapbox is a, well, Mapbox is a complicated example because they've sort of changed their license a few times, but yeah, you have libraries. Another one, right. That, that does it this way. Cassandra, the open source database, SPEAKER_01: a lot of folks have the core and Cassandra is that open source database. We were investors in the company data stacks, which sells, you know, the more enterprise version of it. So let's go to demos, man. Demos are so fun. I'll talk about open source all day, but I, SPEAKER_03: yeah, I mean, it's important for the founders who are listening. It's a, there's a lot of pros and SPEAKER_01: cons to doing it. And the pro is very simply more people are engaged and the con is maybe you give up a little bit of control in order to get more people engaged and more richness. So choose your own venture. Yeah. All right. So let's describe what we're seeing here. You're in a TL draw, SPEAKER_01: which just looks like a standard Figma or any other drawing balsamic envision any wireframe II kind of drawing software where you get arrows and stuff around layers and you're drawing what looks like an app. Yeah. So I have a couple of different examples here. We could take one just SPEAKER_03: to get the shortest point between the here and where we're going. Basically we have a drawing here, a little drawing made up of rectangles and things like that. And it is a, I guess it's a color picker, right? Click to copy, to copy this hex code. You have a slider between orange and pink and a circle in the middle. I'm not sure what exactly that's going to do, but you click on the make real button and you get back a little spinner. And speaking of monetization, we have considered running ads while you wait for this hot thing. Okay. So now it is a 30 second thing, or not just second, but yeah, just for people listening, you've drawn a color wheel. We've SPEAKER_01: all seen a color wheel where you pick the color you want, whether you're in Microsoft word or Google docs or Photoshop. So you've drawn what that looks like. And now AI is looking at that drawing, some language model. And when you said, make it real, it's saying, how would this become code? Am I correct? You know what the prompt is really, really interesting. The prompt is you are SPEAKER_03: a web developer. You specialize in making working prototypes using the low fidelity wireframes that your developer or your designers give to you. You love your designers and you want them to be happy. So when they ask you to make a prototype, send back a single HTML file, use Tailwind styles, pull in any dependencies you need from unpackaged, use any extra code you want, you know, you need JavaScript inside of there, but just try to make it real, try and fill in the blanks, use what you know about applications and user interfaces in order to sort of infer the designer's intent and then send back your best guess. And we send that. We also send picture, a screenshot essentially of whatever the user has selected. So in this case, I drew a little color picker and I selected that. We kind of took the screenshot, the same one that you would screenshot if I did like, you know, copy as PNG and paste it over here, basically send you this image. And we also send, well, it depends what you can do. And I guess what I'll do here as the example, like they did give us back a working little color picture here. What I can do is I can double click into the iframe because again, it's a single page HTML. We can put that on a desktop. Yeah. And because our canvas, which is very unusual and very much unlike something like Miro or Figma or anything, our canvas is a normal website. We can put that iframe back onto the canvas, you know, and you can, you know, rotate it and resize it and move it around and draw on top of it and everything. It's just like a normal thing on the canvas, but it is a working interactive website. So I can double click in and I can move this slider and yeah, sure enough, it changes that color from pink to orange and it gives us the hex code and I'm pretty sure I can copy this. Yeah. And you know, let's see if it, yeah, it gave me it on the clipboard as well. SPEAKER_01: Which is so this would normally be, you know, you have one person who's wire framing a product manager, a CEO, a founder, whatever. And then you have somebody who might do a quick HTML prototype. So you've compressed those two things and you've eliminated, you know, somebody doing repetitive, simple work. All right. Founders always ask me for pitch deck punch ups. And you know what, I got some great news for you. We worked with the team at Miro, the awesome whiteboarding software I've been talking about to create an amazing pitch deck template for founders, which you can see if you're watching the video right now. This is going to help bring your pitch deck from zero to hero, from zero to VC ready. And our founder university participants love this template. We use it all the time. It saves them time and it gets them more meetings. So head to Miro.com slash Miroverse, M-I-R-O dot com slash Miroverse and search for pitch neck to check it out. And if your team is hybrid or fully remote, Miro is so useful for you. It's like an old school in-person whiteboarding session, but distributed and asynchronous. So you can do it on your own time. Miro lets you brainstorm ideas and collaborate on projects from anywhere in the world. When you think Miro, think zero to one, but faster. And Miro is so much more than a simple digital whiteboard. Your team can collaborate on important stuff like research, design, planning, and feedback cycles and faster inputs equals faster outcomes. And we all know product velocity and startup velocity is how your company is going to win. So to access our new Miroverse template and thousands of others, sign up today for a free Miro account at Miro.com slash startups, M-I-R-O dot com slash startups. That's Miro.com slash startups to sign up for free. This can then I guess be published, what would be the next step that you would do with this color wheel if you wanted to incorporate it? Like you need hosting, you need to publish it somewhere. So can I take this little, I'll call it a widget and be old school. Some people might call it an app, whatever. Can I take this and publish it to a URL? Yeah. So it kind of already is. So I can, I have a little, SPEAKER_03: you know, a dropdown here and we have a couple of different things that we can do with this. And by the way, we could also keep going and I'll show you what I mean in a second. One thing I can do is I can copy the HTML to my clipboard and paste it into a file, you know, look at it, edit it, whatever. I can also copy a link. Okay. And that link basically is this website. Ah, so you could open that up in a URL or I could send it to friends. I could tweet it. SPEAKER_01: Yeah, right on. So I have my URL right there and I can also open it in a code sandbox. SPEAKER_03: So code sandbox is a web-based IDE where let's see, I'll close this one. Yeah. Here's our that. And then normally we would have code on the left. Let me give that a little refresh here. Otherwise I'll show you the other demo. IDE for those people listening, integrated development environment. SPEAKER_01: Like replant. So it's just a, basically a browser window where you can write and publish code. So this is incredible. But show me, you said you could iterate. So let's have a little iteration here. Huh? Maybe. Cool. So again, the, the thing that we got back from chat chippy tea, SPEAKER_03: we put it in an iframe. We put the iframe on the canvas. So you can think of it that, you know, it looks like a picture of a website though. We know that it's an interactive website, but we could treat it like a picture and we could draw on top of it. So let's say I wanted to say, I mean, maybe you can give me some ideas here as well. Let's make this full size, SPEAKER_03: full size window, maybe. Let's make our annotations red. I think there's something in the prompt about treating red as a, an annotation. Maybe I want this text that says click to copy. I want that to be like, what is it called? Start case. Sure. And so what you're doing here is you're SPEAKER_01: annotating, you're annotating the mock-up of the color wheel and you're just using an arrow and just writing notes as if you were writing notes in Figma or, you know, any other whiteboarding or design software. Yeah, this is amazing. And you could put in, show me, a more playful font. SPEAKER_03: Oh yeah, yeah, sure. So this is like a really weird thing. What does it mean, playful font, SPEAKER_01: you know? Yeah, I think this is good enough to, to the start. So this time, SPEAKER_03: yeah, I'll do this. Like, use more playful fonts. And I'm just putting that as a text above. Sometimes what I was also useful. Like you would do on a whiteboard. Yeah. What's wild about this SPEAKER_03: and what would is kind of like the running theme of all this multimodal stuff is that like, yeah, just pretend you're sending this to a person. Like what would you use to send to a person? The, the other things that, that are funny is that if you encourage it or threaten it, either one kind of gives you a better result. So like, you know, you can do it, go for it. Isn't that the weirdest thing about these LLMs is if you keep giving them encouragement, they keep trying. SPEAKER_01: So I don't know if we're, what's that word, andromorphizing when you kind of, anthropomorphizing, anthropomorphize, like, are we anthropomorphizing where we're projecting into these language models that they, you know, feel good with positive reinforcement? Or is it just that when you give positive reinforcement, it does a couple more iterations? I don't know. But you know, when I tell it, add more puppies, or more rainbows, or make it even more American, when I was playing with Dolly the other day, it would just come back with something that was even more delicious. I did like make me pasta spaghetti. And I said, make it even more delicious, make it absurdly more delicious. And when I did that, it just kept adding, you know, more basil and steam and everything to my plate of pasta. The image was pretty nice. I think it's Yeah, I think they're SPEAKER_03: kind of like meeting us halfway there in terms of the the treating as human. Okay, so we have this website, we've drawn on top of it, we said like, okay, make this button, capitalize the first letters of all these sentences, make the thing the full height of the window, etc. Use a more playful font. And we've drawn that kind of as markup on top of the website. And then we selected all that markup, including the website itself. And we use that as the new prompt to make real. So we sent that back. And we got a a couple of things, it ignored a couple of things. It got a few things wrong. And a few things, right, the pink thing still works. The font is certainly more playful. You know, it is it's rounded edges, etc. It lost our, our clicked copy button. That's interesting. Okay. And it ignored all my comments about start case and casing. So we could we could draw that click to copy button back in there. Amazing. And keep going. But basically, like a lot of employees, SPEAKER_01: they may not listen, is what you've proven. As a manager, you may ask your employees do something, they may be tired, they could have gotten in a fight with their spouse, they have a sick kid, and they forget to put the button back in. And you got to be kind to the things happen, you know, SPEAKER_03: SPEAKER_01: yeah, AI overlord, maybe they didn't have a cup of coffee, maybe tell them, hey, get a cup of coffee. That's true. That's true. Be kind to your AI slave. The fun part about this is that like, SPEAKER_03: and I guess I won't go too far with this one, because it seems to really insist on Oh, wait, it is copying. It's just an invisible button. Very, very strange. Oh, what the heck is that? Look, it's there. Yeah, it's there. Oh, maybe the font thing SPEAKER_01: threw it off. Maybe it's my font. Is it there? See, I didn't get it is there. It is. Look, it's a this is kind of weird. Yeah. So this is where, you know, we're still in early days. I don't want to say hallucinate. But you know, the the understanding and reasoning that we project into language models, is, you know, some people, I've heard some people call it a parlor trip. And then I've heard other people say it's reasoning. And so somewhere, you know, between those two is the reality. And I think everything that's been done in web design, has been incorporated into these models, the entire corpus of open source has been put into these models. And so, you know, in every blog post, medium post YouTube video, they're all getting incorporated into this. So I guess in a way, it is a parlor trick that it I digested all this stuff. And when SPEAKER_01: you're making a color wheel, it knows, you know, to restate what color wheel information it has, but it is kind of reasoning and it wants to try to figure out what is playful, right? Or what is more delicious mean for spaghetti? What would make spaghetti more delicious, and it's like meatballs, more sauce, you know, and because it might have found a document that said, if you want to make this even more delicious, add more sauce, parlor trick, or actual knowledge. I mean, I don't know how you think about this. Let's get philosophical for a second about what's going on inside of models. Do you believe we're recreating consciousness and how the human brain works? Or that we're simulating that on silicon? What does your gut tell you? For me? Yeah. SPEAKER_02: SPEAKER_03: Curious. This this feels much more like having worked with creative tools for for years and years. Like you come to know, those creative tools, not not as, you know, intelligences, SPEAKER_03: but as like patterns as, as behaviors that you kind of accommodate what that tool can do well, and what that tool can do poorly. And you kind of steer towards those things that can do well, that's a part of why, you know, good tools are really important, because they kind of expand, not necessarily those things that you can do, but those things that you can do with the least amount of friction. Okay, cloud computing has revolutionized startups over SPEAKER_01: the past decade, you know that but the reality is a fully cloud based solution is not right for every startup. Sometimes a hybrid solution is your answer. Like if you're working with sensitive data that can't be trusted to cloud or if you need to connect to multiple cloud providers at once, or maybe you just want a much more cost effective solution. In that case, you need to check out Equinix. Equinix metal will give you direct access to physical servers, but you still get all the benefits of the cloud. So no need to rack and stack your own servers. No, Equinix provides on demand infrastructure in over 25 major cities. And here's the best part. They have an amazing startup program for you. The Equinix startup program offers personalized consultations and guidance from the Equinix team. And of course, you'll get up to $100,000 in startup credits. So here's what I want you to do. Head to Equinixstartups.com to apply. And when you apply, James from Equinix is going to reach out to you directly. That's Equinixstartups.com to apply. SPEAKER_03: ChatTPT, all this type of stuff actually feels very, very familiar to me. Just having worked with creative tools. And maybe it's not just creative tools made, but those might just be the ones that I've worked the most with. In this case, we have input and output and it seems to be misinterpreting the input as different output. Fun fact on this, I did a check to see what image are we pulling out of this thing. And funny enough, the colors, maybe it was pulling out of this one. The colors on one of these buttons was, yeah, exactly. The fonts weren't loading correctly and the colors weren't loading correctly. So there was no information for it to work from. So in that case, it was a failure, not necessarily of the model working from correct input and producing incorrect output. It was working from, in a way, like in incorrect input. It just, we didn't know it. And that feels very familiar for having worked with creative tools. SPEAKER_01: Well, and I think you're correcting your interpretation of it. We may have over indexed on the magic of our brains, and not realize that like a lot of what we do is pattern recognition. And we finish each other's sentences. And when we make jokes, we have an archive of what's funny from a lifetime of hearing jokes or watching comedic comedians, etc. And so a lot of what we do is, you know, memetic, you know, repetitive patterns. And we may believe that we're more creative when in fact, we're more pattern seeking and pattern identifying and regurgitating machines. We just prefer to call it creativity, right? Yeah. Let's do one more demo SPEAKER_01: here. You have some more down here. So here we have, let's see, I'm gonna try and pick one that's SPEAKER_03: a little bit harder. Maybe the so one of the I guess it's really up to you, Jason. Yeah. SPEAKER_03: I like this one. This is a stopwatch, right? Is that a stopwatch? Let's do the stopwatch SPEAKER_01: app because everybody knows about this. In this case, I have on the screen a really simple image SPEAKER_03: of a stopwatch. And then I also have a state chart, essentially like a state machine that I've drawn talking about how this thing should work. And there's even a note there saying like, use this to determine how the state UI should work. But this is just the state chart. In other words, don't don't render this. So come up with your own. Yeah, got it. Yeah. And I could even SPEAKER_03: kind of like make it just to go back to what you were saying. I'm just going to send a prompt where I just do a box and I write the words kitchen timer here as the prompt. So I'm going to put this one over here. And then I'm going to send only the user interface of the thing that I drew. And this user interface looks exactly like your timer on your iPhone where it has, SPEAKER_01: you know, admin, it's ad-set, start, stop, reset, just a standard, you know, egg timer, let's say. Yeah. And then I'm going to send the UI and the state machine together. And then just for fun, SPEAKER_03: I'm also going to send just the state machine. Okay. So we're giving it, this is very interesting. SPEAKER_01: So you drew the UI, the state machine basically says, Hey, click this button and it runs, it stops. And it's, you know, it's kind of think of it like a flow chart of what's supposed to happen if you're not familiar. Yeah, precisely. And so here we go. So what you're showing us is, hey, you can give a prompt, the UI and the state chart, the flow chart, or you can give just a flow chart or you can give just the state chart, or you can give just the image. And we're going to see all three outputs. Wow. This is exciting. Yeah. So it's got like either or plus a little bit of extra instruction. Okay. Let's make it real. Yeah. And what's fun is that this, SPEAKER_03: SPEAKER_02: SPEAKER_03: these prompts, by the way, don't have the words kitchen timer anywhere that has to be inferred from here. Whereas this one, all we've given it is kitchen timer and nothing else. And what's fun is that, and what you'll see sometimes like people doing demos where they draw a calculator and then they click, you know, they write calculator on it and click whatever make real and it shows a calculator and that's, that's pretty cool. But also sometimes you could just send the calculator or just send the word calculator, because as you said, it knows what those things look like. So in this case, we have a kitchen timer. I can reset it. I can start a topic. I sent it only this only the prompt kitchen timer here created literally the code and app widget, whatever you SPEAKER_01: want to call it. HTML basically, which start, stop reset and it's functional. Hey, yeah. Pretty great. It works. Wonderful. Now we have the one where we only sent it the, the user interface. SPEAKER_03: So we didn't give it any information about what it was. We didn't say this is a kitchen timer. We didn't say like, these are what the buttons should do. And here we got that pretty well. The question is like, does this do any work? Yeah. And so in this one we had plus minutes plus seconds. So you SPEAKER_01: could set a one minute and 42nd timer and you could stop and start it and reset it. If you hit the reset button, does it reset? And it does. Okay. So in both cases, it did what it was supposed to do. It adds 10 seconds rather than one second. So it's kind of, I wonder how it made that SPEAKER_01: decision. It probably is. There are other timers that do it in 10 second increments that are found on the web. It was part of the language model corpus. And then here's the one where we've SPEAKER_03: sent it the state chart and the user interface together. Okay. And in this case, the user interface looks kind of like a little bit or the website kind of looks like a hybrid of these two. Wow. The first two you're right. It has been blue tiles and it decided that reset should be red and SPEAKER_01: start should be green. And that is what we do in the U S green means go red means stop. Yeah. But it doesn't work. Okay, great. It does. And then here's, I forget which one we did together. SPEAKER_03: One must be just the state chart. Cause it has no design. Exactly. And let's see if this works. This works correctly as well. Wow. This is unbelievable. It even tells you what the state is, whether it's running, whether it's stopped, you know, whether it's whatever. So I think the fun part about this is not, not only just the, the wow of making things, you know, websites, working websites, and it is very addictive, especially when you get into these long iteration chains, because you are able to push it into making things that are quite complex. If you go to our Twitter at Twitter X, whatever at TL draw or Twitter, X.com plus TL draw. There you go. There you go. Dozens of these things where people are like, yeah, we've made this game with my kid or I made this thing with my you know, with my project manager. Yeah. You're able to get like, push it into really, really complex stuff and tweak it and modify your, your thing or whatever. But it's also just this amazing playground to explore multimodal prompting and to, to have a way of doing what we just did, which was run four prompts simultaneously, you know, using slightly slightly tweaked things. So I think the canvas like teal draw just in general is just going to become a, well, my hope for it is that it is a great environment for exploring some of these models. So many ways to go with this business. What do you think you're going to do? Just make it SPEAKER_01: 25 bucks a month and call it a day and just so you can get a thousand people or a million people to pay that. What's your plan? Yeah. What are you thinking about in a business model? SPEAKER_03: So teal draw.com is what's our little demo, essentially for teal dry. It was like a free, it still is a free white whiteboard. There's no login. There is collaboration and the collaboration is really, really good. And we have like 8,000 people a day using it like uniques, which is wonderful. I don't really want to be in the business of doing like a SAS product and whiteboarding. I think the incumbents, they're pretty, pretty happy with where they're at. And I don't know, I don't think the world needs another Miro, but the world might need like 10,000 more Miro's or little Miro's. We love Miro, a sponsor of our show and we've used it. SPEAKER_01: Great, great, great product. But you know, people want to make things that Miro is not going to SPEAKER_01: make. Right. So Miro could be your, you know, your standard platform, but you know, you may want to do other things. And I was going to say there was a time where like every, you know, if you saw SPEAKER_03: a Kanban board, people were using Trello. Right. Kanban boards are everywhere. It's just like a really good paradigm for a certain way of working. I think the canvas is the same way. There's never really been a good way to get started unless the canvas was like your only thing. Yeah. And Teal Draw sort of is feeling that. Okay, your business gets to a certain size. And we know the cracks SPEAKER_01: start to emerge. Things that you used to do in a day are now taking a week or a month, you have too many manual processes, you know that. And you don't have one single source of truth. If this is you, you should know these three numbers 37,025, one 37,000. That's the number of businesses which have upgraded to NetSuite by Oracle, you know, NetSuite, it's the number one cloud financial system, streamlining accounting, financial management, inventory, HR and more 25. NetSuite turns 25 this year, that's 25 years of helping businesses do more with less, close their books in days, not weeks and drive down costs. One, because your business is one of a kind. So you get a customized solution for all of your KPIs in one efficient system with one source of truth, manage risk, get reliable forecasts and improve margins, everything you need to grow all in one place. So here's your call to action. Right now download NetSuite's popular KPI checklist designed to give you consistently excellent performance, absolutely free at netsuite.com slash twist. That's netsuite.com slash twist to get your own KPI checklist, netsuite.com slash twist. SPEAKER_03: I hope people take this and run with it. The business plan, or at least what to do with this is much closer to empowering those dozens, hundreds, thousands of folks who see this and say like, wow, this is great. But instead of using drawing and text and screenshots and whatever, in order to make websites, let's do full stack apps. Let's do Python configurations or something like that. Like, let's do back end stuff. Or let's do literally any design output, any technical output that you can imagine that has some way of rendering it visually as the input or just take so many shots of text. Who cares? It's pretty good. Back to the business model. What do you think? Is it is it like freemium? Like maybe get a certain SPEAKER_01: amount of features or, you know, cycles and then hey, you know, please upgrade or maybe the collaboration mode, you know, is the mode where you start paying, you can do bottom up, like three people can collaborate on something. But when you get past that you got to have somebody's got to have a paid account. What are you thinking business model wise here? SPEAKER_03: Yeah, I mean, those are essentially all those those features that you described kind of fit into the teal draw as an end user product category. And we're still thinking about this as a essentially developers tool, not infrastructure product. Okay. So I would, I mean, we might need at some point to be like, well, we're using an API key. We want to make this available to everyone without having to figure out what an API key right is right now you have to enter your own pushes. Sure. So we're gonna we're gonna, you know, make it part of like a premium, premium offering of some sort. Where do we wind up with, you know, all these different models on SPEAKER_01: hugging face. And then you saw Google's, you know, new offering from DeepMind, which was super impressive. Chatgpt for maybe chatgp five comes out early. There's like 20 different models that you could probably use to accomplish what you're accomplishing. I'm assuming you're using opening eyes model to start. So it's really the only only set of eyes that you get. At least at the moment, SPEAKER_03: I know that the team at Google are have been poking around this repo. So my my hope is that we see something with Gemini fairly soon. My real hope is that teal drop becomes kind of like the, the battleground on which these different models can really, really compete is like, you know, how does this prompt do when it's when it's up against or something else, you could be independent SPEAKER_01: of the model, you build your software, when you say make this, you could say make it with Google, Microsoft, open AI, rock, whatever it is, or you could say make it with all four, and then just see how they all do if you have keys for all four. And then, you know, if you want to abstract it, I could just give you 100 bucks a month, and you give me a, you know, 1000 renders, and I pay 10 cents a render and who cares. And I just you abstract that and you show me all five. And then you could have another language model say which of these five did the best job in your estimation? Have you tried that yet? Because we had those four timers. Have you ever had a language model say which one of these do you think would be the best timer to give to consumers? SPEAKER_03: No, and my god, is there so much more that we could do? That's what I'm thinking about is like, I'm always asking, well, what's the next step? Yeah. SPEAKER_01: And the next step here is, can somebody vet this and make sure it works? Well, why don't you have a language model, make sure it works and then tell the model that got it wrong? Hey, this doesn't work. So that second tier prompt, the third tier prompt is kind of interesting, right? And this is where you get into agents, right? And so I am so impressed by what you're doing. Everybody go check out TL draw x.com slash TL draw, type TL draw into what you're doing. How many people you got to the company now? This is an early stage charted razor series. Yeah. Six, seven going on SPEAKER_03: eight. Yeah. All right. All right. Well, maybe you got to keep a slicey poo for your bestie J Cal SPEAKER_01: to make a little investment here. I may need to slide a little slice. There's gonna be another round. Okay, this year. There's always another round. That's what I tell folks. And just, you know, if you got something interesting and you need my help, save a slice for Jake. Steve, great job. Really engaging. Fun stuff. Where are you based? I'm curious. Is it a remote team? Oh, you're based. Oh, right. It's late at night. Living in London. Yep. Yep. Beautiful place to live, huh? Make money in America and tech and then spend it in Europe. That seems to be the best brother over here. Yeah, it doesn't really Yeah, I just just bought a $47 birthday cake that was like the size of a small personal pizza and I I felt poor for the first time in a long time. I SPEAKER_03: SPEAKER_01: was like, Oh my god, I'm so poor. I can barely afford this $47 for a cake bra. What I was I literally said to myself, how much would it cost to bake this and I came to the conclusion it would be $6 to bake it like to this specification and maybe one hour of time I was like, wait a second. It's worth it though. I you know, this is an okay. This is an okay. Good cake. It wasn't a great SPEAKER_01: if I'm paying 47 bucks. It better be world class. All right, Steve, great job. And hey, listen, as you make progress, we'd love to have you back on the on the show. The story is just getting SPEAKER_03: started moving fast. Yeah. All right, brother. We'll talk soon and we'll see you all next time SPEAKER_01: on this week.