Building a $1M AI App with Cursor in 60 min

Riley Brown what are we talking about today today we're going to be talking about how I've recently switched to basically only using cursor when building apps with AI and I want to explain why we're doing it and then we're going to build an app with AI start so obviously there's a lot of really good AI tools out right now there's bolts you have zero for front end stuff you have wind surf uh you have cursor Reet lovable there's a lot of different tools that people are using for coding right now and I think it's awesome

that so many people are building tools for this space because I think it's probably the most fun space to be in and your most popular video on YouTube was the video that we did together and this is uh the process that we took you know this was three weeks that was three or four weeks into when I started building apps with code like I was a pretty pretty beginner level and um the process was we we kind of came up with an idea together and we uh built it out on VZ and that was just

the front end and then once we were like okay that see sounds like a cool idea it was like the Sip or spit app and then we imported that into cursor and when you run your code you need to be able to see it in a web view right like you need to be able to see the changes that you make live and so in order to do that we used repet and I liked repet and still do like repet I'm a huge fan of repet uh because they make templates really easy to use they

make deployment really easy to do compared to the other players and you can see it live they have a really easy web View and that's why I connected cursor to repet and basically synced their code B bases via SSA and it made the process incredibly easy however recently uh cursor released a new feature within composer Called Agent so last time we used normal because it was the only uh it was the only version of composer that was available a few months ago cursor releases agent and I was like oh here we go again agent as

a buzzword no this thing is legit like it is the most legit agent on the market in my opinion um and it didn't start out that way the agent wasn't that good to start and I was actually using the normal version but like over the last like month and a half they have improved it so much so that like we don't even need to use this anymore all we need to do because we're using repet for templates um we can now just use GitHub so an and I have made templates before each the uh this

template for nextjs has over 15,000 uses on repet like four fors or um and we just put it on GitHub and so now all we really need to do is just tell cursor to run it locally and why don't we just do that sound good yes it sounds good sounds perfect all right to be honest I didn't even know that uh cursor got cursor agent got this good yes it's it's only within the last like 10 days and uh again I'm still just learning and so people if you're listening to me I'm never going to

comp uh I'm never going to claim to be an expert I am here messing with these tools as are you I've just been told that I'm pretty good at explaining things and so that's what I I make a lot of content plus I Like It Anyway this is the full process on using cursor agent to run an app locally and you can use my template and it's free there's no strings attached all you need is the link that I'm about to put in uh when you're getting starter started on cursor we don't even we don't

even need to leave cursor that's the thing we just hit open a folder and what you're going to do is go to a place in your files where you're not likely to move something since this is temporary I'm just going to desktop and so I'm just going to click new folder and I'm going to go Riley Greg uh pod 4 I think this is our fourth podcast we've done and we're going to hit create and then once you hit create you're going to hit open and so this basically opens up a blank folder somewhere on

your computer and from here you can press this button right here and now we have composer open so all we've done so far open cursor we've created a project from a folder created a new folder with nothing in it and the title of that folder is right here and now we can access cursor so now what we can do is we can type this in right here I actually have it saved right here um okay I hate when it does this sometimes cursor doesn't let me paste yeah um I have no idea why this has

actually happened to me before but we're just going to go off memory I guess um I'm just going to clone the repo and uh run it locally in one command I think that's what it was and then we need to paste the link it won't let me paste the link um okay now we're good Okay so we've pasted this link and let me make sure that was right okay I have no idea why it's not facing not okay clone the repo run it locally in one command I think that's right um and we're just going

to run this with agent and so we've done nothing so far um and so it says I'll help you clone and run the repository locally since this is an nextjs project we'll need to clone and install the dependencies blah blah blah blah blah and so quick break in the pause to tell you a little bit about startup Empire so startup Empire is my private membership where it's a bunch of people like me like you who want to build out their startup ideas now they're looking for content to help accelerate that they're looking for potential co-founders

they're looking for uh tutorials from people like me to come in and tell them how do you do email marketing how do you build an audience how do you go viral on Twitter all these different things that's exactly what startup Empire is and it's for people who want to start a startup but are looking for ideas or it's for people who have a startup but just they're not seeing the traction uh that they need so you can check out the link to Startup empire.co in the description I have it set up on YOLO mode which

is a new thing that I learned on cursor if you don't have this set up it'll actually ask you like are you sure you want to run this command are you sure and then to click yes over and over again when you do this it just automatically does it it's called YOLO mode and so look we've won one single prompt and you see that over here on the left our files are loaded and then here it says Port um or try using 3001 instead and here it gives us this link you hit command click and

we open up this link and boom that is our template so we have our project open and I always like whenever I'm using composer I always put the web view in a different thing so I just have composer right here and I can go back and forth to see our project and you can see here um you know see here it says make anything you imagine right if we were to go into the search right here and just paste that in we'd find the file that it was and we could just say you know make

anything uh make a dope app on the zip pod and we hit command s to update it and you'll see that it is fully synced up and you're ready to go is is Yolo mode what you recommend to folks or yeah how do you think about that okay yeah this is for informational purposes only because I'm so new like I do not last thing I want is um for someone to like download something off GitHub that is like um not good and run it so like make sure when you download anything from GitHub or or

clone any repo like make sure you trust that Source um and I don't if you know nothing I don't see a difference between for me like I'm not going to like since I'm not technical I wouldn't even know whether it should be run or it shouldn't be run and so I would much rather let cursor take control so in terms of ease of use yes but I don't officially endorse it if you know what I'm saying I know what you're saying it also sounds like it depends on like how technical you are yeah like if

you know how to operate in a terminal like if you know what the different commands are then I would say maybe not like maybe you would want to do it a different way uh for example I work with an who's uh like senior developer level and he doesn't do it because often he'll run different commands than cursor um recommends him but for me I like it and now we have um without any intervention all we did was say clone this repo run it locally in one command and I gave the link to the public um

GitHub and we already have it open now we can make changes we can build an app um and it's that easy you want to build something yeah man I want I want to push the limits okay all right um maybe we should go educational like I want to I want to build something that's going to make you sweat make me sweat oh you want to build something hard I want to I want to build something that you're going to you're going to prompt it and you're going to be like I hope this is going to

work I hope this is going to work gu it worked another another alternative we could do that which I'm always open for and it will make me sweat because for you know it's you know like the first episode we did I struggled for 20 minutes you even had the thing in the video where you're like skip ahead if you want uh if you don't want to watch this but it did the best so maybe that's good for retention one thing we could do is talk about apis a little bit I think that's one thing that's

commonly skipped over in these videos yes that we could actually like maybe we try and set up the perplexity API and talk about like what that even means yes that would be huge I'm actually really curious about that okay so let's talk about um let's talk about apis and the funny thing about apis is I actually learned how to like fully integrate multiple apis into an app before I even knew what API stands for because you can you don't need to know with a uh with with the AI tools but um for now actually let's

go to perplexity um let's go to perplexity and what I want to do here is let's we're not going to use an AI image model but let's imagine we wanted to use flux an AI image model all you need to do is go to perplexity and say give me nextjs code examples for using flux on replicate replicate allows you to very easily get um a bunch of these like creative AI models or a ton of AI models in general which is one good thing to know like if you are new to coding and like you're

just now building things with AI and you want to add AI features look up replicate or uh foul. these are all platforms that make it easier uh to do that so that's just um one thing so we can say give me nextjs code examples for flux on replicate um uh for image generation and I think of these as just like I think of AI coding like Legos right you're looking for the pieces that you need to like put together and apis are kind of like finding instruction manuals you know like and you need to give

that to cursor because cursor doesn't have an inherent understanding of how these apis work all apis have different um coding rules and you need to make sure that cursor has that example so as you can see here these are examples and often times all cursor needs is an example and all you need to do is come down here all the way to the bottom and copy this and um we can veryy easily actually why don't we build something like this why not um so we can just say I want wait what is going on here

oh okay it just finished the response okay um I want to create a simple AI uh AI image generator um I want to use replicate and I want to use flux and so we just copied the code examples for it um and so we can just paste all of that in here since it's perplexity I just get rid of the um sources it confuses it sometimes just putting it out there and the next next thing you need is you actually need an API key so not when you're using an API most of the time it

requires an API token because this is not free to do right when you generate something when you generate an image it costs like three or like two to 02 to three cents a piece and so that's one thing you need to consider when you're building a tool it costs money and in order for them to track who's building what they need to give you an API key and so if we just type in here replicate Doom um what you can do here is we can go find our API token and I believe it is this

is this part's annoying um oh yeah API tokens I believe it's just going to show it so I don't want to do that um API tokens and I can create a token I'm explaining it because um hello token obviously I don't want those tokens to get out cuz if all you need is the token and then I would be covering your uh replicated Bill and you know someone would would would hit that happened multiple times uh to me actually in videos I'm not very good at concealing it I get so excited that I just like

forget to um anyway and so what I'm going to do here you know what I'm just going to cancel the token I'm just going to cancel the token after no no no hold on so one thing you can do here is I I will go underneath it and say this is my API token and um no codebase not indexed oh yeah just it's going to do that in the background okay this is my API token please put it in the correct place if you're a beginner right if you've done this a few times you can

put it in the EMB file yourself but for now I'm just going to do this and let's go ahead and actually let's break down what I just did I just said I I it's basically instructions examples token that's what I do when it's an API you give an example uh or you give instructions like I want you to create an image generator and because Claud is probably trained on a bunch of GitHub repos it'll know what an AI image Creator it might even stylize it in a way that's like looks like popular AI image generation

tools so give it just that and then you're going to say here are some examples and then your API token now let's just run it did that make sense yeah Crystal Clear nice and so you see here it put my API token that I'm going to cancel um it put it in this env. Lo file and then when it's generating the code here you can see in the route dot if we just click on this file if we want to actually dig into the code for fun you'll see that it references this uh rep uh

this replicate API token which will um it or process EnV replicate API token so it references that key in a separate hidden folder um which is cool and so now it's done and so let's see what happens here let's see if we one prompted an AI image generator so let's accept um let's go to our Local Host 3001 okay so this is the app that we have after one prompt AI image generator create beautiful images with flux AI say a man in glasses uh doing a podcast um 33 I have no idea how old you

are uh 33 uh year old am I did I go too old I hope I didn't we'll run with that we'll run with3 I'll tell you stay to the end of the Pod to find how old fair enough fair enough I don't know why 33 felt right all right okay so this is normal right this is normal to get an error we generated this whole UI request to replicate Doom um this actually failed so we can paste this in and say um this failed and this is actually a good lesson I'm glad this happened because

what we can do here is let's just go to replicate and uh Beyond just perplexity they might perplexity might is not perfect every time I just like to do it especially with like open AI claw in the really popular ones it's really good but there's a ton of different models on replicate so that's why it's struggled here I think and so what you want to do anytime you're using an API for something you want to go you want to find their docs and so here's their docs and this is where sometimes gets a little bit

confusing but it's worth learning I've learned a lot from just like asking AI questions about docs and what we can do here is we can say run a model with node.js which is what we want and what we can do is we can just copy this link and we can take it back here and say say this failed we gave it the error now I'm going to say um some uh additional docs and we're now giving it more information um and it it'll see this link and it will actually go to the link read everything

and then it the agent will process that which is so cool um and so we have that maybe we can use maybe we can find um oh and then if there's ever a playground and this there's all the best AI apps including Claude uh even like um even like 11 Labs things like that you can actually create you can go to the playground which will simulate whatever it is that you want to do so let's say we want to use this image model right here on playground it lets you generate an image just like normal

and then it will give you the code that you can use as an example and so here this is actually a really good example because we know it worked in playground this is how we want it to work in the app so I'm going to copy this as well and so I'm just literally going to say that uh in playground I generated this image use this um use this model and um we can run that and that's honestly something I suggest when you're trying to work with these creative AI models you can fully test out

how they will um perform before you even get to the code because you can just do it in the playground and if you're diligent enough in testing like what's possible then that's how you can create you know for a fact you're going to create an app that works um which is actually ironically how I created the the thumbnail generator I don't know if you saw that the one that just scrapes thumbnails which we're adding to Yap thread by the way um okay I made a few changes let's go ahead and accept it let's go back

here um Local Host 3001 what we're going to do is we're just going to come up here and let's just go man generate image okay so it's loading for longer no immediate failure you love to see that no yeah it feels good feels good every time you do something you want to make a little bit of progress see we made progress it didn't fail right away it failed after a delay which is fine like that's just the the name of the game here that's just how it works so we're going to paste this in so

and I'm going to make sure that it knows everything that we just saw so last time last time it failed immediately this time it loaded for a little bit and then gave me this fail message and I've noticed that people who use these tools are getting lazier and they're they're expecting cursor to just like do everything for them when they're not even explaining to cursor everything that's going on like it you need cursor doesn't see this my prediction is by the end of the year it will but um cursor doesn't see your web View and

so you need to give it all of the information that you see and the more correct information you give it the better and that's the same if you're working with real developers you know you have to give them full context or else they're not going to be able to fix the bug um okay pop out this terminal it's installing something else okay let's go ahead and accept this I mean it's basically cursor agent is basically a real developer as far as I'm concerned right like a junior to you know on on good days a mid-level

developer on on on poor days a junior developer what do you think yeah I mean like I think Devon is the only company like actually trying to build a a developer I think that a lot I think cursor has a lot of individual skills that are better than certain developers certain senior Developers for sure I mean and it finds information way quicker it doesn't create things in full automatically like Devon's trying to create that right now where like I could just give this idea for an app and then I could go eat pizza and come

back and it's just done after many iterations and so that is like the full that's where I think this is ultimately going in a year or two but for now it's honestly way more fun to like iteratively build on it my opinion so it's like I don't even know if there's a good example okay so I don't know if the server is running um internal server erir um hold on yeah okay so whenever you get these server errors it's because they ran some command we might need to restart it like restart on new server and

there are some things that you need to learn about using Local Host I haven't even learned all of them yet I I'm still learning um but it's fun it's not always glamorous you know it's not always one shot it's done and you're a millionaire yeah yeah and and honestly you don't even want it to be like that because as soon as it's one prompt then everyone's going to do it and you're going to have a lot more competition and so you always want to be up against the edge you know I think I said that

in the first episode we talked about it but um okay let's go ahead and accept this where is it running so where is it running what local link because this server does not seem to be running okay we need to run this command npm run Dev okay now it's running on Local Host 3002 so command click and full disclosure I have no idea what that even really means I just know it's running locally on my machine you said it sounded like you knew what you were say you know I was I was convinced I was

like oh wow okay well no I everything that I know is functional like I know how to get my app open but I don't know like what it means but I feel like even developers don't like a lot of things are abstracted you don't have to know what everything is I can make I can have millions of followers on social media without knowing how a cam works right you just use it you know um okay uh a man let's just test it let's not do cute failed to fetch Jesus well here's your sweat Greg we

go um why is this failing uh tell me why it's failing prior to fixing in concise bullets server might be restarting due to environment variables the file structure looks correct the main issue is that the environment variables isn't being loaded um okay fix fix just like okay generating command all right need to pop out the terminal now let's update the API route to use more robust error handling and logging that's never that fun but it will give you better information so that means we'll might have to fail again yeah um added runtime equals Edge to

ensure better performance okay accept and we're going to command click and we're going to type man generate image all right it's loading come on let's get it done boom there we go I'm surprised honestly uh 20 wait oh yeah 33y old man doing a podcast now um now let's add a let's actually add something here below the image and so this is just for testing purposes and this is actually what I've been doing a lot more of recently when building out tools is I'll build little user interface um info popup so I can see exactly

what's going on it makes the development process way more enjoyable and easier to test I'll show you what I mean I want you to list the model used and then all of the parameters that we're using with this image uh everything and I want you to put it in a little info icon bubble that when I click it shows in a little popup all of these things so I can know exactly what model we're using Etc this should pop up after the image is loaded you know what I mean oh I know what you mean

and so we might want to make adjustments judging by the quality of this image I think it's using like stable diffusion here I think this is a quite old model at the time it was good but um now it's quite poor and so we want to be able to test those things especially if we set it up to a dat datase we could actually get it to just save so we could actually have like you can think of it like a notion database of of all of the the image the model used Etc and that's

a good way to test um okay yeah so it is here it's using stability-a xtsl so this is one of the early AI image models um so let's accept this real quick now we're going to go um man doing podcast and hopefully we didn't break anything with that prompt I doubt it um so now we have this little generation details and so we have the model right here the prompt man doing podcast that's great uh withth uh okay so you see that's easy so now what I can do is I can actually just copy this

and say currently I'm using this and we'll just like paste that in just so it all the context I want to use this model and these models all operate differently and so that's what makes replicate a little bit harder it's not just like a one- siiz fits-all um so if we go to replicate playground what we should do is so this is Black Forest Labs flux Pro this is the best model right here I'm pretty sure um or at least it's good enough so what I want to do here is I want to go to

search let's type in flux um black forest 1.1 Pro was that what I said I don't think it this one's good enough this one's good enough and so if we want to use this we can click playground input um what can we do we can do examples I think that's good examples are really good to use and so what we need is nodejs and so here we I believe we can copy this and I want to use this model and just paste that in um and I just want to make sure that it knows exactly

and then let's go nodejs I'm just going to copy the code just in case multiple times uh here is another example from their site and we'll just paste that in give it as much examples as possible by the way you know I mean you're you're on top of everything so you know which models work best for what how does the every the average Joe average Jane now yeah that's a really good question I'm so tapped into to like everything I guess because you know I I I was just making content for a year and a

half on the top AI tools and honestly there's no better way to learn about the best tools in any Market than to be an influencer that actually cares about saying truthful information and you're not just like spewing nonsense because if you actually have a high standard you don't want to tell a bunch of people bad things and then I spent all day every day learning about the best tools and now I have this like mental model in my head of like where all the top tools are and you can kind of just plug them in

there's no clear honestly as I like this is a really good example of a business idea right like this is a clear problem that many people have that has required me to work for thousands of hours to understand what the best models are and like where to find that information and so that is a good business idea especially if you could like show examples on the site and maybe you have only like 25 models instead of like replicate has all the best models on it but there's thousands of models on here so there's not a

lot of learning for people um so yeah that's a good just to stick with the theme of the podcast you know um anyway let's go back to cursor sorry if that was a bad answer I mostly Twitter honestly yeah no it wasn't a bad answer it's the honest answer so I appreciate it I mean yeah just watch my content just watch my content um okay um what did we just add I forget oh yeah a better model okay uh a man uh recording a podcast and since we just changed the core model the odds of

a failure here is like relatively decent because these models act differently nope we nail it and so that one looks clear better you can clearly see the difference in quality as you can see here it did the correct model now okay now let's have a little bit of fun so now I want you to add right uh where do we want to add it let's just go right above the input field a toggle for what model we are using I want to the default uh to be the one that we're using right now the one

that you just changed it to that is the default but I also want the one that you changed it from to be an option as well and then I want you to add another option so there is an AI image model if we're talking about the best AI image models there's a model and it is on replicate it's called um it's called ideogram and it's a closed model it is on replicate though um and I believe we can just look up it is the best at adding images with text in them I don't know if

you've seen them on Twitter but as you can see here the the first example is this right here so let's go ahead and grab nodejs um let's just grab this code again right here and then we can also go to the examples and I'm just going to paste this um another option option uh we'll call this like option three we'll just paste that in that's another example and then we can give them because it worked last time to give them those two pages the examples and the example output um we can paste this in right

um resources resource paste that in and let's go ahead and run that and yeah we can just kind of iterate and add features and I think this is actually a good starting project for people like I don't think you need to start off with the app that you're going to make millions of dollars on in fact some of the most fun I've had with AI coding is like building stuff that no one would use except for you where it's like absurd and like I was building like I learned so much in that period And I

think Paul Graham has this essay from way back a long time ago where like good programmers are sketching I don't know if you've read that but he he's talked about that and like this it's I think it's more fun to just like sketch out these these ideas live and like don't worry about like making something commercially valuable to start out I think it's really fun and valuable to just like build and just have a good time because it is fun it's fun when it works and when it doesn't work yeah but it makes it so

much more like remember the episode we did together when it finally worked at the end it was like the biggest sigh of relief you know it's like things that are easy to build aren't quite as fun like if push it push it so you fail for many hours it's the most Val I learned the most about this when I'm struggling hard it's a mindset thing though that's the thing like you have to come into this being like I'm gonna F this is going to be difficult this is a mountain I have to go uphill on

this mountain it's not a flat Journey let's do it a diagram of a mountain and we'll use ideogram by the way you see this change so ideogram a diagram of a mountain uh labeled um cursor Mountain Mount cursor Mount cursor Mount cursor and uh a diagram of a mountain labeled Mount cursor a diagram of a a grassy a grass now let's just let's just see what it does try this generate image a diagram of a mountain labeled Mount cursor anyway sorry to cut you off I thought that was a fun idea yeah but yeah I

think it's a mind my point is it's it's a mindset thing if if you're going to come into this thinking that you're going to do a prompt or two and you're going to get a product you're going to you're going to be super frustrated what no way yeah so as you can see here the reused ideogram right it works perfectly like we have an AI image generator and all we would need to do we could literally you like I could literally create this with every AI image generator and because I have a big following I

could probably create if I wanted to allocate a bunch of time and like figure out the database back end like create an AI image generator for people to use I don't want to do that but I think that there's a lot of space in the market to just like build tools for specific use cases this is actually a one use case that I don't think has been cracked yet which is the diagram for presentations like some of the best presentations I've ever seen in my life are with really clear and simple diagrams that aren't like

you want really simple diagrams that captures the true essence of of what the person is presenting about and I think there's a good demand for that so that's just another random startup idea um but like yeah we just created this and actually um let's do some design so where some people like in vzer start want to start with design I like to get the core feature in and then I like to do design and we can do it right here and so I want you to create an absolutely amazing design for this app change absolutely

no functionality like the functionality should remain exactly the same I just want to make the interface look significantly more modern and I want uh in the top bar to have the title of the app and this app is called Mount cursor I don't care we're calling it Mount cursor and we can now design it and because this looks pretty ugly like this big blue button it's kind of ugly um in fact we could actually bring in an example let's let's do that um there's a there's this I love the interface of this I don't know

if you've used miniplex I think it's miniplex do run um miniplex do run anyway it's like an open nope um I think it's just mini this is where your curated tools and models database would rip it yes agreed um I don't know where it is okay we're just going to let cursor decide I was going to find an app that I think would actually fit this pretty well I can't think of another one off the top of my head um so just let cursor go to work um yeah and then we have this and since

you we started with my own uh template which has Firebase built in all we have to do right now is tell cursor to implement uh Google Firebase we can do that if you want it would be an extra 10 minutes if you want to we don't have to but I think we you want to add a database all right after we design it we'll add a database um and again we put in a lot of effort into these templates to get Firebase set up look at this Mount cursor um okay um yeah wait let's see

what it o I like because you can watch it change live just like you can they added that feature when you run it locally you just see it change live which is great it's just like vzer um obviously there's like some design flaws I'm not going to get into this like little like that's easy to fix I just don't want to do it now I'd much rather do higher educational impact so is it done oh wow it's still going um okay it's done so we can hit accept and here we have this app let's go

ahead and refresh the Local Host um and to do that you just come up here and you just press enter and here we go again like look at this this is clean um you know obviously this but but like it's fine so we could just go to ideogram a man holding a sign that says um Mount cursor maybe we want to make an Instagram post that no one will look at um and so we can generate an image but the problem right now is that that image will disappear right it will show up however actually

this is a good learning thing if we go to replicate right if it's your account on replicate if we go to dashboard we actually see all of these so we can actually see this live we can see that this is running um and we can see that all of these succeeded if we click on this right here this is the last one that we created which was Mount cursor and this is a really good thing to like constantly pay attention to see if they're succeeding or failing there's certain reasons so this one's done so now

if we go back we will be able to see it so let's go back to Local Host and you can see that we have this photo of a guy holding a sign that says Mount cursor and it even put it on a mountain you didn't even ask for that um um that's pretty cool so what if we wanted to save this to your profile like what if Greg wanted to sign in and so we can say I opened up a new composer because the context was getting pretty long they added a new feature that allows

you to see all of your cursor history which is insane at any time you can go back and you can roll it back we can restore it to where the code was before I ran this prompt which is insane it like completely you don't even need to really use get like you don't even need to save because it basically does it automatically it's insane how much value this tool has like it blows my mind still so what we want to do now is we want the ability for a user to sign in with Google and

then save this image to their database and so what we're going to do here is I'm just going to ask cursor I want you to look at this whole project right here this is a template that we have used preconfigured with Google Firebase authentication and storage what I want you to do is I want you to allow the user um to sign in and if the user's not signed in they um uh yeah when if the user not signed in they shouldn't see the homepage they should just see the signin page and then after they've

signed in they should be allowed to generate images once they generate an image they should it should automatically save to their storage and there should be a my images tab at the top that if you if pressed it takes you to a new page and shows you all the images that you've generated okay let's run that and now we have some things we got to do whenever um you created a Firebase database there is some manual steps if you've watched my videos you've seen me do this many times um so you're just going to go

to console Firebase is free to start when they start making real money is when your app becomes really popular and your bill goes up like crazy so we're working on templates for um many different types of databases uh for instance Yap thread that we're building right now we're using instant DB uh because it was we thought the best deal and it's immediate so like all of your devices are synced immediately which is really cool um but think Firebase is by far the easiest to use way easier than subab base many people like subab base because

it's open- sourced we've tested both firebases easier um I'm just going to do um Mount cursor so we're just creating a project we're going to hit continue don't enable Google analytics for now just makes it a little bit more complicated you can always set it up later and while that is loading what we are going to do is we're actually going to bring this over here and because I'm going to cancel this project I'm not worried about the Firebase API keys because as we talked about early earlier we need to use API tokens and so

we're going to hit continue right here and what we're going to do is we're going to hit this web app so now we're making a web app so we're going to call this Mount web app and so you can connect your database to a web app an IOS app and an Android app um which is useful if you're building multiple things I recommend starting out on web so these are our my API tokens I can just copy the API tokens right here and I can actually go back to cursor um and I can say here

are my API tokens put them in the correct place please in the EnV and I can just paste these API tokens right here and since we're actually going to be paying attention to this storage bucket because we're actually not even yeah the Firebase database is just going to store basic information about the user but we need the storage because we're actually storing images um if your app is text only like if you're building like a chat GPT clone you wouldn't need storage but in this case we do and it's really easy um all you do

is hit continue to console now we're going to go through the three steps real quick so this is done it should be done it looks like it added the tokens into the right place and again we're on like prompt 8 right like we've created an image generator three models and we're setting up a database um so you're going to go to build and you're going to go to firestore database there's three of them that you need to do first one is fir store database once it's done we're going to hit create a database and we're

just going to hit next and we're going to start in test mode test mode makes very you have way less rules right when you're in production mode I recommend doing that before you launch it not right when you start out or else you're going to run into like annoying errors um so we've created the database we need to do nothing else on this on this page now let's go ahead and do storage and here we have to upgrade the project um um and then you can set a limit which I like that when I started

doing this um there wasn't this feature that you could actually set a limit and what this does is it limits the amount that you could potentially so like if you actually got attacked by like someone trying to like hack you and like they just like ran your image model or like ran a script to just overload your database you're going to get capped out at $20 which is good which is plenty to start out um which by the way happens like you know it's not completely uncommon so so it's worth putting in we when we

launched Yap thread we got the someone tried to do that on like the third day we launched I don't know why but um we were fine um okay so yeah after you've connected whatever billing information it's kind of annoying Google if you're watching this make it easier um continue uh start in test mode create now let's go to authentication and what we're going to do get started so this part what's cool about running local host is it's automatically set up to authenticate Local Host so when I did this with repet in the past you have

to actually authorize your Dev domain which is like the server that it's running on but it automatically authorizes your Local Host so all we need to do for this part is go to Google hit enable and um we just select whatever email that you have signed up as the support email and we hit save so we have literally set that up um and that is should be everything um we did D database storage and we should see storage so here are the files that show up here in database I think that's everything that we need

I might be wrong feel like there's something I'm missing um but let's just go ahead and say I always like to restart the server so I'm just going to say um okay I set up the database base and storage actually let's just see what it looks like let's go back to our old view let's see what it looks like and let's go to Local Host 3000 okay so we got the Google signin button it's right there and because we haven't signed in it's loaded right here I think we just need to refresh our server actually

um to like get the updates from the database so here we can just press sign in with Google as you can see here we can sign in we can choose this email right here sign in to cursor. firebase.com continue and boom here we go so I'm not seeing the where it would save but let's just see what happens when we generate a new image um let's just go man generate an image here and I'm going to just in preparation for the error I'm just going to screenshot this um and copy it to my clipboard um

this one seems to be taking a little bit but okay so we have this generation we have the generation details that's great now there's nowhere we can see um so I set up the generation and storage I just pasted that image in I don't see the page that lets the user see the images that they've generated I want that to be in the top bar and so we can run that with the image right so it knows what page we're talking about and hopefully okay so it added a my images page and added a link

to the navigation component oh it's not visible in the UI okay interesting so hopefully it's fixing is it going to get it oh there we go now it has my email listed here at the top my images tab up here which looks pretty damn good like just looks fine and like looks fine I mean like this this is an app that people like looks looks fine okay all right so now it has this back is it done let's make sure it's done um cool so we're going to hit accept all and we can hit my

images boom there it is there's my image and now last thing we can do is say below each actually um to the right of each image I want you to put all of the info that's in the pop up um except but just make this visible because we will want to compare these also I think you have it by default as Square it needs to be whatever the aspect ratio is I want it to stay like that um uh so have no limits on the aspect ratio so if it's a rectangle make sure it's a

rectangle if it's a square it should be a square um and then I think that's I don't know how much time you have but maybe we should try and deploy this like it would be like a full stack tutorial but up to you I'm just gonna 100% I got time to deploy kidding me so we're going to go for it so after this change we're just going to accept where the app is at even though we could add some more and then we're going to deploy it to the internet because that's the full stack that's

what people want to learn how to do our next template that we make will have payments built in we're still working on the best way to do payments payments are hard um they're not s once you get pretty good at cursor you can set them up I've talked to a lot of people who have got payments set up but payments as a template is quite difficult because there's a lot of um edge cases for payments um and we're working on a way to get templates setups or a template setup so like very easy to add

payments look at that oh wait no prompt available and again this is another good learning moment the reason it's no prompt available it likely has something to do with um what uh the code wasn't updated when we save this image so all images going forward will likely save the data correctly but um for example if we just go to generate now and we use flux Pro uh man walking generate an image um um okay you see here it changed it like this which is fine I'm going to leave that like that for now if anything

I actually kind of like that more just to like see it and like you get the parameters like oh wow wait this is actually cool because we could actually get like this could actually help people create AI image coding they could just like if there's a copy button on here they could just copy everything that they need about it and just toss it into their app or into cursor that'd be really cool um here so here's a good example exactly as I said right um now that we've edit up this code it literally stores this

information right here perfectly and I am signed in if Greg were to create an account and do this his data would be separate um so yeah let's deploy this thing let's see how quickly we can do it let's see if we can do it in five minutes so the first thing you're going to do when you deploy this is we're going to go to GitHub you need to just learn how to create a repo on G on GitHub and so we're going to create a new repository um I'm going to hit public name repository Mount

cursor and what we're going to going to do is we're going to hit create new repository and then we're just going to copy this link right here yeah and say and this is again cursor agent made starting projects as we've shown in this video incredibly easy without any other tools we're going to be using verell to deploy this but again in order to do it we're not even really going to go to verell we're just going to um we're just going to be using cursor agent to do almost all the work and so what we're

going to do here is we're just going to paste this in and say I I created this new GitHub repo and I want you to deploy this app to versel and and save it to GitHub or commit it to GitHub or whatever the term is I don't know um to verell and then we can go to verell and I don't know if we need to create a new project maybe it'll create a project for us I think it might um and so this is where a lot of commands are going to happen here um yeah

no idea really what's happening um whenever it says pop out terminal I always press it I think some of these need to pop out terminal we did get an error um oh it tried to add a new add the repository and it failed and then it says I see you've already added the repository I didn't know that it could just create it so we didn't even need to go to GitHub and create the repository um so wait okay so now for deploying to verell um okay so we need to go to versell and hit add

new project so let's just go to verell new project and you're going to need to create these accounts it doesn't take that long um wait so we need to create a new project how do we do that um project what is oh how do we add a new project what's going on here is this verel or this is v0 um I'm pretty sure cursor can just do it can you just do it on for cell please create the new project I'm pretty sure it can and so these are all the API tokens that you need

to actually paste in here let me see okay yeah I got nothing I'm going to remove all of these after this that's okay I think it is just creating it um I'll help you deploy to versel using the versel CLI um oh I need to sign in okay um okay that's easy so it's automatically took me to this link success immediately in one click um your GitHub repository uh to deploy every Branch push automatically okay congratulations you're now logged in to deploy I think we need to keep going here pop this terminal out oh yeah

here this is what we want so it says set up and deploy yes or no we're going to press yes and we're going to now let's just go like this you just select whether you want to do it on your personal or your business uh link to existing project no because it hasn't created a versell project yet what's your Project's name um I'm just going to keep it as Riley Greg pod 4 because that's what I normally do I'm just going to press enter and then in which directory is your code located I just press

enter here because I was told that in the past so I'm going to press enter and do you want to modify these settings no okay so now it's doing something it's uploading and now we can actually press this open and we can see here that it's building so our deployment is building to this domain so Riley gregp pod blah blah blah blah blah verel doapp now if we wanted to add our own custom domain all we would need to do um it's only a few steps I'm pretty sure you just go into settings wherever that

is I did it the other day in my last video and you just find settings and then go to name cheap paste in the code and then you can set it up to your own domain super easy um this takes a bit this should I think it'll take like a minute and a half maybe um any questions not really but I actually came up with I was thinking about your startup idea around diagrams and I just checked I have like a name for it potentially that can give to people if anyone wants to go build

it and the domains available so one idea for the name is diagrams but instead of spelling it d a g you just it's diagrams like with AI in it that's available and there's also diagram sorry di like basically diagramms so right diagrams one word but it's Ms that's available you know the diagram company diagrams compan is kind of cool right I like it I like it um okay so it failed on the deployment and that makes sense I don't this is I've only done this like two times where I've deployed here um what we need

to do and again this is part of the fun is you get to figure out how to do these things um so I just copied this it's because the API I forget where we put the API tokens oh oh logs no deployment no um where do we go is it build logs or huh we can just ask her sir we can say okay I got this error uh where do I put the API token in versel oh wait I didn't paste it um and so what we need to do is we need to go up

here and grab these and we can just copy this it's like you just need to find the place to paste them I think that's why it failed um okay um go to the deployments tab okay we're on the deploy ments tab find your latest deployment click the three dots and select redeploy this will trigger a new deployment viral variables okay so we can just set redeploy um that's annoying it doesn't let me um it didn't give me a place to put put my tokens how rude oh we need to just go to our projects here

so we need to click out of this um go to projects Riley Greg pod three dots view logs maybe that's it oh okay no deployments this does look different okay this one's building it's likely going to fail we plus three dots I still wait did it build again all right this will create a new project if one doesn't exist link your local project to versel start the deployment process once this completes you should get a URL in the settings tab in the settings tab like why don't I see that wait go back to deployment is

it in the three dots is it here I literally I'm going nuts okay all right back to the screenshot when all else fails where like we're literally almost there we just need to put in our API keys and it'll be on the internet I just for whatever reason I feel like this interface is different I I could see the top of Mount cursor we're almost there um okay go back to your project overview by clicking the project name at the top where's okay this right here project ah this is it for sure um no I

do remember this page though we're almost there we're there what does it say it says um oh click on the settings menu there's settings that's what I'm talking about there it is um okay please be here where is it environment variables there it is key paste boom what's this so it says open AI key replicate anthropic deep gram this project is not using hold on because our template is set up with open AI uh we have open AI code in case you want to use it already in there we need to make sure uh it's

not using um it's not using open AI um anthropic or deep gram I don't need those keys um please make um do I have to add them there is no features with them um yeah honestly I think we need a better closing prompt like a prompt that we use every time we build an app that says deploy to ver cell do this this and this and this I think we could get it down like we've gotten down most of the other process the thing is I just moved off repet and so I'm learning with everybody

else which is fun um okay let's pop out this terminal don't know what that did um now you need to only add one variable okay so now we just need to do replicate API token which is already in there okay let's see did it redeploy again let's go to Project let's redeploy now or I'm just going to tell cursor to do it okay redeploy now that I've added them okay so in order to put your API keys in you need to go to um all of your projects so you need to go to your projects

right here then you need to click on this page and then you have settings environment variables and then if you click directly on projects and go to build logs that's how you get to this page to see the individual status of this build log okay we're learning diagrams AI I like it I think diagrams di just diagrams Ms Right D Ms like it's di grms diagrams okay okay Ms okay I don't hate it I'm not in love with it though okay diagrams. Co is also available I mean it's not that AI I know you're an

AI guy yeah I'm actually I'm learning more about I think do like I think the AI is going to wear off soon like I think it's going to become uninteresting um which I actually like your prediction about the Super Bowl about how like there's going to be so many AI ads I don't know if it's going to be during the Super Bowl but I mean partially it's already partially true like there is a massive Chasm between people oh there we go look at this so Riley Brown Riley Greg forp pod ver. oh this is a

really good thing to learn so this is on the internet this is fun okay so watch this this is going to fail and the reason for that is we need to actually take this link right here um also um for I'm going to put in the chat how do I oh on Twitter I'm going to send you the link so you can sign in but not yet um what we need to do all right so I sent you this link Greg what we need to do can you still see my screen like you see Firebase

yep okay what we're going to do here is we're going to go to authentication and what we need to do is we need to go into settings and we need to go to authorize domains add a domain and we need to paste this domain right here now that we've added that we can go back to we can go back to to our um this link right here wherever it is actually let's go new tab paste this in now in theory it should work there we go so now we can sign in now I'm going to

sign in with that same account that I did from the dev domain um we're on Local Host and we're here if we hit my images we're going to see the images that I've generated and um yeah you should be able to sign in for free and use it right now with that link crazy like unbelievable yeah and um yeah that's what we did so I guess in conclusion we started off in cursor we created a new project with an empty folder basically an empty folder that's safe then we used a GitHub repo which was one

of my templates that I'm sure you can put a link in the description or something all you do is say fork this repo and Fork this repo and run it locally in one command I don't know why it's in one command but that just works better for me and then we ran it it immediately created the um the template page which is basically like the page where you get started from it is a nextjs blank canvas where you can do anything from there we asked you to create an AI image generator it failed on the

first one and the second one each time we added the errors back into cursor and then we added additional documentation and examples until it got it and once it got of the models it was very easy right here to add the other models and we added three AI image models and then we also added the ability to see all of the parameters that um were involved with that image and then we used the template again to connect it to Firebase really quickly and now you can sign in and all of your images get saved and

you can now sign in as well and then we deployed it to the Internet so you can send it to your friends that's what we did and in an hour and like 15 minutes something like that you love to see it pretty cool pretty cool we'll include that link in the show notes um what else should we include in the show notes Riley um you can plug Yap thread app. Yap thread.com um just if case this is going to be in the episode I just finished this app um I actually have not announced it we

aren't going to be announcing it until we fix a few more bugs but it's ready to go um we added just like composer we added a composer feature which allows you to save your notes Here on the left you can chat with AI and you can ask all your bookmarks um what sources we call them sources not bookmarks have I saved on Mid journey I actually don't even know if this is this is the local but you can basically ask things to this AI model you can record your voice and it's just like the ultim

writing tool here are all of my sources that I've saved and if you want to very quickly just add something to your thread you can then use AI to create compositions um and yeah I'm not even going to get into that I've been working on Yap thread for like a month and a half off and on um and then we have software composers uh and this is where all of our templates are stored it's a free community you can join I think we have close to 10,000 people now and we just hang out and we

talk about building AI apps so that's what those are LCL that in there so people could access it easily and uh and I'll reveal my age you know I can't end this episode without revealing my true age which is I'm 35 years old oh wow okay I was close somewhat close you're close you were close so yeah uh turning 36 next month though so okay how many people do you think were watching only they're like all right shut up I just want to know his age they're like they're like skipping ahead to skipping ahead they're

like screw this tutorial how old's this guy um well well done I whenever I make promises early on in the episode I forget so that was good on you for remembering no this is to to my community I I like to under promise overd deliver so I love it I love it that's where I'm at let us know in the comments section what you thought of this episode uh I'm in uh I'm always in the comment section so uh I'll be replying in there and uh Riley thank you for being so generous as your time

and your wonderful brain um I hope to see you soon let's do it again soon thank you later peace siing time baby