bolt.new: Is This AI-Powered App Builder the Future of Web Development?

--- type: transcript date: 2024-10-09 youtube_id: _H7jet-cWbI --- # Transcript: bolt.new: Is This AI-Powered App Builder the Future of Web Development? this is pretty amazing this is all within the browser now let's try and deploy this and let's see what happens this is probably the most requested tool that I've had on my channel bolt. new is a new product from the team over at stack Blitz what it allows you to do is similar to something like v0 is you can describe essentially what you want your application to be and it will attempt to build it for you here if we just start with a simple one let's say start a blog with Astro we'll just click one of the preconfigured ones just to demonstrate it you have your natural language pain on the left hand side and then you have your coding panel on the right hand side this sidebyside view really was popularized by the team over at thropic we really have to hand it to them because ever since they introduced the concept of artifacts we've just seen a ton of innovation products like vzero or bolt but what's different with bolt is it actually spins up this virtual machine environment where you can go and you can tweak it as if it was something akin to like visual studio right within your browser here you can see the simple template for a Blog you can click around it just like you would a typical website and then you can go and tweak it if we just go within the source here we find the pages if we go to the index and if we just for demonstration sake put in a few exclamation marks we can save it out we can go back to our homepage and it will be immediately reflected that's pretty great but the other nice thing with this is they do have the ability to deploy the application by default it looks like they do have an integration directly with neifi right now in just a handful of seconds you can go and create your application to actually deploying it and the nice thing with the deployment you'll have a public URL that you'll be able to access but then you can also claim the project you have a week to claim the project you can go within your NFI account if you don't already have one you can just make a free account and then you can essentially take that and have control of that application but what's interesting with this is its integration with the stack Blitz product itself so from what I understand stack Blitz has an offering which essentially runs VMS in your browser there's a lot of technical work with wasm or web assembly under the hood that actually enables this to happen and from what I understand it is powered by something known as web containers which essentially are these little isolated environments that you can execute code in once you've made your edits and architected your application you can edit it right within here but you can also create a repository from here the other thing that is worth pointing out is you can just download the project here say you want to pull this down and you can just open it up in whatever you'd like whether it's vs code cursor neovim doesn't matter you can take it and put it within the environment that you want to build out of that's it at a high level in terms of some of the other features you can upload an image and you can also enhance your promp let's just start a brand new one here let's say I want to create an image generation application using Dolly 3 from open AI we'll submit that in this case I didn't specify the framework or anything here is going to build it out with it says V in react we're going to be using the typescript template and then there we go here's our simple application now within the application it is saying to go over and replace our open AI API key right here if I just say generate an image of a fox we'll just submit that there we go now we have a rudimentary but working AI application now if I go back and let's say I want to add a header and a footer to this as well as a hero area called let's call this developer digest image generator let's give the hero a linear gradient background we see that it's going to update our app. TSX and if we go over to our code portion here we can see our app. TSX here and it's generating it all within here one thing that I like about this is you can pivot between the different paint and still have a fair bit of control while the generation is going through that is something that is quite nice here we go we have our header and footer we have our linear gradient background we have a nice little hero area now if I say generate a image of a koala bear we'll submit that there's a lot of subtle things here right there's a loading State the back end's all wired up it gave us the exact position as well as even open the EnV to show us that we needed that before we could deploy our application so this is pretty amazing now that we have our open AI API key let's say I want to add a second navigation and within the navigation I want one page for image generations and another for a a chatbot using the GPT 40 Mini model string use the opening SDK V4 which is their latest version that's one thing that I noticed is sometimes within the training data even with open AI you do get the sdks that are maybe V3 and something like that that is a common issue with llms that it doesn't always know to reference the proper version of the library even if it's within the training data from what it looks like it's going to generate the file and then it's going to save that out if there are different pieces within your application that are dependent on one another I wouldn't be too concerned about necessarily seeing an error screen while it's generating let's go back to the preview pane here all right so now we have a subnavigation I was hoping it would be below the hero here but I can always prompt it afterwards I can click image generator that's the page that we're on and then I can click chat bot if I just say hello world how far away is the Moon and it's not streaming out but I could probably ask it to this is pretty amazing this is all within the browser now let's try and deploy this and let's see what happens all right so we're updating our package.json we're going to MPX V build to build our application and then once it's built it looks like hopefully we're going to have it deployed to NFI now one thing that I'm not sure of is if we are using an application that uses a EnV is whether we need to put that on the back end within NFI or if it's actually added when we deploy it from bolt. so if I just say hello world image we'll submit that and there we have it so I didn't even need to go Within nfy to specify the API key I can generate the image I could share this I could say hello world I could also probably specify to add some sort of rate limiting mechanism potentially or some form of authentication potentially these are all different avenues that you can start to explore with a tool like this that's pretty much it for this one another one thing to mention is I did all of this on the free tier you can go to bolt. new right now and try all of this out they also have a premium tier where you can access it from The Left Hand p channel here you can just go over to subscriptions and right now you can get 10 million tokens per month for $9 a month this also gives you the ability to access all of the features within stack Blitz Pro which is the platform that I had shown you a little bit earlier now if you do want some premium features there is the stack Blitz team which you'll be able to access at $29 a month if you're interested in seeing more of this type of content let me know in the comments below if you have any ideas on what you'd like to see or examples you'd like me to work through just let me know most of the content that I do make is based on your feedback just leave whatever You' like to see I'm not going to be able to get to all of it but I will try and get to as much as I can otherwise that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one