Exploring Bolt: Rapid App Development with AI-Powered Templates

[00:00:00] Jason Hand: It's a Monday, so we're back at it with AI conversations. 

[00:00:03] Ryan MacLean: It. Yeah it's like the advancements of Gen AI seem to never sleep, unfortunately. So I did watch a little bit of news over the weekend, but I might have missed some announcements or something. I realized there's new chat g BT models that I've yet to play around with.

I'm not sure if you have but I'm playing around with some other tools. I've been playing around with Bolt, which we'll get into in a little bit. But is it worth doing a recap of what we covered last week? Is 

[00:00:24] Jason Hand: that gonna work? Yeah, I think in general it's probably good for us to just.

Least touch on what we talked about in the previous week so yeah, what absolutely. What did we talk about? 

[00:00:31] Ryan MacLean: That's a good question 'cause I forgot. So let's pull it up here.

So just to reiterate, this website that I'm showing now on the shared screen is ai hyphen tools hyphen lab.com. And then last week you can see that Jason uploaded, , the recording of last week. So we were talking about. A little bit about Cursor Rules some about Cursor Rules, and we were talking about the IDE landscape.

And I, I feel like this is one of those soapboxes, I'm gonna keep carting out because there are a bunch of new IDEs or ways of working with code. This [00:01:00] seems to be one of those. Gen ai I don't know if you'll say it's like a killer app, but it's pretty close. Like it actually does help quite a bit in terms of boilerplate coding, that kind of thing.

And as a result, there are a lot of tools, and we've talked about a few of these now. So we've talked about. Cursor. We talked about Claude Code, we talked about Windsurf, that there's a lot going on. We touched on MCP little bit, I believe. Yeah, a little bit prior to that as well. Hey. Yeah. Hey, 

[00:01:22] Jason Hand: you know what, I, you just gave me an idea.

This might be a good time to actually point out a feature, a new feature of this website. Oh, sure. Yeah. What do you got? If you go to the observations, little bubble up in the top, oh shoot. Do I need to start adding stuff here? This is probably on me. Sorry. No, it'll, I feel like I just came up with 

[00:01:38] Ryan MacLean: one.

My bad. We'll 

[00:01:38] Jason Hand: go into this in depth in another time. I've got some AI that's helping me build this website in real time. Taking most of the lift off. And if you scroll down just a little bit there, you'll see tools covered. Oh, there you go. And as you were saying, we've talked about Windsurf, we've talked about Claude, I was like, oh yeah.

And if you just come over here and click on. Whatever one you want. It should filter just below this and this. I know this isn't the [00:02:00] best ui, I gotta come up with something better. That's so bad. But this will tell you which video or Yeah, which video we did that specifically was talking about that tool.

[00:02:06] Ryan MacLean: Very cool. 

[00:02:08] Jason Hand: And then similar to at the below or below, that is a little, keyword type of thing back on the observations page. At the very bottom, it's another little just way to filter the data or filter the episodes that we go through. So I've got it set up to basically show the, the most popular terms used in our conversations and.

Yeah, so 

[00:02:28] Ryan MacLean: anyway, this is super, I do have you ever seen those word cloud kind of things? Now I'm not a big fan of that that visualization. 'cause I find it a little bit confusing to go through and do it. But even just having the top 10 topics you've talked about, because we have in fact talked about Python and APIs quite a bit.

But maybe just in, in passing. And I wonder if it's worth me thinking about that in general now. Yeah. Looking at these as opposed to a hugging phase or like a warp terminal, like a product base. I wonder if there are some trends in here that I'm forgetting about. Cursor Rules is another one. Ones where we've got Windsurf rules and Cursor Rules, but I think guidelines for [00:03:00] what we're doing are pretty interesting.

Awesome. I like this. 

[00:03:02] Jason Hand: Yeah. Yeah. Anyway, just wanted to point that out 'cause Yeah I felt like you know it. Right now we're up to I think this is episode 13 or something, but. Assuming that we continue moving forward here, this, these numbers will continue to grow and there'll be just a lot of information on this site that's gonna be harder to find.

Absolutely finding good ways to filter and sort and. Search. This is another thing too, I was thinking of when you, we were talking earlier about dictionaries. Yeah. 

[00:03:26] Ryan MacLean: Sorry. It came to mind as well. I completely forgot about, because this is important we're using a lot of words here that, that are new to at least new to me, and that this is ever evolving, emerging.

It feels like I'm always learning something new and I just, I scroll by one here, cross country B laws, which I have not heard of, for example. I have, there are terms in here that, that are new to me for sure. 

[00:03:44] Jason Hand: Yeah. And to be completely transparent, I. Forget which model. Probably Sonnet 3.7 helped me put together this dictionary.

Fantastic. I just basically asked it to put together a, entry level LLM dictionary that I can use. And anyway, that's where we're at on this. Yeah, I didn't [00:04:00] mean to derail us there on just a little, you're good track of what we talked about last week, but but one of the things we did talk about, just briefly was Bolt, we threw something at it.

In the IDE conversation, I know that you've got some more experience with Bolt than what we showed off there, right? 

[00:04:13] Ryan MacLean: Now I've been paying for Bolt for a minute At full disclosure. Somebody had asked me, I think maybe two months ago to look in sort of these new, what we call them I wanna say like a vibe coating, like recipe builder kind of thing. There's a few of them out there. There's Rep Lit, V zero and Bolt are the ones that I've been playing around with 

Essentially, imagine an app where if you go in New Start Fresh, what you'd be doing is giving it like a quick prompt to build an app.

Now I'm showing off this is like the, the cake that's already been baked, if you will. So we, we do have one that actually works, which is cool. But I'll, I think what I could do is just go into, if I can here, pull up the sidebar. Yeah, go ahead.

[00:04:47] Jason Hand: For those of you who didn't see Bolt last week or see us, like it is a completely browser based online experience.

Yes. It's not a, it's not a downloadable IDE. 

[00:04:55] Ryan MacLean: Yes. Sorry. This is full screen on a browser here. We'll see if I can. Pull this out. [00:05:00] So this is just on bolt.new. Once you get started it comes to this page here, and I think we might have mentioned a little bit about these little bubbles here. So what I was doing prior to today's meeting was I just went through this, build a mobile app with Expo.

'cause I've never heard of Expo before. In fact, this is the first time I've heard of the framework and I know it's gonna be JavaScript, people laughing, but honestly, I'd not heard of this at all. This not fresh to me. 

Okay. So yeah, all I was saying is I clicked on this little chicklet here just to get like a, an app going and I can click on one of these as well just to show what it looks like in an update.

It'll show what other ones do. So Astro, for example, I think we talked a bit about uv, and I think UV is a tool that came out of Astro, but what we can do here is if I click this, it will give you like a starter prompt that'll actually start building an app. And this takes a while actually, and I say this with like when you're starting to build an app, building something that just says "Hi from Astronaut" is great, but actually building a full app takes a little bit longer than this.

That, and that's not to discount Bolt or anything like that. It's more about those [00:06:00] little pills that they've got. Or actually to get you started quickly now if I get a full prompt and say Hey, build a clone of some website that you're used to. That might take about five minutes. To get started with one of these is pretty quick 'cause I think it's just pulling something up from StackBlitz.

But then from here you can start playing around with it. So this is the preview window, but you can also go into this code window here and through code. What you can actually do is just like an IDE start playing around with the code that you've built now. I built a sample app here, and this is just, hello from astronaut, that kind of thing.

You can view it in the browser if you want, or sorry, a separate tab. You can start pulling into responsive mode and I'll talk a little bit about like app preview mode as well, if you're trying to build an app for iOS or Android. And then we can also go full screen. So if we want to look at this, we could start looking through the blog itself, figure out what's going on.

So we've got a blog post here. First thing is we might want something like authentication, maybe some users, that kind of stuff, but 

So we've got something set up. We've got some "Lorem" of some text here pretty quick. So for me to get started with something like this, let's say I [00:07:00] went to GitHub. I scrolled into the releases page and got a zip file and downloaded and unzipped it and got started, maybe uploaded a browser and then started editing it, that kind of thing.

I feel like this workflow that we've just done is actually quite a bit faster there, but all that is just opening up something that's pre-cached in it. Now I've got an up running here. Sorry, I'll go back a bit. Oh, I had an up. Let's let's get outta this preview mode. My bad. I had an app running over here and all I did we, we'll start from the top here.

So all I did was say start an Expo app that does translation of English to Japanese text. And then I said, please use Furigana in order to do ana is kinda like a pH phonetic, way of pronouncing Kenji. So the more difficult to write Japanese characters. Now full disclosure, it didn't actually do that, and I'll get into why here in a moment, but. Basically, one of the problem was in terms of the prompt that I gave, it could have been better.

So I didn't actually give it the prompt that said Hey, when you're translating, please use a translation [00:08:00] service or maybe an LLM. And one of the first approaches was to create a, basically a lookup table. So a bunch of English on one side and Japanese on the other. So if I typed in, I don't know, church or something like that, it would actually give me what it had in its lookup table in order to do it.

For these, what I'm going to say is can you change the color?

And this should be pretty quick. So there's a green in the front UI that I can show you here. Oh, there's actually no green in here. Sorry. I thought it was 

[00:08:33] Jason Hand: green. Is actually blue. Just before, we'll see what it goes before. I wanna make sure I didn't miss something. You scrolled back through the history of the conversation.

Yes, but it doesn't take you all the way to the beginning. 

[00:08:41] Ryan MacLean: It did not seem to have that beginning prompt that I had in, in fact, that's exactly what I was looking for at the top. 

[00:08:47] Jason Hand: But that's the one you threw in like the very first one when you're on the main and it's got the long form field there. Okay. So that seems to be not. Being pulled into the conversation, which is, 

[00:08:59] Ryan MacLean: I thought it [00:09:00] was, I felt like it was just I scrolled past a buffer or something like that. Just because normally you can show that, that initial one, and I'll go into one of the other apps that I've built in a moment, but I thought you could once this is done going through and you can see here, so I'm using the pro one, so I've got 10 million tokens.

Today I used about a million sort of building out this little demo, just as an example. And I'm not gonna say every app's gonna take a million. This one's a little bit more complicated because the prompt wasn't great in the beginning. I. But assume it will take about half a million to get something working is what I've noticed.

And again, this may increase or decrease depending on the model used in the backend, but as far as I can tell by default, that's where it would land. And then a lot of this, so what we're doing here, I can deploy this off to Netlify or I can just download the code if I want to, then. Take this and pop it into Cursor or something like that.

But what I found is pretty good way to start with some of these frameworks and get like a rough idea really quickly. In fact, I found that it's a little bit faster than how fast I'd be in something like a Windsurf or a Cursor, and I think that's because of those [00:10:00] starter templates. So going from the starter that works and then adding things onto as opposed to starting from scratch.

Now I believe this is close to done here. I think it's just starting it. Yes, it is in fact. And then once this is done we should be good to go. The other is I did add a ChatGPT environment variable in here. Once I told it, Hey, we should be using an online service to translate we could use any model.

Honestly, I feel like ChatGPT, Anthropic, we should be able to find a model that can translate to Japanese. This is like a common gen AI tool. 

[00:10:31] Jason Hand: Yeah. That was something that came to mind for me when we first chatted about this. Is. I wonder what models are the best ones for this particular use case?

[00:10:42] Ryan MacLean: Played with them quite a bit. The one that I've been using was, I think it's Aya from Cohere. I. Is the one that I had the best luck with. Okay. But there are certainly different translation models that are better or worse. But Aya is what I was using with Gradio, for example, to, to build a small translation app.

Now, this isn't one of my [00:11:00] sample prompts or anything like that, but it is one I've asked quite a bit because it's a common problem. So I can translate from English to Japanese, no problem. And then the problem is I can't read the output. So translating from one to the other is fantastic, but if you can't pronounce it, it might be an issue.

If you need this. Say the word for example, or another alternative way around this problem is to have a play button. So maybe if you've got things in Japanese language, perhaps what you could do is give you a pronunciation helper, like on Wikipedia or something like that. Anyway, just to explain the problem space.

Yeah. Now this did add what we wanted, but I don't think it actually started, so I'm just gonna go in here and see if we can start again.

Okay. It was missing something. Now I don't believe this works. So you can scan this QR code if you want to, but this is how Expo will actually allow you to bring up an app on your phone, for example, if you want to see a preview of what's actually happening, let's try it. Yeah. I think it might be invalid, but No.

Yeah. But it 

[00:11:55] Jason Hand: doesn't, just the 

[00:11:56] Ryan MacLean: invalid URL. Yeah. 

[00:11:57] Jason Hand: No usable data found. 

[00:11:58] Ryan MacLean: Yeah. I think that's standard [00:12:00] and it's just a, like a boilerplate placeholder as you're testing it out. Okay. Now there are a few more problems in here as well. One thing I wanted to show, so one of these problems, so it said in the console what the issue was, so like it needed a module, which I added.

No problem. One of the things that's nice about Bolt is it will attempt to fix problems. So I can just hit attempt to fix and it'll go through whatever it saw previously. And it's not like YOLO mode and Cursor, but it's a little bit it's similar to that in, in that it will find the errors.

Think of ways to fix the errors and then approach fixing the errors for you. It can take some back and forth just to figure out what's going on. In this case, it looks like it introduced something that was newer, so newer dependency. Also, I didn't have to use yarn earlier to install packages. I'm not sure if we're, we've changed package managers perhaps, but some of that stuff can.

Yeah. So there's no entity for the yarn package, for example, here. Yeah. Yeah, that's what I thought it should be. NPX Expo install as opposed to 

[00:12:54] Jason Hand: yarn. I like that. I don't know even know what it does, but I like that they give you the option to discuss problems. I'm [00:13:00] guessing that's just a little, 

[00:13:01] Ryan MacLean: in fact, a lot of times when you get into something that's a little bit complicated like this, that's what you need to do.

Is actually discuss a, like a plan of attack and then try to see if that works. So in this case, 

[00:13:11] Jason Hand: 'cause I, a lot of the tools that I've played with so far, like I, I feel like I'm becoming a stronger developer in general because I understand when things don't work, I'm not just feeding it to a model and it just fixes it, blindly and moves on.

There's a lot of, even if it's not this discussed problem button, using Cursor, using Claude it, it always tells you. Like what the problem was and then what it's gonna try to do to get it, get it right the next time. And it's just been a really nice experience to learn new things.

[00:13:39] Ryan MacLean: Totally agree. And if anything through all of this, like maybe this code isn't that important to me. But what I got is that there's actually, the library is using, is called Kudo Shiro. It's, it means black and white and it actually has all of the ingredients of what I need in the library. Nice. And I think the main thing is like the learn, the learning or learnings I [00:14:00] guess from this is that there's a library I can use in JavaScript that kind of handles most of the use case.

Can handle the display of Japanese characters in all the languages can also figure out if something has kanji and if it has kanji, if it needs Furigana. So that's all in the library, which is fantastic, which makes it easier for me. And again, it's not that this code is throwaway or anything like that, but the approach that it gave me, I think is more valuable than anything else.

Now, so it gave us our plan here. So it says. Yeah. Now it's saying that we should move to Yarn, in fact whereas before we did not. And I think all we need to do is actually just start it. So I'll see if we can do that, is what it's actually recommending. We'll see if this works. Okay. And it's building our app.

Let's see if the build works, which is what failed last time. If not, I can show an older preview. Okay. It didn't in fact work, but we'll go to the app that it built and I'll talk about what the problems are. Okay? So in this one. What it's using is an expert system, so it's got like a lookup table of English and Japanese [00:15:00] values, and it'll pick one from the left and put on the right.

So it would be like a, hi, my name is I believe. Is one of the ones that was pre-canned. Oh yeah. And now it's saying that it's, so some of the issues here are like, this toggle doesn't actually work, so it's still hitting OpenAI. The other thing that I noticed is that this dark mode wasn't working in the beginning, so I had to talk to it to get that working.

But basically imagine a system here that will translate and give you a response kind of thing. It does look like it's failing right now. So 

[00:15:28] Jason Hand: look, let me, I think I understand what's happening here. You're, there's an error there. Yes. And it's basically like you're out of budget. For either the bill, the billing that you've put in or for up for the ChatGPT model, you have chosen.

And, but the app, you've got a little toggle button to turn it off. And what would it use if it's not using, 

[00:15:46] Ryan MacLean: it'll use that lookup table, which is terrible. Please. I build a translation system with an expert table. 'cause you need to basically have a dictionary in your application. Which is fine actually, if you want to do something offline, that might be a good approach.

Or if you didn't want to use [00:16:00] ChatGPT, maybe you'd want to use something like five four is pretty good offline for translation or, if you've got memory, something like Cohere's Aya, which I think needs about four gigabytes. So on flagship phones for example, I think that'd be fine. Or actually most Android phones would have that much memory.

But I think it depends on the iOS phone that you're using. 

[00:16:16] Jason Hand: And you've got your keys hard coded in. There's not like an interface where somebody can put in their own keys. YY Yes. Good. This is a demo app. 

[00:16:26] Ryan MacLean: Good point. Pointing that out because that, that is the key. 'cause I think we talked about it in an earlier episode.

One thing, let's, so you can connect this to Supabase, for example. Yeah. And one thing that I've done in the past is hardcode my Supabase key. I'm learning that in the front end world, this is the bad idea. So what you should probably do is have your users bring their own key, mask it and store it in the app.

Securely is probably the better approach here as we're testing on a web app. Let's say that I gave it my dev key for open ai, even though it's not the case, but that's what you probably do is like an unrestricted key. Or maybe you're even using like Ollama [00:17:00] locally in OpenAI compatibility mode.

'cause it looks like OpenAI if you squinted it and just use that as like your endpoint key. The prompts are gonna be a little bit different in Ollama, but you could do something like that. So let's pretend for a moment that this is the dev environment. And we're 

[00:17:13] Jason Hand: pretending this is. Just for you.

You're solving a problem just for yourself. Exactly. So it's not for other people to use. Exactly. I think, but 

[00:17:19] Ryan MacLean: security is important is all I'm trying to say. 

[00:17:21] Jason Hand: But it also seems like you could probably go back over to the conversation and say, let's add a few other models in here where I have, I've got keys for I'm not, I mean, I'm not advocating you do that necessarily right now, but I think that's, that would be my next step.

If I wouldn't want my app to fail because I don't have enough, credit in one, and if I could get it to roll over to another one when that happens. That sounds absolutely. A nice thing we talked 

[00:17:46] Ryan MacLean: about was OpenRouter, right? So I feel as I'm starting to build a sample, quote unquote chat apps, as I'm building more and more UIs, just to see what that interface would look like for a user.

I'm noticing that there are common paradigms and OpenRouter is [00:18:00] one of those ones that we talked about. So if you want to add like LangChain to your app or maybe LangGraph to do something else, you could allow it to route between different models if you want to. They could be local models or remote or what have you.

OpenRouter as well allows you to do that just by adding one API key and on the back end kind of handling what that looks like. Which is another approach. Then again, I think if you're using one of those cloud vendors, maybe like Amazon Bedrock or Azure OpenAI, or Google's Vertex. They also have functionality within those in order to allow you to point to different models using different endpoints.

But the routing might be something that your app would have to handle. So it's just different approaches in terms of like how you'd want to handle exactly the scenario that I just went through. I use my API key too much as a result. I can't use it anymore. What do I do kind of thing. Okay, so it said that we're going to install the dependencies.

I don't think it did.

Let's see if that works. 'cause I don't think it actually did de install the dependencies. Yeah, it's just doing a plan here.[00:19:00] 

Ah, it didn't actually work. Okay. But that is the next thing that would need to do is install the dependencies for Anthropic, what have you. So the main thing I'm getting at here is, this is pretty good way to get started with an app. Sometimes I find going back and forth between this and the preview as like a quote unquote vibe coding tool is just as good or just as bad as you'd find in Windsurf or Cursor, and that it can take a lot of iterations going through.

I do the code editor in here being able to go into the code and actually edit things. As well as being deployed to Web on Netlify or deploy the actual app store to get your iOS app published. It's amazing to me is to get something started really quickly. The other thing that's cool in Expo is you can, I think they call it the Expo.

Oh, shoot I've already forgot the term. I think it's called Expo Go. Yeah, sorry, I had to pull it up. But there's a way of pulling down like a sample app, store playground from the iOS app store. And then from there, give it a code and load [00:20:00] your app into it so you don't have to redeploy every time as you're going through iterations, which is pretty neat.

And that's part of Expo, not necessarily part of Bolt, but something that a library that Bolt can work with. 

[00:20:10] Jason Hand: Okay. Yeah. Previously we talked about, in fact, in the previous episode. We talked about the importance of rules and product definition files and things like that. Is, does Bolt generate anything like that automatically?

Does it have the same like I. Yeah, I didn't see. Now will it behave better if we give it some structure, like they, a lot of the others will. 

[00:20:32] Ryan MacLean: Yeah. I haven't seen any that's actually a really good question. I haven't seen any rule section. Maybe I'm missing it. 

[00:20:38] Jason Hand: This is the first one.

They, this, they their IDE still feels VS Code like VS code-ish very much. But it's very much stripped down. There's a terminal, but that's seems like that's about it. There's no. Like repository, plugins, things like some of the other ones we've seen.

[00:20:58] Ryan MacLean: For sure. One thing it can do pretty [00:21:00] easily is something like a Windows. I think it's a snipping tool. We'll do this, I think we talked about this last time, but being able to do this kind of programming is interesting, so 

[00:21:12] Jason Hand: For sure. 

[00:21:15] Ryan MacLean: And obviously I could just. Grab that text and pipe, pipe it in, that kind of thing.

That's not a problem. But the fact that it can actually take the screenshot of what's seeing in the right hand side and then go through it is pretty interesting. 

[00:21:24] Jason Hand: Very multimodal of it. 

[00:21:25] Ryan MacLean: Yeah. Yeah. And the other thing in here. I decided to not fix this code, which is pretty interesting. So it's recommending to me how to fix a code instead of fixing it, and I've seen that happen a couple times.

Sometimes it can be handy just to reload the page, which actually fix it and get it back into that mode. But yeah, right now it's telling us that what we should fix, my apologies, it's still on Windows here. I'm just gonna quickly reload this patient, see if that helps.

[00:21:58] Jason Hand: I ran into that when I went [00:22:00] back and played with Firebase studio. Some more after our conversation last week I did decide to, 'cause we had given it a repo and, started in a different direction than what you did here, where you just, tell it started with like a template kind of thing.

Yeah. But anyway, I did after our call, and I had some lunch and came back and decided to try to build something from scratch. And I was not successful. But I had a very similar experience where, and the reason why I wasn't successful is I just gave up because it, it wasn't doing the work for me, it was just telling me what needed to be done.

And I'm like no. You don't understand. I have another tool that will do the work for me. Yeah, if you know you'll be replaced, you gotta get here before we can talk about next steps. So anyway, I like what I'm seeing, but at the same time it doesn't, if it doesn't write the code, at least.

Most of the time, or at least, 

[00:22:52] Ryan MacLean: yeah. This only the second time has happened to me, and I've been using it for about a month and a half, but that's how it works. When you go to do a demo, of course it's gonna assure you the bad stuff. Of course. That's thing now I was [00:23:00] saying.

Yeah. Expose, non install, et cetera, et cetera. Okay. 

[00:23:02] Jason Hand: I have to say, you have given it a very tricky app. 

[00:23:04] Ryan MacLean: Mind you would think so but I've put this out like three times. I feel like my pros was quite terrible and I feel like I should give it another one. That's kinda 

[00:23:12] Jason Hand: what I was wondering if the, if a rules or product description file or definition file would actually help, right?

Keep it wires from getting crossed 

[00:23:21] Ryan MacLean: and, yeah. And I wonder if this one actually works too. So this is an older example and all this is the Supabase database testing tool. So all it does is say, hey. Spin up a website. Can I connect to my database? Yes or no? This one doesn't seem to have a dev environment, so we're just gonna quickly fix it, but it's, yeah, again, you can see quite a few keys in here.

And what I was trying to do is see if I could get database, APM working with Datadog. So show me in my code where something's filled, and I know it's the database 'cause I'm gonna show that on the page. But also, could I show an APM that everything in the code works, but the database connection fails kind of thing.

And it was more like I, I'd never used Supabase before and this is in fact, that, that. Project I [00:24:00] was talking about before where the database has been cleared by some nice, a good Samaritan, let's say, showing us their security wasn't great, but it's empty now. It's not that we can't connect to the database, it's that there's no table in there.

But yeah, this is quote unquote working. Yeah. But yeah, this is what that looks like. And again, we can deploy it or look in and Netlify what it looks like, but it will in fact, yeah. Write apps for you. I think this one took me a few days to actually get working and it was most, mostly me not understanding how Supabase worked but it was pretty fun.

[00:24:30] Jason Hand: When you deploy, is that deploying to Netlify? 

[00:24:33] Ryan MacLean: It will in fact deploy to Netlify. Okay. And I think in this case, notice how there is no dropdown because there's only one target for deployment for this one. 

[00:24:39] Jason Hand: But that's not a default for Bolt, right? For all their apps to go to Netlify. That was just something that suggested that we do based on,

[00:24:46] Ryan MacLean: I believe it is actually.

[00:24:48] Jason Hand: Oh, is it? Oh, 

[00:24:49] Ryan MacLean: I'm gonna click on this. Yeah. There's a couple things that you know here. So one, that the template changed a little bit, so it's light mode instead of dark. It still does pass. The other thing I noticed and you can [00:25:00] probably see it, is that there's kinda like a checkerboard right in the background and some gradients and stuff.

It's, it is weird, right? There's some design here that was hiding behind the dark interface. Interesting. Yeah. Yes it's an odd app, but there are some decisions like in terms of look and feel, where you need to show a screenshot, to explain this to the model in terms of the way it works.

Hey, it looks like there's a grid, a white on white grid going on here, which is barely visible. Can we make that a little bit different? That kind of stuff. I have found as someone who's not a good frontend designer, that being able to describe things in natural language is phenomenal for me. 'cause I can describe like what good looks like or if there's a problem with something, if the font doesn't look right, that kind of thing.

Going into the code and fixing that or knowing which font to pick is not beyond me, but it's gonna take a little bit of research. It's gonna take a couple minutes for me to identify a font that I like and then ask it to replace it, that kind of thing. 

[00:25:49] Jason Hand: That's where some of the, where you showed off that you could take a screenshot and upload it to the model found Absolutely.

Some of the other ones, like Claude, send them the screenshot of something too. Like over the weekend [00:26:00] I did put together this little like financial dashboard for myself. We had taxes lately, so I guess I, I've had like finances a little bit more on my head and I was like, I wanna make a little dashboard where I can just see kind of everything.

And yeah same experience. 

[00:26:15] Ryan MacLean: Yeah, it's super handy to be able to pay stuff in it. It makes things way easier, because I think that multimodal being able to go from something visual and then reading the text in it and then acting on the text, it feels like three tests, three steps altogether.

It really does help. 

[00:26:33] Jason Hand: Yeah. It's most helpful when you can't copy and paste, I think like it's not, you're not saving any clicks by opening the snip tool or whatever and dragging and dropping and then pasting. Then you are like copying, highlighting, copying and paste. That type of thing. But there's a lot of stuff you just can't, the design, yeah.

Can't, I just don't have the words to describe. Yeah. Or it's laid out in a weird way, a table's got images in it or something. 

[00:26:59] Ryan MacLean: [00:27:00] Yeah. Now the other thing, so we talked about Cursor Rules, that kinda stuff. The other thing that I noticed in here is that it'd be great to have, I don't wanna say MCP 'cause it feels like buzzword bingo, but some way of reaching out to either documentation or actions or something from other tools. And in, in this case, obviously I work at Datadog, so I playing around with Datadog, I feel like it would be a lot easier to do things like set up. Datadog in, in some of these packages. So when we're actually writing the code in here I feel like some of these could be how do I say this?

There, if there's a template to start with an app, I feel like there should be a template\+ tool. So not just Datadog, we can think any observability tool or even OpenTelemetry, like if there was a button to say, Hey, start this new V dap with Otel. That might be awesome in fact to say that here's what I need, or I need error tracking.

Pick a vendor. I don't care, but start this off with that vendor. Absolutely. Or if it's an MCP as you're developing this code, make sure that you don't deploy until Datadog says that the code is running. And then when it [00:28:00] does run, then deploy it to Netlify. Make a gate, in your Cursor Ruless.

So say once it passes this quality bar, then deploy it. Or don't deploy anything with incompatible licenses for their packages that you're using. 'cause especially in these Javascript. Applications. There could be tens if not hundreds of packages and dependencies that just fly by as you're installing.

And it's not that you've got a lot of dependencies, it's that your dependencies may have many dependencies as well. So you could have one to 10 in, in some cases or install one package, but 10 things come down. 

[00:28:32] Jason Hand: Yeah. 

[00:28:33] Ryan MacLean: Anyway, I'd love to see a little bit more hooks into other stuff, I guess is where I'm getting 

[00:28:37] Jason Hand: well, and that type of just that.

Thought exercise of that whole thing, sitting down with a security person. 

[00:28:42] Ryan MacLean: Oh no. Yeah, he's sweating. Yeah, those are hard convos to have. Or like the security problems is another one. And in some cases, like with Cursor, I'll say, Hey, I'm a senior engineer at Google. Security's very important to me.

Please create an app kind of thing [00:29:00] like with security in mind or now that I've primed you please do this, or please make sure that all of the packages you pick are BSD, Apache or MIT licenses. There are a few more, but like ones that are compatible basically. 

[00:29:11] Jason Hand: I feel like that's generally the sentiment I'm picking up from our like security folks, especially in Advocacy is don't forget that these things are just gonna download dependencies and you don't know what they're gonna be doing. And oh, by the way there's tools over here that can help like scan those dependencies, right? And make sure that you're, anyway, it's just we're, a lot of people are so excited by these new apps that we can just build like me, over a weekend.

But I might blindly install something that the app suggested and it looked totally fine to me. But yeah, so it's definitely just a thing to remember. 

[00:29:42] Ryan MacLean: Absolutely. And for this one I had the same thing in mind. So I ended up downloading it and then continuing on in VS Code. And then I tried it in Windsurf and a Cursor as well.

But what I was trying to do is build a scaffold around that SBOM, so to make sure that the packages included were in fact secure. So I added in like CycloneDX and stuff like that and started [00:30:00] iterating through it. But I think that's that feels like the next step. So the question is like, Hey, you can generate an app, it works great.

This is your drawing board. Then what's next? Like between you and prod if you're in Dev right now or maybe you're just in the idea mode. Where, how do you get from dev to staging or how do you get from staging to prod? And that's where I got it was like package versions, package security.

Things like making sure my licenses are there, ensuring that I'm not like hard coding any credentials or anything like that. Work. Were keys to me. Didn't go into things like the schema of the database, which would be important. So if we're going to grow over time, where will we grow? Or if we're going to add functionality, where would that most likely be?

What would that look like? Do these tables look okay? Are we using NoSQL or SQL? Like all those kind of architectural decisions, I feel would be next. And not to poo this tool, but one thing I really liked in Claude Code and Aider is that you can put it into quote unquote architect mode. And then going through that mode, say Hey, cloud code, you're an architect.

Now look at this. Look at this whole entire repo and don't touch the [00:31:00] code, but let me know, give me a rating like how ready for prod is this code kind of thing. And I actually, as a code reviewer, I've been really impressed with a lot of the Gen AI models because I don't know what's been trained on, maybe it's just bad PRs or something like that.

But it will actually give you pretty good feedback of an intermediate engineer. If you were gonna put a PR out at, the company you currently work for, you probably have. Like the easy PR comments are what are there, but as well as some insightful things, especially if you prime them about things like security or scaling or architecture, that kind of stuff.

It's quite interesting. 

[00:31:34] Jason Hand: So I'm hearing another another argument for how this whole thing to me feels like code laundering. Absolutely. Absolutely. Because and I don't mean that in a negative sense per se. No, I hear you. I hear you. You could be doing it to hide your tracks, but Yeah, I just mean it's like for me, what I heard in that was Bolt got you to one place, but it's at some point you gotta download it and throw it into another one and do another thing.

[00:31:57] Ryan MacLean: It feels like it, it feels like Bolt's a good way to get [00:32:00] started with something quickly, like as a quick. Like a doodling kind of phase. E Exactly. And then from there, you may move into a different IDE or maybe you just edit the code yourself in the code editor. But it, it felt to me like I needed to grab this code and then start playing with it in a proper IDE.

[00:32:17] Jason Hand: So then that begs the question, why even start here? Do you not trust the other tool to get you to that point? 

[00:32:23] Ryan MacLean: I did notice in Cursor and Windsor, for example, the getting started phase can take longer and that's, I think that's the only difference. That's a little bit longer that the question, of course is whether or not you want to.

Like pay for a tool like this to build small starter apps to get you started or maybe build a bunch of templates that you can then get started with. Or if you want to spend the time in Cursor and set up rules and do this on your own, that it's build versus buy, but it does feel like an accelerator.

I I guess this maybe what you're getting at and that's how I think about it in my brain is it's a first. Step had a problem to, to figure out if the approach is right. So the main takeaway from the one we did this morning, for example, [00:33:00] was that Kudo, Shima Library, the main one from this Supabase one, I think was just the way to use Supabase in your project.

That's what I was getting at. I don't think it taught me too much about APM or DBM in terms of the way that I was trying to use it, although that was my next step after this. 

[00:33:17] Jason Hand: Do you feel like it prefers TypeScript? Is it all, does it always go to that when it's 

[00:33:21] Ryan MacLean: yeah, it does feel like it.

So if we go to a new chat here, I feel like most of these are TypeScript. So if we look at these or any of these, like I don't see any Python in here at all. 

[00:33:34] Jason Hand: I'm finding React. And React Next.JS stuff are too, that gets suggested the most for things I've worked on. TypeScript occasionally. But yeah, I was just curious about that.

And then the other thing that came to mind I went to the Anthropic, put on a webinar this week on Claude Code. And I love podcast last week, I think. Yeah, sorry. Last week. And that's like my go-to tool lately. And so of course I went and it [00:34:00] was great. And one of the, we were talking about lots of different things, but one of the things that they showed off and basically I think encouraged as a practice is to run several Claude Codes in parallel.

If you've got, you'll, 'cause even here we can see in Bolt, once it set sets off to do a thing, depending on what that thing is, it might take a few minutes. And so I'm curious, could you open up another tab and start a whole different process on this same project or may or a, another project, but can you do several things at once or have you tried that?

[00:34:31] Ryan MacLean: Yes. By mistake. But yes, you absolutely can. It will scroll back through the history that it just pulled up. So if we did this, I think control, click. Pop over here. Okay, so this is A new tab. We just started that new one in TypeScript. Let's see if we do this again. Oh, I don't think it saved that out, that we were just looking at funnily enough.

Interesting. [00:35:00] Okay. Yeah. I don't think it's saved that app that we were just looking at, but yes. What it will do is scroll through that chat that we just saw and try to replay its steps until that point, which is great, but it's not what you were saying, so it might be handy to have two instances so you could work on it twice kind of thing.

Let's say you and I were working on the app at the same time kind of thing. It might be interesting for us to both go down, like forking paths. It looks like it puts us on the same path, which is good. But also in terms of the git workflow is quite a bit different. Yeah. Yep. But yeah.

Okay. If that makes sense. It feels more collaborative. I guess as opposed to like a. Like, like both of us going off doing our own separate thing and then coming back together. If that makes sense. Which is also good though. Those are both good workflows. If you and I wanted to work on something on the plane to SF over the weekend, this is probably not the tool for that.

[00:35:54] Jason Hand: No. 

[00:35:55] Ryan MacLean: Yeah. Now that being said, so we've talked a whole bunch about [00:36:00] Bolt.new, which is kinda like the hosted Bolt. I've also been playing around with Bolt.diy, which is the open source version of this that you can do offline. 

[00:36:07] Jason Hand: Oh, cool. 

[00:36:07] Ryan MacLean: Now you can plug that into OpenAI, Anthropic ,or use Ollama. And I've actually I really like that.

I think mostly because I can see what's going on in the backend and I can set up my own templates. And I haven't gotten to the point yet, we were talking about what if I did v plus OpenTelemetry or something like that. That's where I want to go is like, how do we set up these sort of templates would be stacks that are like that without necessarily going to, so one of these Exports in here is StackBlitz.

If I want to create a template and StackBlitz, that's super cool. But if I want to do something offline where Jason and I were both challenged to create, I don't know, like a Minecraft clone or something like that on the plane, what could we do on our laptops? And the answer is actually you can do quite a bit with the offline models as well.

So I feel like, so this is the paid hosted version, which is awesome. There's also like the free offline version, which is also awesome. And I feel like they both solve the same [00:37:00] sort of problem in terms of getting started, but one of them is infinitely extendable, which I thought was really cool.

So the combination of the two I thought was actually pretty neat. Nice. And of course you can transfer projects between the two, that kind of thing. 

[00:37:15] Jason Hand: Very cool. Real quick, I'm curious down in the chat. Yep. When you hover over the little beaker there with the number one.

Yes. What is that about? 

[00:37:23] Ryan MacLean: Yes, so I think this is because, yeah, so I turned on token usage, which I can turn off. And I'm not sure if you saw that there, but before it said I had 9 million tokens remaining and I think there was an ad about a different upgrade that I could turn on. Yeah, that's great feedback.

Yeah, I turned that on because I wanted to know how many tokens I was using. I think once you start paying, you get, it is like a range anxiety for a car, like an electric car. You wanna make sure that your battery charged would get to the point. And I wanted to make sure, basically, that I wasn't using too much in these little experiments.

'cause I do wanna play around with this app. It's handy. I do feel like it teaches me front end, which is really [00:38:00] cool. 'cause I've had a lot of, people have tried to get me to learn JavaScript over the years, and it's really not stuck, but I feel like when I build stuff with it, it does teach me things.

So I am learning at least about new frameworks or the capabilities, which is awesome. It's a, it's like gamified learning, even though I realize that's not the goal here, but for me, that's, it's been a benefit for sure. 

[00:38:19] Jason Hand: Nice. Cool. I feel like we're probably just about at time. And the overall.

Take on Bolt is, it seems pretty handy, but like a lot of the others, it'll just get you to a point, right? Then you might need to move on. I can't tell just in the time what we've spent with it. Is this like a tool you'd use on production level code, or is this really just like pure vibe coding, like having fun proof of concept stuff?

I 

[00:38:46] Ryan MacLean: vibe coding. That's why I signed up. I thought it was a really good way for me to vibe, code, and learn. That's where I landed on this. And I realized that it's probably meant for a different crowd, let's say, I wanna say this in a positive light, like I used to have an IT manager who would [00:39:00] say Hey, I, I want you to create this new app.

Logistics came to me and they came up with this great idea. It should only take you a couple days to pound out. Can you go set up this new app with MongoDB and deploy it on AWS kind of thing? And this is all well and great, like as an IT manager or somebody running at help desk at the time is what I was doing.

It was fine. And generally you would start coding, when you've got the time you spent some time on it. But two days of work. Could become two months of wall clock on like actual time. I feel like for these people where they just want to template something and show it to the department and say here's the realm of the possible.

Is this close or not to what you want? And then when they agree on it, then you go forth and do it. It's like the stage pass a mockup for me, like it, show it a mockup and then go from there to something that works. And then for all the little details, like it had a light dark. Mode switch, but the switch didn't work or it had a OpenAI versus local switch, but the switch didn't work there.

Implementing some of those features feels like where I'd pull out, the big guns, like I pull out Cursor, I pull out Windsurf or VS Code like the IDE that [00:40:00] I know. Or if I didn't want do any vibe coding and just wanted to fix the feature, maybe hop right into Vim and just fix it up kind of thing.

Now that said, I'm not great at front end, so that's probably not what I'm doing gonna be doing here. But for something like Python code, that's absolutely where I'd land. 

[00:40:14] Jason Hand: Okay, cool. All right. I feel like that's good place to stop for today. 

[00:40:20] Ryan MacLean: Hopefully that was a good demo. I really liked this half.

I guess it's a conclusion. Yeah. And I went into this thinking that I'd hate it and I feel like I'm using it wrong. Like I'm unscrewing. Flathead screws with a knife or something like that. But it does actually solve something for me, which is like being interested in front end stuff.

And I feel like Cursor and winds serve don't do that. 'cause they don't have the wow factor of click a button, get started quick. That's awesome for me. And for me that, that combination of stats and bolt hopes there. Though I think the goal is to, if you read this is like prompt, run, edit and deploy full stack web and mobile apps.

Yeah. For "Dev" and "Staging" environments so far I think I, I wouldn't necessarily trust it with the "Production" keys yet, and then I [00:41:00] probably, download the code, push it to git and start with something else going forward after that. 

[00:41:03] Jason Hand: This might be the first one I've seen where they market, I guess you'd call it, say market or market towards building a mobile app.

Whereas, and even I think when you pulled up the preview, it showed a dropdown box where you can switch between the different mobile devices. Absolutely, yeah. You can pick 

[00:41:16] Ryan MacLean: Android, iPhone 16 or Responsive Web if you wanted to. 

[00:41:19] Jason Hand: I don't recall seeing that in others. It may have been.

It may, and some of 'em I just haven't looked for it. But anyway, that might, 

[00:41:24] Ryan MacLean: A lot of that was a framework too, but that framework I'd never heard of before. So that was Expo for example had not seen before, didn't even realize it was possible, but it's quite cool. 

[00:41:33] Jason Hand: Nice. Okay, cool.

Yeah, thank for the demo. I feel like my experience with all these is even when they don't work like you thought they would, I've I like know a lot more coming out of that about why it didn't work and what I should do next and Right. So it's a "Win" even when it doesn't pan out Exactly.

[00:41:50] Ryan MacLean: Feel at point time I'm voting with my wallet, the subscriptions that I've got are the ones that I like, and then the ones that I cancel are the ones that I don't, but I'm still paying for. Claude, [00:42:00] ChatGPT, and Bolt. And probably not forever, 

[00:42:03] Jason Hand: but for right now, I know I'm gonna have to reevaluate which ones I'm using still and need because yeah, same here.

Least there's several. Cool. Thanks everybody for joining us on this recording. And we'll see you the next one. That was awesome. Thanks so much.