all right here we go here's another AI product let's try it out and talk about it so I can get some views so bolt. new you can type in a prompt and you can have it generate an app okay nothing really new there what I'm going to have it tried to do though is I want it to rebuild my icon generator ai.com site and see how far it can get so I need you to remake an application that allows users to type a prompt select a style and generate and icon using Ai and let's see
can we upload images so let's just give it a uh a little snapshot of what I want so let's just do this and I'll upload that and then I'm also going to say please make it using nextjs because that's what I code with let's just go ahead and run it and see what it can give us so one thing I noticed about bolt is that I think behind the scenes is using stack blitz so all this code that is generating you can use stack Blitz to basically go in and edit inside of vs code that's
in your browser it's not really running locally it's in their own like web container thing I I don't really know too much about it I'm not a fan I like running my code locally honestly um but we ran it and it looks like it failed so the idea is that it kind of runs through steps and it creates some initial files updated the page TSX it created an icon generator txx component it made a layout and then it failed to run Dev so uh let's see what the problem was this command failed command not found
next so I'm guessing it didn't even run an npm install or something uh but one thing that's cool about this is it does run commands for you because this is like an environment that's kind of all isolated they can just run commands directly in the terminal and not worry about messing stuff up I don't know how I'd feel if cursor ran terminal commands directly for me without my permission I imagine one day one of these AI tools is going to install root kits on everyone's machines and take over the entire internet but for right now
let's just go ahead and fix this problem and see what happens yeah it didn't even make a package Json okay so one thing I'll say about AI is that the initial like create something from scratch part doesn't work that great usually I would recommend that you start with a starter kit or some type of project that's already kind of laid out so that AI can understand it and start adding on to code that you already have there for example I have a web dev Cod starter kit go to WTC starter kit.com if you want to
get a free starter kit written nextjs and I tried to make it as polished as possible so go check that out okay so here's the app it generated we have the ability to describe an icon and then we can also select a style and then when you click on generate I wonder what happens let's just go ahead and click it and it displayed a little box let's look at the code real quick and try to figure out what's going on here so we have a page this is doing an icon generator now I personally don't
like how I put a component that's specific to a page inside of components folder over here like that's that's not what I like to do so I'm going to say instead of putting icon generator in the components directory I rather it be collocated in the app directory next to the page that uses it and then let's just go and submit this and see if it can refactor existing code pretty well all right so it did move it that's pretty good so it can easily change files and move stuff around let's see if it deletes this
file when it's done it updated the page and then it uh it removed the component by running this command for us already so that's actually pretty cool I mean that's pretty powerful um one thing I'll notic when I'm using cursor is that sometimes it just doesn't import stuff sometimes it just you have to do a little bit of manual step which is fine but um let's just go ahead and run this gradient and see what happens again just a blank image now also it seems like it's smart enough to know that it can put used
client at the top top of these things like it seems like it knows nextjs a little bit better than what cursor does for you I have noticed that cursor will create files that are like client files and then they don't have used Cent at the top so off the bat this thing seems like it knows nextjs app router a little bit better which is pretty nice I don't know if they train the model differently or what model they're using under the hood um let's just continue on so now when I submit this it's just setting
the icon to like a static URL instead I want to have it call a server action that server action needs to invoke open Ai and try to generate an image using the prompt and the style so I'm going to say can you instead have the form call a server action which then calls open AI to use DOL app icon using the prompt and style let's see how this works also please add loading indicators and display error notifications if something goes wrong wrong also please make the prompt required and show error text if the form is
submitted without it all right let's try this out let's see how it can handle longer things one thing I noticed with cursor is that the more information you give it the higher chance it's going to mess up so if you give cursor like a prompt of 20 bullet points there's a high chance it's not going to even do half of them or maybe even like a quarter of them um and so I found is it typically you have to go by one by one it's like okay what is the what is the smallest thing you
can try to add in let cursor do it let's move on to the next thing let cursor do it and then you get a code review now for what I'm seeing with bolt like I'm not seeing a code review uh feature anywhere it's just kind of making changes and I don't have a chance to go through and figure out okay like what are you changing in my code base which personally I don't like I want to have intellectual command over like my code to know what's happening because as your code base gets larger and larger
if you don't know how your code is structured and how it works it can get a little bit more difficult to like even maintain because eventually this stuff is going to break and you'll have to go into the code and figure it out yourself all right so now we're getting a bunch of failures basically it's trying to use a module that doesn't exist can't resolve used toast blah blah blah let's just try to let it fix it and see what happens so I brought in radex UI react toast and it did some stuff it added
experimental server actions okay so this is like trained on old data right server actions are not experimental anymore like you can use them and so I think it went through it and actually like modify my next config and it added experimental server actions that's kind of weird uh let's also look at the package Json what version of NEX is this even using 13 so that's another thing it's it's not even using the latest version of next which uh that kind of sucks so if this thing had a better code review maybe I would have caught
that um but I'm going to go ahead and say I noticed you installed NEX 13 I need nex1 14 where server actions are not experimental update the next config now this thing keeps failing so I might have to actually go figure out why manually which is such a drag do I want to manually code other than that I mean it keeps failing on like it's just can't seem to get this react toast going yeah let's just let this keep going and see what happens is it's selling the latest version of next and it should be
able to hopefully clean this up a little bit like I don't know if it's broken right now or if it's just taking a long time to actually like host my nextjs application but I will say the one thing I just don't like is I don't want to code in a browser I want to code on my local editor because I have a fast computer with a lot of cores and a lot of memory and I don't want to have to wait for some like virtualized container to run my code CU that took at least a
minute that took like a full minute to start my nextjs application and it just failed so it's like I could have had that done in like 5 Seconds um but no let's just try to fix the problem again I think what they need to do though is like I want to be able to click on these updates like okay update package Json click it I want to see a diff I want to see what changed like what did you change with the next config what did you change with the package Jason because right now it's
like I have no idea what it's doing to my code base all right let's try a couple things it's working now I'm going to submit it okay this is required great an icon for an app that generates app icon very meta let's just say gradient let's click generate icon all right that's actually pretty cool I mean like it's doing pretty well let's look at the page and look at the icon generator if you scroll through this code I mean like it added all the air handling I asked for it added the toast over here it
did the loading indicator you look at the action it's calling Dolly with this looks like the correct API call and install the um SDK properly I just need to set an open API key which honestly I don't know how to do can I just put aemv file here all right I'm going to make a quick secret key uh I'm going to delete this after this video so I want to make aemv file there's no Vim there's no VI there's no Nano so I guess I'll have to do this the oldfashioned way we'll have to like
Echo um open AI API key equals press the key and then I'm going to have to just put that in a EnV file all right there we go the files created there's no way to like right click on the files that I can tell and like make a new one I guess I could have used AI to do it for me um but yeah I don't know like it would be nice if I could actually like do stuff with the file system here I don't have to go to stack Blitz like maybe I should go
to stack Blitz to do the editing and like it'll sync up I'm guessing that's what I need to do um but anyway let's just go ahead and see if uh I can do this now all right so let's test this out I got the API key there let's just go ahead and say an icon for someone trying to set L cars and then we're going to make this a flat icon let's just go ahead and generate it and uh let it cook a little bit okay look at that we got an actual icon here um
so yeah we basically just recreated a very very minimal style of my own product using AI in like absolutely no time granted there's more things we should add in like we need to add in a database we need to add in authorization authentication so now let's get into some of the tricky stuff which I I guarantee you it's going to fall apart on I'm going to say can can you please set up my project with the latest version of drizzle omm using SQL light now I chose sqlite because um I'm pretty sure post grass is
going to require like running some type of postgress instant somewhere I don't think we have access to Docker inside this stack Blitz container all right little error let's just go and try it again all right so it's installing drizzle orm it's installing the better SQL light dri I believe and then it's installing a bunch of other stuff let's just look through this so it looks like the files it's trying to create are valid like those are typically the format you need with Drizzle you need like a schema file an index file um let's just let
it kind of do its thing and see if it works so looking at the server action it actually inserted the information into my database and if I look at DB I have a schema here where I can store the icons that are generated but unfortunately it looks like there is an issue could not locate the bindings file uh so can not locate the bindings file so this app is definitely not going to work right now um we could try to fix it using AI so it installed a driver that doesn't work in the web container
environment so it's installing a different one called lib SQL client so again that's the one thing I'm not really a fan of like this whole ecosystem it's like I don't want to code in web containers like whatever that is like I want to code on my machine because I'm going to be deploying to a Linux machine I'm not going to be deploying to wherever stack Blitz is going to host my stuff now grant that lib SQL might work both on a node environment and a browser environment uh but we'll see all right another issue cannot
load native add-on because loading add-on is disabled uh I could try to fix it again so I can't do that either so now it's switching over to Pure JavaScript sqlite implementation that works in the browser at this point it's doing stuff that I would probably not do on my real project like I don't want to code like I'm coding on the browser but I guess it knows that this stuff is not going to work on their environment it looks like it made a SQL file all right this thing failed yet again it's probably installing some
older version that it just doesn't know about I'll try fixing it one more time but like this is a state of AI tooling like it's great to build out a UI if you just want a UI it works great but then like the whole like the configuration part of building out an application it just falls apart there's so many libraries that are not compatible with different run times and unfortunately whatever bolt New Uses the web container stuff I personally would never use okay so it's trying yet another thing it's installing yet another thing it uninstalls
the sqlite JS and it installed I I don't even know what it's doing right now it's just literally installing everything let's just go ahead and just run this again and see what happens generate the icon that should hopefully now store it somewhere it's using an inmemory class okay so it got that let's go and look at do we have like a SQL light file now okay yeah it basically it's just storing these things in memory so big big fail there so honestly this is just a quick review on it is it powerful yeah I mean
it's pretty good it was able to correctly build out this UI with the error States and the error notifications and also the server actions the call open AI all that worked pretty flawlessly right after I set my API token it just worked and then it displayed the uh image okay let's try one more thing I'm going to see if I can scale the image down in node because that's something I'm doing in this project I scale down the images a little bit so that I don't have like a 3 megabyte image that people have to
download so can you use sharp to scale down the image to 256x 256 after it comes back from open AI okay so it's installing the sharp Library hopefully this also works in a web container I'm going to bet money that it will not bet you this will probably also fail as well let's check out the code real quick let's go to actions so it brought in sharp and it basically fetches the image it gets the blob the array buffer and then it converts it and then it tries to convert it and then we should get
the buffer back and that's what we should be returning so I mean this looks good uh I'll say an app for uh selling carrots and I'll select 3D style this time let's generate see what happens and it failed let's try to figure out why it failed I'm guessing it failed because like I mentioned sharp probably won't run correctly on this uh so this is failing to fetch so I've tried using stack blit to like pull in my starter kit and just install it like do an MP install and it failed on various issues also I
tried bringing in another project that was using convex it's mpm install failed due to socket hangup errors but it's just there's too much friction I would probably never actually code using stack blits because you run into weird issues like this where it's trying to fetch the image over here like it's just trying to fetch the image from a URL but then it says error like it can't do it so I'm guessing there's some type of like security in place that doesn't allow your containers to like do different things but maybe it's fixed now I just
said fix the issue let's just try it again a carot app uh let's just do this generate it again see if it can make some progress and it failed again UND error socket so now I get to spend 30 minutes an hour trying to look through the internet trying to figure out how to like get this working and I don't want so what are my final takeaways of this I think the code that is generating seems pretty accurate like other than it installing the wrong version of nextjs like the sharp stuff it added in worked
well the open AI stuff it added in was accurate everything else seemed like it worked pretty well and I'm kind of impressed with that I've seen cursor kind of give bad code once in a while um but so far this thing has been pretty spoton with the code is generating in the entire project structure that it's setting up like it works pretty well my critique is a I want to run this locally I don't want to run this in some some browser and so from my perspective what bolt is it's a sales funnel that gets
you to use stack blits personally until they have like a run local version like there's no way I'm going to use their actual like hosted solution now I like the UI I think the user experience is pretty nice but I would recommend that we add diffs like I want to see what is AI changing at this point it's more of blindly like just trust it it's going to work and it does work for the most part when it generates the code but I need intellectual control over my code so I know what it's doing right
I've been coding for 10 plus years I want to be able to review the code uh yeah the terminal doesn't have Vim doesn't have like Nano doesn't have anything on it which is not very useful like I would like to at least have Vim I can go in here I can't even like create files in this editor now granted this is all beta this is all beta so like I am critiquing it a little hard for a beta product but they released it to the public so I'm going to critique it anyway uh I hope
you guys play around with it try it out uh it's pretty cool I'm curious what you guys can build with it and if you think it's better than cursor but overall I'm going to stick the cursor because it's kind of it's built into the environment I like the code with all right that's it have a good day happy coding