Complete Guide to Cursor For Non-Coders (Vibe Coding 101)

today we're talking about building apps with AI this is a comprehensive guide for you with no coding experience you'll be able to build an app by the end of this video this is going to be the most comprehensive cursor tutorial for those who want to Vibe code Vibe code is the act of speaking or typing into cursor composer which is the smartest AI tool for coding in the world by far in this video we're going to talk about this in three parts the first part will be the basics of cursor and so we talk about

all of these different things we're going to go through all of the vocabulary everything that you need to know as someone who doesn't know how to write code to communicate with AI powered coding tools like cursor and so in this first basic section we're also just going to build an AI image generator and I want you to fully understand how relatively easy it is to create really cool apps you don't need to pay for other people's software anymore the AI image generator that we create looks like this and so we're going to be able to

uh say a man riding a bike with an e.l.f hat on and I will show you from scratch how I built this very quickly and boom so we created this AI image generator we can copy we can download and then in part two we built this landing page and we found a library on GitHub that had really cool animations and we just remixed it and created this landing page and we also went through the process of deploying it and uploading it to our own domain so I bought a domain a gate.com and that is this

site you can visit this site and I'll show you everything every step of the process to create this and then finally in part three we T we built an AI powered app and this app really targets one of my big pain points with the new open AI deep research I really like how it can create 10 to 30 page reports but it doesn't have images built into it which is why I wanted to create an app that allows me to paste in all of my ideas and then I could generate images for the different section

so I can generate charts with AI and this allows me with one click to generate charts with AI and if I want to make changes I can actually talk to an AI and say mention the companies here and explain these more in the chart and so we used claws API to allow us to edit these charts and so now we have this chart here that we can view that automatically created by AI it shows all the different companies and how they can either race competitively or prioritize safety and slow progress and then it shows the

different outcomes you can export this as a PDF and so it's just a more fun way to read the Deep research project those are the three apps that we created today and I'm going to go through all of the basics getting started with cursor and then we're going to build these apps and we're going to talk about other things like how to use GitHub as someone who's literally can't write a line of code or understand code for that matter we're going to talk about versel and deploying apps to versel I promise you it'll be worth

it you're going to love Vibe coding I'm Riley Brown let's dive in this right here is cursor and you can download cursor at cursor. comom I downloaded it for mac and whenever you open up a new window after you have it downloaded this is what it looks like this right here is Bolt and bolt is a friendly familiar interface just like GPT you can type whatever you want and in a chat like experience it will generate the app that you want except it's hosted online and many people love this it's just a simple website you

go to you immediately type it in while cursor is a tool that you download all of the project files are hosted on your computer and by the end of this video you'll understand why I think that's actually a good thing and the reason why a lot of people prefer this experience over this experience is because of the interface and it's just easier to get started but I think that you'll run into a lot more roadblocks using web-based tools than cursor because I think the cursor agent is just the most Superior and I think you'll understand

that by the end of this video so the question many of you may have is how do you get to this experience within cursor how do I type my idea in cursor to have it generate the files so that I can create the app that I want and I'll tell you right now so when you create a new cursor window there are three options open project clone repo and connect via ssh in this video we're going to go through this one and this one let's go ahead and start off by going over this which is

basically creating your new project from scratch so if we press the open project button we are now taken to our file system and people might be you know confused they're like wait files I don't know where to put it it doesn't matter pick a place where you're not actually going to delete it and you're creating an empty folder that's how you get started on cursor so I'm going to create a new folder and we're going to call this let's call this new project for tutorial doesn't matter what you name it you're going to press enter

and then open then what you're going to do is you're going to press command I and congratulations congratulations you made it to this what this is is this right here they're the same thing except this one gives you more control so we now have a cursor window open and we're going to turn this to agent mode okay so what the hell is composer composer is an AI agent that allows you to create files edit files and delete files and run terminal commands within your code base and you might be thinking what do all of those

terms mean so let's ask composer what is a codebase answer by creating a new file called uh codebase explanation uh text file and we're just going to use the agent and as I said earlier it can create files and the codebase is just the collection of files and that can be found right here so you see here it created this text file called codebase explanation and it it basically created this right here this is a text file and now we can read what a codebase is so it is all the programming files written in various

languages and all of those files will show up right here we can also create folders we're going to name this one folder and then we can move this into that folder and we can hit move and so now we have a folder with codebase explanation and and we have created a DOT file computer software doesn't run on text files it runs on special other kind of files that I don't know how to write luckily AI can write basically anything I ask it and if you learn how to prompt AI correctly you can get AI to

create highquality applications and there's a lot of controversy around this but it's true okay so not only can we create text files we can also edit them please make uh code base explanation longer 10 paragraph essay and we can use the agent that will say let me expand on the codebase it says it's reading the file now it's done reading the file I'll now expand this into a con comprehensive 10 paragraph essay about code bases so it can very easily change the files within your app so you see it shows the diff view so it

shows what it's removing and it shows what it's adding and since it's in text file you actually don't see the paragraphs because txt it doesn't have like automatic line breaks in order to see line breaks we would actually need to change the format we can do that can you change this file to MD which is markdown and this will change it to MD and then we'll actually be able to see the paragraphs and so what it did is it took all of the text from the previous one and it created a new codebase explanation. MD

file and then it deleted the old txt file which is basically the same as converting it we press accept and now you see the line breaks and this is in markdown and many smart people who write a lot for their job actually use cursor all the time because you can use the agent to make edits you can also use the chat feature within composer which I'm not going to talk about as much because as a Vibe coder you're mostly not you don't really read the code necessarily because you don't always have to in fact I

hardly ever read the code I just rely on composer but you can select this right here and then you can press chat and we can say make more concise and you can make changes and so if you know a little bit about coding and you can uh you can actually highlight parts of the of the file and make Chang es and then you can press apply and we can press command y or you can select that right there and it made the change and it gives you full Precision over all of the files within your

code base so I think you understand the basic premise that there are different types of files over here and when you work on really big projects the amount of files might increase to hundreds or thousands of files depending on the size however when you're starting out it's useful to keep it as small as you can because it does get harder the bigger your code base is which makes sense right that intuitively makes sense as a programmer that's the same thing as a Vibe coder using AI decode that still applies so now let's go ahead and

generate some code files so let's go ahead and open up a new composer window now that I'm working on something completely unrelated to uh what we were doing previously it's good good to just open up a new cursor window because all of the previous messages in your chat will affect the later chats and the longer these threads get the worse any AI model performs you want to reduce the context so just frequently create new chats and try not to make it so long that it says previous messages above this once you reach a point where

it says see previous messages in your chat it's a sign that you need to move to a new chat so what we're going to do is we're actually just going to rightclick on this and we're going to hit delete now let's create some front-end designs using cursor from a blank project so I'm going to delete this folder we're in a brand new cursor project now what we're going to do is we're going to generate a cool design now let's use this prompt I no and let's make sure that we go to composer I I want

you to create an HTM and JS animation of balls bouncing in a rectangle and they should be red blue green orange and white so we're now going to press enter and you're like okay where are you even going to see these balls bouncing is it going to pop up right here is it going to pop up over here where is it okay so it's creating a file as we saw earlier it creates files so it created this index.html file and if you can read this great and it's fun once you get in the hang of

it to change some of these variables because you can intuitively understand what it does right you can uh change the the minimum height um you can change the alignment so you can change this from Center to left or to right um and here it is done creating animation. JS so we're going to hit accept all so now we have this index.html file and this animation. JS now you say run it locally I want to see it you could probably just say I want to see it and the agent will understand what you mean so what

I'm what it's going to do is it's going to create a local host server so it says all use Python's built-in HTTP server server to serve the files which is a simple way to view HTML files locally so it says now you can open your web browser and visit this link right here let's go ahead and copy this and what we're going to do is we're going to open up um whatever browser Chrome uh I personally used Arc and we can paste in that address and we're going to press enter and look at that we

can now see the these balls bouncing around the frame exactly as we asked it now what we can do is we can say add four more green balls if you're asking why is he doing this I don't know it's kind of fun and I I like it is a really fun experience to just mess around with it and let your just curiosity just go you don't need to think okay how do I do this to convert it into money the fastest way to not create any money from the activity of learning how to code is

to think about this activity as just like utilitarian and not just exploring because all of my good ideas from this has come from just exploring and learning the possibilities and so I encourage you to have fun so what we're going to do now is we're just going to press accept and I'm going to come back over here and we're going to press command R which is going to refresh this Local Host server and we're going to hit refresh and there we go it added these green balls now I want you to make these balls bounce

off of each other so right now they're going through each other when I want them to bounce off of each other and we'll go ahead and run this and now that it's done we're going to press accept now we'll come back here let's go ahead and refresh this let's see if it works okay and you can see that these physics are not perfect right they they sort of bounce off each other um and that's because uh there's a lot of different things that we could do to make these balls bounce off of each other and

make them better but the point is is you're constantly changing things changing variables and you should always tell cursor specifically what the problem is this is not doing a good job of mimicking how these balls would realistically bounce off of each other they're kind of like glitching and it looks like the center of mass is does not represent the border of the balls don't cause the bounce and it doesn't bounce in a realistic way is there anything you do can do to make them bounce off of each other when the edges of them touch it's

like when the center get somewhat close to each other it's hard to explain but please figure this out and we're going to run it and if you're wondering how I am doing the voice I am using an app that is called whisper flow and Whisper flow allows you to speak into your computer and then it creates text wherever your cursor is so in any app that I want I can hold down the FN key and speak and it will create that text and this is the icon this is what it looks like and I haven't

even gotten Pro yet it's free this is like one of the best free plans I've ever had because this app is very very good so now that it is done let's see if this works so we're going to press accept and now we're going to come back and we're going to refresh it look at that check that out now they are bouncing realistically off each other all from us just describing what the problem was and now they are bouncing off of each other very realistically and there we go and we're creating this little design and

you could put this on your website I don't know why you would create this but the point is you can create simple one Javascript file and one index.html file and this is a really simple and good way to get started without creating a bunch of files so I just opened up a new composer window I made sure agent was on and I have CLA 3.5 Sonet on as well I think it's the highest quality and fastest model for cursor composer and that's the one I use now we could actually abandon this whole idea of these

balls bouncing off each other and what we could do is we could turn this into a landing page okay abandon everything I want you to get rid of these bouncing balls and I want you to create a landing page with no scrolling that looks like an early 2000s website um on animation I want it to be like this retro animation website and make it Epic no idea what it's going to do here but my point is is once you create files you can just say abandon everything let's delete the existing files since we're starting fresh

and it will create a new retro style website okay it is done let's go ahead and hit accept all now we're going to press command R and there we go we have this early 2000s anim agent welcome to the hottest animation site on the web home animations downloads guest book and right now like when I press so what I could do is I could actually just highlight these right here and press copy and if we go back to cursor if we go back to cursor I could just paste this in right here when I click

on each of these can you please create a different animation and and within this box I want something else to pop up let's go ahead and press accept and we're going to refresh this now if we press animations we now have this DVD Bouncing Around The Edge this is a classic we can press downloads obviously these aren't good we didn't specify what we wanted we can press guest book whatever we can create this little fun page right here with basically no effort okay that's cool I'm done with this little project right here and I opened

up a new cursor window what we just did right here and we created this by using the cursor agent uh to create all the files within it this is two files an HTML file and a Javascript file and we did this by just starting our own project then asking this AI agent to create this great awesome now what we can also do is we can use this second option which is called clone repo and when you press it you'll see provide repository URL or pick a repository source and so this is GitHub and do not

be afraid I was afraid of GitHub for a very long time GitHub scared me I have no idea what the hell all of these files are right but you do already these files right here are the those same files that we had open to create this site right here this is just two code files right this is two code files right here and we created them with the agent in fact we can open up this project right here that's made up of two project files and what we could do is we can actually come to

GitHub which is a place for developers to save their code and we could create a new repository and we could call this testing uh to files right we can just call this testing two files and we can make this a public repository and so if we create a new repository at testing two files on my GitHub account which I'll go over in Greater detail later in this video but I just want to show you how easy it is so we can just copy this link and we can just say I'm going to say save this

project to paste that repository link that I created just by typing in testing two files enter I'm I'm going to say I already created the repo please load files to this or commit I don't even know the official vernacular I just know put this on GitHub and we're going to press enter and cursor can actually do this directly from the agent it says it's doing these commands which we're going to talk about a little bit more I don't think we've seen any commands yet but it is running these commands and it's automatically going to create

the initial commit and now let's add the remote repository and push the code let's push the code to the main branch I'm not doing any of this this is all happening automatically great your project has successfully been uploaded now if we refresh the page right here we see that those two files that we just created on here are is now on GitHub this is public code so if you were to copy this link right here to GitHub where we just saved our files you could do this right now if you want to test it out

you could go to cursor and open up a new window of cursor press clone repo paste this in right here press enter um and we can create a new folder called banana Jones don't know why hit create select as repository destination open we now create this is basically like a template and so what we did is we forked it I don't know if this is what a fork is technically it doesn't matter the point is all of the public code on GitHub you can just like clone it and you can start coding from that point

there are licenses you want to be aware of some code you can't just freely use to to make money on but for testing purposes you could just Fork stuff you can find cool uh GitHub repos and just Fork it and we just forked our own repo however there is a certain template that thousands of people have used thousands of people have used this template and what you can do is you can copy this link this is a nextjs project and so we did a lot of work getting it set up so that it connects with

a database which we'll talk about later and it also is connected with authentication and we put a lot of work into this template so that you don't have to waste time so if we create a new cursor window let's create a new window and I want to show you the process of creating a nextjs project and you'll notice how much bigger the code base is there's going to be a lot more files we're going to hit clone repo we're going to paste this we're going to press enter and what we're going to do is I'm

just going to press select repository destination open and here we have all of these files and you see this Source folder this public folder the app folder which has components which has a lib folder which has contexts all of these are different things you can do within the app and we have it pre-built with a voice recorder that you can create we have it uh pre-built so that there's AI chat built in uh like chat gbt like features but we'll get to that later what I want to focus on is doing the first process which

is pressing command now we're going to press agent and so now we're going to start out from a blank template the first thing that we want to do is we just want to see it because this template comes with a front end page to start that is like your template page and so what we can do is we can say run this locally and what this will do is this will I'll help you run this project locally first let me check if we have necessary files and set up to run the project so it's looking

through all the files it's looking through the package.json if when you're starting out don't read this just focus on what you want to create and focus on what it has created and then focus on communicating what you want to cursor the best you can because this stuff will just confuse you right now it's doing npm install and so this is actually a terminal feature that I'll also get to later and so here it says since this project uses Firebase open AI anthropic deep gram you'll need to set up the environment variables which she also get

to later don't be don't get flustered yet all you did was say run this locally and then it ended up with creating this document and it gave us this link right here that says HTTP uh Local Host 3000 you're going to press command click this is going to open up our template so we now have a nextjs App open and running and if you think about how long this took all you had to do is paste in the link press run this locally now we're in business right and let's go over some of the features

within here like if you wanted to change any text in here right this is a page that we created this is a page within here and we can find it by pressing this search bar and since when I started I didn't know how the code files were organized I let the AI agent do all of that and you should do that as well but if you just want to change text like imagine if you wanted to change this right here and you actually just wanted to use this template because you're not always going to use

this template you can find anything on GitHub there's millions of different code bases that you can start from and what we can do is we can just paste this in right here and let me zoom out real quick within cursor within cursor you can actually see that it says make anything you imagine and so we can highlight this and what we can do is we could um make anything you can think of exclamation point and then if you'll notice it didn't change you have to press command s so you need to save it command s

and here it made the change make anything you can think of okay so now let's change this to make an image generation app let's just create an AI powered image generation app and so in order to do that we're going to press new and we're creating a new chat remember we've created zero prompts so far all we did was say run this locally we haven't created any prompts for this project now we're we're going to do our first one and now we can actually start creating whatever you want let's go ahead and try it I

want you to create right now I want you to create a really cool looking AI image generator and let's say you have a very specific idea in your mind let's go to any tool that you want to use to like uh draft out a any uh tool that you can use that you can use tlr draw I personally use Whimsical and many people have actually been asking me what tool this is so I'm just going to say uh and this is not sponsored these are tools that I use there's no sponsor in this video let's

go ahead and put Whimsical and let's go ahead and what we're going to do is we're going to diagram what we want to create so I'm going to create this rectangle and so this will be the site and let's imagine we wanted to create an app let's just put um um describe image here and then and then let's say that we wanted and so then let's say we wanted the images to pop up right here and it doesn't need to be perfect right we're just creating a little uh thing and we're just um and then

in the top bar right let's say we wanted the top bar maybe we want this to be black and then we can add home okay so now we can screenshot this you can actually do this on an actual whiteboard and draw it out the point is here is we're giving cursor so if you screenshot it and then you drag the image into a cursor here I want you to create right now I want you to create a really cool looking AI image generator the input field will be light purple and I I will describe the

image there and when I press enter it will generate images in a grid right now I want you to just put placeholder components instead of the images there I'll add the AI features later I want to start off by just creating the shell have a top bar that looks like this image this is a rough sketch please make it look professional and have the background have dots like a gridline dots in the background that are gray and like nice and light and not too demanding I really like that look so look all we've done paste

the little sketch that we created added this prompt after owning the template rep repo by pasting a link and we're pressing enter we've hardly done any work and the hardest part now hardest part for a lot of people is accepting that this interface is kind of ugly but if you get past the fact that cursor's interface is kind of ugly and looks like a code base then I guarantee you you're going to be like oh my God I'm so glad I learned this so I'm going to press accept now what we're going to do is

we're going to go back to our Local Host 3 3000 and here we go describe your image a monkey R uh monkey writing a dolphin right and here we have the images um make a make no images show up until I press enter and I actually want you to mimic the loading process of these images and have like a nice little like blur while they're loading and just have them load for 3 seconds uh just to kind of see what it would look like uh right now I just kind of want to design this out

and depending on the type of Local Host some of these just automatically update as you make changes with the nextjs that does happen so it just changed without me even having to press accept and I actually want to talk about that there's a difference between pressing save all and accepting all it used to matter a lot more until cursor added the feature of the restore and this is one of the most important features I can't stress to you how important important these features are this feature is which is allows you to create to restore from

a checkpoint that you created earlier because if we let's go ahead and look at this and so what I'm going to do is I'm going to press accept all I now just press accept all because I can always go back and I can now describe an image right let's zoom in a little bit to see so we can say a man walking down the street and we can press enter and and now we have this nice little animation and then boom image will appear here and let's say we didn't like those changes at all what

we can do is we can go back to before I asked for the previous change and watch we can actually see this live right we can press restore It'll ask you if you want to revert the file and you can hit continue and so we can see that it went back to what it looked like before but let's say a I actually want to go back great what you can do you can click down here and if it lights back up it automatically restores it to the latest and then you can restore it back here

right which restores it back and then we can restore it back to our previous one which was our template right this was our template and now if we come back down here we click down here boom now we're back at our latest and you can always go back okay so what we're going to do here is we're going to add an AI feature we're going to add an AI image generation feature I'm going to show you how I use apis I'm going to show you an example and then we're going to circle back and create

a new project cloning a GitHub repo and then I'm going to talk deeper about apis so this is going to be kind of a roundabout examples way of learning all about cursor but first let's actually just make this work right so what I want to do is I'm going to press new composer we're at a good spot and the first thing I want to do is I just want to I don't like this purple I hate uh this purple please make it darker dark blue and make update that across all uh components get rid of

the purple okay we're going to run that this got changed to this blue color I'm going to say man the text is dark blue we can press enter and now everything is blue and it looks better I think let's not worry too much about design that purple was just like hard for me to see so now we want for whatever we or for whatever we type here right whatever I type here I want this to turn into images and you're like how the hell do you do that well what we're going to be using is

we're going to be using an API and so in very simple terms I want you to create a little info icon at the top right of this page that when I press it it opens up a center Peak toggle that explains what an API is explain this very simply like concise to a beginner and use analogies and make this easy to understand and why not use cursor here okay so now we're going to press accept we'll come here we see this info icon press this okay think of an API application programming interface like a restaurant's

waiter you the customer don't go directly to the kitchen to order food instead the waiter the API takes your order to the kitchen server the kitchen prepares what you asked for the waiter brings back exactly what you ordered right we are creating an app that allows a user to type in a man on roller skates there are many PE uh there are many tools out there you know that host an API that allow you to generate an image with a text input and AI is very good at taking the essential information about this technology and

converting it into your own tool use and you need certain things so the first thing that you need is we're going to need API key we're going to need documentation and and we're going to need a great explanation of the feature you want and the deeper your understanding of different AI tools the more fun you'll have building because I all I did for two years is test different AI tools and so I can just go out and I can just connect all these tools together to create my own super cool AI tools um when you're

just starting out the best place to learn is a tool called perplexity you you can also use chat gpt's uh web feature but I've just been using perplexity for so long that I'm just going to use prom mode actually we're going to use reasoning R1 and I'm going to say this I'm creating a nextjs app you want to make sure that whatever app you're creating you want to just specify what it is because the app that we're using to generate images the API has different instructions based on what language you're using so we need to

include that it's nextjs app and I want a user to be able to generate uh an image from text I want the best AI image provider API to use I already know um I'm just going to put FAL cuz I know I already have my API key set up with that and I think that's a really good platform for people to understand so we're going to use that you don't need to include it right it's often free to test API so you don't have to pay before you use them and you just get an API

for free so go ahead and test different apis it's very fun for this one we're going to use FAL um please give me the code examples for generating an image uh using a great high quality image model explanation and code examples this doesn't fully matter basically you want a how to use it here are code snippet examples because each one of these tools has a special uh syntax I think is what it's called there special way of writing code to access this API and we need to give that to cursor we need to give cursor

the instructions on how to use the technology of whatever um complexity fine and so here it's saying it's giving all of the requirements so here's a solution using flux one pro via f. API currently considering one of the highest quality AI image generators available in 2025 here we have this full thing right here what we can do is scroll down to the bottom we can press copy and I'm just going to um what I'm going to do what we're going to do is we're going to put documentation so we need to put the documentation right

here so we're going to paste all of that in we need to find an API key as well look at this falai dashboard SL Keys we can click API keys right here and boom we can add a key I'm already signed in I have $20 you get $20 for free when you sign up for FAL which is really cool you can generate a lot of images with $20 so what I'm going to do is I'm going to hit add key and I'm going to hit create key I'm going to delete this key right after this

video because if you could use this key right now and drain my $20 theoretically but I'm going to delete this key right after this video and so you can actually just put your API key right here and I'm just going to say beneath this put this in the right place that works then you give it documentation and then here at the bottom I'm going to give it the explanation all right our app is perfectly set up for the user to enter in text and and get out the images the four images that we generate in

those in the places that we've created placeholders so replace the placeholders with actual image generation here is the documentation for implementing F and I want to be able to just generate four images and what we can do if we wanted let's just go ahead and run this let's see if this works just by pasting in some code examp from perplexity pasting in our API key and our instructions down here at the bottom okay so in theory we can actually see what files it created and it actually put the key in the wrong place it put

the key directly in this route file so if you were to deploy this this is not secure this key is not secure at all so what we need to do is actually I'm going to paste this key and say put this in the EnV file that is secure and since we're running this locally this EnV file let's say you were to upload this to GitHub in the env. looc file this will be secure this will not be shown because this key is private and so anything you put in this env. looc file will stay secure

so you want to make sure that in the route. TS file that uses this instead of using this key right here which is my API key that needs to say private it's using this thing that points to it like points to fou API key which can be found in your env. looc file fou aior key if that makes sense so I'm going to press accept all let's go ahead and see if this works so we're going to go to Local Host 3000 I'm going to refresh the page make sure everything's all good now I'm going

to type in a man writing a surf board in Hawaii and press enter Local Host 3000 failed to generate images please try again so what I want to do is this is good if you get an error you can actually screenshot it anytime I get an error I just screenshot I'm trying to grab as much information as possible some other things that you can do when you run into a problem is you can press right you can write click and press inspect and then you can go to console and here we have some information so

we have uh we can copy this and we can actually just paste this back in however I just wanted to see if this would work just with perplexities information but what we need to do is we might need to give it more useful information I'm going uh going to give you more info on FAL image models and what we're going to do is we're going to come back here and we're going to go to perplexity and I'm going to just copy this right here I'm going to paste this in I need docs for image generation

give me inline links that are relevant just links to the docs and so here main FAL flux documentation great we're going to copy this let's or let's just go ahead and open it flu image generation and so we can click on this so we can also see playground and so playground is where you can actually test things so like this is extreme closeup of a single eye tiger and we can actually just run this directly in the app and if open AI has a playground where you can test the language models and thropic has a

playground where you can test language models look at this this is cool extreme closeup of a tiger and so this one is flux Pro the newest version of plux maintaining okay this is pretty cool um and we could change this to the word flux fluxmaster run and we can do some testing and this is a good way to test different image models text models voice models in playground prior to adding it to your app because it is going to basically do this same exact thing in your app except the output is going to show up

in your front end right that's what you're paying them for you're paying flux to do this technology to do this uh text to image and put it into your app that's what you're paying flux for and so what we might want to do here is we might want to just get the examples so if we click uh playground right here we can hit um form we can also change this to JavaScript which is what we're using nextjs is Javascript and we can actually just hit copy so this is the input uh result Json so we're

now getting the result code so I'm going to paste this in right here this is my code from the playground because we want to just give them relevant examples you want to make sure that that was input here is output and then here we have this Json we can copy this and we can paste it in right here we can show the logs there's no logs what we we can do is we can just run this so let's go ahead and run it and one thing I just made changes to my environment uh env. loal

file anytime you do that it's good to rerun your server and I could ask the agent to uh restart my Local Host that's what I normally say or you could come into the terminal which scares a lot of people and I think it's uh npm runev and this will actually open this up on 3 01 and we can command click on this and run it again and honestly don't do that if that even is sort of confusing you can just say rerun it because you do want to rerun your server after you make changes to

your env. loal file so I'm going to press accept on these changes I'm going to refresh the page here now describe the image you want to generate Man flying a kite we're going to run this this is looking good it should take a little while to load um you know the loading indicators aren't great okay failed to generate images you know what not everything is that easy all we let's just copy this and we're going to paste this in and we're saying I'm still getting errors with FAL please fix them okay let's restart this now

let's test this again uh man with sun glasses wearing a shirt that says cursor is lit come on come on please AI Gods yes there we go cursor is lit okay how do we download them okay so let's actually that's seems like a good thing to do you please create a option to for on all the images to one click download and one click copy this should be uh on the top right of each one as little icons don't have text have icons just allow me to copy and download the copy icon should have a

slight little animation when I press it and so here we just created a basic front end for an AI image generator and you can use this for various purposes this could be for graphics for Instagram for YouTube thumbnails you can train your own model there's a ton of different things once you start adding many different features so here it's loading let's see if this works okay I don't see it updating on the front end here let's try this again just refresh this page here we'll paste this in we'll run that same prompt and hopefully when

these images pop up it will show the ability to okay weird we got got this error so remember when you get an error when you get an error let's go ahead and we're going to go to cursor let's just open up a new uh chat say when the images loaded I got this error and this happened after I tried to add the copy and download buttons so as you can see here and when you uh work in nextjs and we're in nextjs you do get more errors because the codebase is just bigger so anytime you

get an error you just copy the whole error and you paste it in try to describe exactly what's happening to the best of your ability and then uh yeah see if it fixes it so what we're going to do here is we're going to now um paste in a man with a zra okay it's done as you can see here now it has this weird components um however it does have it so if I press copy it gives that little animation and we can download we can download and we can download and we can download

I could ask cursor to fix this part right here um but I actually don't want to continue with this project I want to go over how to use GitHub repos I want to use a repo I've never used before and how I navigate using a new GitHub repo as a starting point for one of my internal apps or an app that I want to make money on and so let's go ahead and focus on that we're going to clone a repo create a project then we're actually going to deploy this one on the internet okay

so let's pause for a second and recap what we've talked about so far in this video so we went over cursor and we talked about how to download cursor on cursor. comom and then we went over the different parts of cursor like the composer all of your files within your codebase and then where you view the files and we also talked about how you can ask composer to run it locally and then you can view it in web view on Local Host and then if you get an error when running it on your Local Host

like we created the AI image generator and we got a few consecutive errors this is going to happen every single time that happens you want to copy the errors in your console and you do this uh it's you can press uh rightclick on the website anywhere and you're going to press inspect and then at the the top at the top there's going to be some uh a tab that you're going to press it's going to be console and there you can find information so if we're on the website we can click inspect and then um

up here you press console and you'll see the errors right here and you can paste those errors into composer and you say hey this is not working this or that that happened here are the errors here you go and it will then right uh it will generate new code so the process is you speak or type and in order to speak I use an app called whisper flow and it just allows me to type faster because I can just do uh speak the built-in Mac speech to text is just not very good cursor composer will

then generate the code and then it gets applied to the code base whether that means adding removing or editing code files and then if you click on a code file you can see them here and you can make changes directly but since we are software composing or Vibe coding uh we are just focusing on using Ai and that's what makes these tools so revolutionary is we have an AI agent who can make these decisions so we can just focus on our end goal and this is just a a brief overview we haven't really talked about

planning we have not yet talked about using apis at a very deep enough level and we haven't talked about databases right if you were to refresh the last app that we created all of that data is gone so we're going to talk about that later so for the rest of the video I am going to divide the rest of the video into two parts the first part is going to be we're going to just create some design so we're going to do some static pages and then we're going to build an app uh we're going

to build an app with database authentication and we are going to deploy it to versel so we're going to put it on the internet we're not just going to run it uh locally we're going to give it a domain on the internet and then we are going to give it a custom domain and this will allow you to create an actual app that your friends can sign into and this is step one you want to learn how to do this before you learn about payments I I suggest building apps for yourself before you try and

build apps for others focus on that so let's start off with designs this is something that I'm really I've been obsessed with recently and I think a lot of things that we do in society people are going to start doing it a lot more and making little websites and really cool personalized websites things like resumés so things like resumés are getting a lot easier to create and it's very cool it's a cool way to stand out uh things like link trees if you're a Creator you know that link tree is massive and being able to

find relevant links it's somewhat like a resume in a way where you can find all of the interesting things about you and then landing pages this is a great place to get people to convert to sign up for your newsletter to sign up for your app to sign up for whatever and just like simple websites the design is very fun and very easy to do I just really think this is a great place to start so let's talk about design guess what we're going back to perplexity I want to make a really cool landing page

that has really elegant and fun animations and I want to use a new library and test out new uh simple Frameworks for animation I want you to suggest simple Hub repos that I can use right now to try out different uh to test out different types of animations and I want these to be lightweight great for landing pages please list these out right now and so what I'm doing and let me break down this prompt what I'm doing right now I'm trying to use get as a entry point to create a fun landing page and

I think this is a really great way to learn the same way that people on Mid Journey um they use what are called SRS um which is represented by D- sref um right um if you type in-- sref you'll find that there are a bunch of libraries of different srfs and that kind of points to a different style um and a lot of people who do graphic design come to these sites be like okay I want to create designs that have this Vibe or this Vibe and when you're generating images you put in this srf

and that gives you um images in that style and I think of GitHub that's I think of GitHub in a very similar way where like you can use GitHub for inspiration and so we have this animated landing page Gap sherry. JS no idea what this really means and before I learned about coding and learned how to use GitHub none of this was available to me but now we have these AI models that it can search through a bunch of different projects that people have uploaded to GitHub and we can just surf through them without having

to know how to code and we can get explanations using um using perplexity and that's awesome and so here we have this right here here's the repo and we can click on this repo and you can look into it but for me I'm just going to I actually noticed that that repo only had one star so please find popular ones okay so here's one called anime JS and so let's find the GitHub link here it is let's click on this okay this one looks very popular and look at that that looks cool right and so

we see these really cool animations all right you know what this looks fun let's go ahead and try this so we're going to copy this link and let's go ahead and open up curs C and we are at a new window let's go ahead and just clone this repo and we can create a new folder and we're going to create a um let's call these onepage projects and we're going to hit create and we're going to hit select as repository destination and we're going to create a landing page okay so this GitHub repo is open

and it's called anime we have some files here that are loaded on the left the first thing that I noticed is we have documentation and I'm seeing examples here and so these are layered animations this looks like some stuff that we might be able to use at the very least we can use these examples to make sure that cursor creates animations with this new library correctly there's a lot of different libraries out there and this anime thing that we just download loaded is a library that might be uh something that Claude is really familiar with

like python Claude has trained on tons of python data but it might might not be fully familiar with anime I have no idea but what we can always do is type in at examples and just tag the file and say look at these examples and then make sure you correctly create like key frames speed stagger demo I don't know you can use this as examples and so that's very useful to know what I want to wonder is I'm just going to go ahead and ask composer I'm going to say can you please tell me if

um I'm able to run locally anything from the documentations folder I'm wondering if we can run that index.html file to see what's in there and I'm just going to go like this at documentation and we're just going to tag the whole folder and we can run this and yes you can run the documentation folder looking at the files here it is generating the command and this command is on the terminal and uh it's running it and then it should give me a link where I can run this locally by the way so these commands right

here when you're using agent mode when you first see one of these you're probably going to get like an accept or reject these in your terminal cuz this is the terminal right here you can see the integrated terminal you can find it right here however they show up right here when you're in the cursor agent mode and there is a setting within cursor that allows you to bypass the accept and reject and it automatically accepts them and that's the mode that I have on and it's called YOLO y mode and if you go to General

features and then scroll down to YOLO [Music] mode there enable YOLO mode I recommend starting with that because I don't even fully know what things I should accept or reject so yeah I just have YOLO mode on and so let's go ahead and uh get out of that and here it says that it is running on Local Host so I'm going to copy this what I'm going to do I'm going to open up a new tab and we're now running this it is just a gray screen so I'm just going to say that and we'll

see if there's Uh something's wrong let me see let me check the structure of the main index.html file I see the issue the documentation is trying to load some resources from paths that don't exist got it so now it's automatically running these commands you can pop them out into the terminal if you want to see them sometimes that helps speed up the process okay so now we're running it on this new folder um and so we can type in Local Host SL documentation SL examples so we can click on these got it that's cool okay

really cool so this is one of the animations you can create in this library and now we're checking this out see this is why I love GitHub so much I just downloaded this code online and now I'm getting so many ideas let's decide what our project is while we're going through these I want to create recreate The Lovable landing page right idea to app in seconds except we're going to make it sick we're going to add some extra things to it and it's going to be awesome I just thought of this as a good starting

point this is the app that we'll try and create we're just going to use theirs uh as an example let's do that but let's use these from the library let's just keep going through this oh wow that's sick actually that's insane um okay so the first thing that we're going to do is we're just going to screenshot this app right here let's go ahead and just get this whole page what we're going to do is we're going to copy this to our clipboard now what we're going to do is we're going to open up cursor

and we're going to say the following so let's close this up real quick close documentation now what we're going to do is we're going to go into composer agent mode and we're going to say I want you to create a new document that is a landing page for my app and I want you to start off by making it look like this except where they mention app I want you to say design this is going to be an idea to design tool and it's an agent that creates designs for you and it's going to be

awesome I'm going to paste that picture in here call it agent toate the agent who animates your ideas build this site this landing page except I want you to use some cool animations in that uh just around the app that match the the examples in the and so yeah we'll see how it does here so here it says let me create a modern landing page it's creating an index.html file and this will likely be added over here and there it is and so we can take a look here and it is 236 lines of code

and let's see if they ran it cool okay so we're going to accept this now we're I'm going to say run this locally let's see what it does here so it's now running this command our server is now running on Local Host 3000 what we can do let's go ahead and come over here and we are going to go like this and here we go idea to design in seconds your superhuman AI design partner start creating today for free okay I like it I don't like the orange let's first specify change the orange to like

a dark like a a red pink uh all instances of that and idea to design in seconds um okay features pricing about how did lovable look okay so we're going to need like some sort of logo to go right here and let's just get rid of these right here these section are ugly get rid of them and here I want you to create a really cool animation and use anything that you need from the examples folder um as inspiration to create the illusion that uh you can animate anything with just your ideas and you can

uh use an AI agent to create your animation let's go ahead and press accept now we'll come back over here we're going to press command R and here we go okay I like the idea that it has here I actually sort of dig this let's go ahead and upload this right here okay I actually really like this idea instead of just having like it being typed out to the top can we actually make the typing look more like real with let's actually put perplexity on dark mode nice okay okay let's use this right here and

I included an image ignore the buttons and everything in there please make it look like that as you type um just like a clean input field except make it way taller and include the animation like and make the components that it's animating like really really cool and if you need to make a different file and then render it in index.html go ahead and do that I know the index.html file is getting larger all right let's take a look okay make it float now spin it not bad let's make it morph all right kind of ugly

but I like the idea I'm going to go ahead and screenshot this there's too many like pills or uh backgrounds of components it should be just that like light gray that's in the background and then there should not be those two containers around the text field nor should there be a new black container around the animation and let's choose something else for the animation like make it like a really cool component like a full component come up with some realistic changes to like a full component make it look like a computer component and then say

change the aspect ratio and then have it change from a horizontal rectangle to a vertical rectangle and so just focus on cleaning up just just this component okay let's go ahead and accept this now let's go back to our design here aent toate we're going to refresh nice I like this back to horizontal okay so let's refresh it what does it do here it's a little underwhelming make it horizontal make it a black to Blue gradient with a call to action then reflect that change then for the um next one which is make it hover

and make it Glow and have a white glow wa behind it so we can fully customize this all all right let's go ahead and accept all Now command R and here we go let's make it horizontal and make it a black to Blue gradient all right that got cut off so it's starting off on this so it's starting off on this one also make them faster so make the typing speed faster and then also make them Loop so they should never stop okay this is cool let's go ahead ahead and hit accept and we're going

to hit refresh okay so it's not perfect we screenshotted it we're putting it back into cursor composer okay I want you to take a really close look at the component uh that has the uh typing and the changing components I need you to make sure that the previous change is held there all of this seems like an endless rotation and so you should change the last animation to the first one and make that match in the prompt so it's like a continuous clean flow and yeah we can just ideate we can take all of our

ideas and we'll watch it go to work okay let's see okay that looks a little bit better make it vertical and hover good now rotate it okay not bad stop rotting and make it big Shake It Up all right all right okay that's not a bad rotation I feel like that's pretty smooth please change the font to Poppins and then I want you to add another component that shows the assembling of components and I want you to use examples from this and if you guys remember earlier we started going through some of the these documentations

and so here's this transforms demo and this is in the files so in the examples there is this transforms demo and match the color of the site let's take a look and see what it did so let's go ahead and accept this we're going to press command R so we still have this this is whack I literally can't see anything on this you see how small it is down at the bottom what's going on here can you please make this um this new one make it these circles go into the middle and then flash out

to like a really clean red component um that looks like a section of a website wow in white I want to add text to that and then I want you to get rid of that gray background that's behind it just have it on without any background that that red stuff and then and then move that up above the component that shows the typing to edit the animations M just have the header text on that and then also rotate everything down you in the in in your recent changes you moved everything uh too far up and

now it's off the screen so we're now typing these in we're making changes we're just vibing like this is the essence of vibe coding we're we're using this package that we learned we found this example in the documentation and I like it a lot and it's like takes all the like your idea shoots it in the middle now it shoots it out okay oo that's kind of clean every time that there is a new component that it pops up cuz right now it's on a loop where it circles to the middle and it pops out

with the component I want you to change the component every time it comes out so now it's horizontal and then I want it to be a vertical component um and then I want it to be a um a component with a square in the middle that has like animating or a rectangle in the middle that has like animations going through it and yeah keep the top bar the same and the the out border the same for all of them so it should all look like a Mac window okay let's see boom I dig that so

that's a good first animation let's see the second one all right I dig it I like it it's a cool design simple easy to understand that one's a little bit much and then it should Loop okay cool I actually like this and then this can be about like editing your animation and so I think we should add a component between this let's go ahead and say that so let's open up a new composer here um let's screenshot this okay that's good good in between these two sections I want you to make a testimonials section and

I want you to add like this should be like and there should be spacing in between the top of this component and then the bottom of this new component and I'm going to give you an image of the style to follow and then we should go back to lovable I liked their section I guess theirs was a little bit lower uh use this except come up with ones for like creating designs so it should be very similar idea but just like Focus mostly on designs all right let's see the changes here looks good Loved By

Design innovators change this to um blue text um what else here let's let's see how it looks like this I mean this is pretty solid I like it and it's like narrow as it gets skinnier um I think uh between these sections add a line like a white line that doesn't go that far across just a little line break make it look cool this separates the sections okay so this is coming together take a look at this so here's our app and we can scroll down loved by designers and innovators and we have this edit

section I do want to add a few more things for this bottom section can you please add a title section that says edit your animations just by typing and please add a white line break between this section and the one above it very similar to uh the the other line breaker okay so now we're going to hit accept let's refresh this and looking good love by designers nice where's my header where's the header that says edit your animations with typing right here but we do have this line break please add a uh footer at the

bottom and I want to be a to scroll down to get to the footer so a good amount of spacing between the last component and the and the footer okay there we have it and we have loved by Design innovators and edit your animation just by typing and this looks pretty good and we added this footer so let's say that we're done and we're like okay let's go ahead and put this on the internet We Just Vibe coded this we had a good time going through the motions using cursor now we want to put this

on the internet and so the first thing that we should do is we need to go to GitHub and on GitHub create an account and I think we talked about it earlier but we created a git repository and we need to do that again so this repository name I'm going to go ahead and make this public so you can see my code if you go to my profile I'm going to call this a agentmate and I'm going to say agentmate landing page make this public and we're going to hit create new repository after we create

the repository we are going to click copy now we're going to go back to cursor and in a new composer we are going to paste in this link and say push um I created a new GitHub repo at this link right here I just initiated it and I want you to push this code to that and it is a public repo let's put it on GitHub and when you say before you do this you might need to say I want to sign in on GitHub please help me do that and the agent will actually help

you do it so you need to set up an account on GitHub the first thing you're going to do is set up an account on GitHub and then tell the agent you want to uh set up your GitHub account and it will take you through the steps to connect cursor to GitHub because I have these connected so all I need to do is this um and I can just run this and it will actually push our code to GitHub and you'll be able to Fork it and use it immediately within your own project to use

it however you want to use it so it says now let's stage all the files let's push the code to the GitHub repository and here this is what we want to see we want to see that files are being uploaded and we wait great I've successfully pushed it and all we need to do I believe is press command R and there we go here is our code and we are now on GitHub now what you're going to do if we want to put this on the internet there's a lot of apps you could use to

put it on the internet we're going to deploy it to versel and what we are going to do since we've already pushed it uh have GitHub we can import the agentmate landing page that we've created because when you sign into versell you'll sign in through GitHub so we can press import framework other root uh repository let's just hit deploy let's see what happens if we do this so we are using versell to put it on the internet they're going to be hosting right now we're using Local Host but we need a provider to host it

so other people can go to the uh site or app and use it and it costs money based on how much it's used basically and so what we want to do is we want to get it to successfully upload however there are some requirements so what I'm going to do is I'm actually going to copy um this link um right here yeah so the project name I'm going to copy this and I'm going to go back to cursor and I'm going to say I just tried to um deploy this app to versel and I got

this error and the error message popped up on versel and it said this right here please fix this and prepare this project for deploying on versel and then do it and so cursor can actually communicate directly with versel and again you might have I forget how the signin process works but just say you want to sign in to versell to your cursor agent and you will uh figure it out um I remember I did it when I was first starting out it wasn't too difficult and if you could always ask perplexity if you run into

any problems so I've made the necessary changes um okay do it now directly and give me deployed link I know for a fact you can yes you can I've done it you've helped me do it many times sometimes it doesn't think it can but it can yeah I apologize for my oversight you're right we can use the versel CLI to deploy directly let's install all right cool and then it's going to ask you questions here just uh press I just press enter no link to different existing project no what's your project name I think if

you just press enter okay no you have to type something in um Landing um agent toate in what directory is your uh is it located just press enter and now this is loading and so now this is being push to versel it's building we'll see if it succeeds it says great your project is a success and then it gave us this link right here you can also inspect the deployment there okay so let's paste this in and there we go idea to design in seconds powered by Design innovators nice great so this is deployed at

this link right here a genate landing page. verel doapp so that means you could type that into your web browser and you should still be able to it I don't think I'll change it by the time you watch this video but you can now see this app or site on the internet which is what we want we're building this app for other people to see as well um so yeah you can see it but you might be thinking wait I hate that uh domain right I want to choose my own domain great let's go over

that process let's go to a website like name chep you can also use GoDaddy or wherever you buy your domains I personally buy my domains on name she and before this video I purch just one just like thought of one that would be fun and I thought aent toate was a cool name it was $11 it's pretty cool so I bought it on name CH it's where you can buy domains you can simply type in names of websites you want to buy and you can buy domains on name cheet I've bought aent mate.com I am

going to go to Advanced DNS settings so um what am I going to do okay yeah so I'm going to go after I bought bought the domain I'm simply going to select the um I'm going to click on dashboard and then what I'm going to do is I'm going to hit manage on agent mate.com and then what I'm going to do is I'm going to press Advanced DNS then I'm going to delete these right here now what I'm going to do is I'm going to go to versel and I'm going to bring verel I'm going

to bring versel side by side so I'm actually going to just t I'm going to go back to vsels homepage here we have aent toate landing page we're going to click on this we're going to click on settings I believe and we're going to click on domains and we're going to click edit and we're going to click and we're going to use aent imate.com and this is production no redirect save wait I did something wrong I added an M after there we go okay save now it says set the following record on your DNS provider

and so this is an a value and so all this means is it's a type a name at Value 766 2121 what we're going to do here is we are going to go to um on name chap we're going to pass add new record right here add new record and this is going to be be an a record and the host is going to be at so a at and then this value right here and then we're going to press save changes okay and then I realized we actually need to add a c name so

I just act cursor what I need to do to add a c name and here it is so we need to enter c name record with the value of this so we're going to add a c name with a Val value of this and then www so www and we can hit enter and we should be good so let's refresh this and so all we need to do now is we need to type in agentmate and here we go it is on the internet at agent.com deploy it on the internet clean website right here and

so we did it we did some really cool design work in my opinion I don't know about you okay so before we move on to a more complex project with databases authentication more AI features I just want to do a breakdown of what we've done so let's really think about what we've done in this last section we went to perplexity and we explored perplexity which is an AI powered search engine basically and we just looked for any open-source GitHub repos that have cool animations cool libraries that make cool animations and so we did that we

found this GitHub link it was called anime on GitHub and it had like really cool animation examples and the animations are really cool and so we basically forked this project and we did that by simply pasting this link into cursor so all we did was ask a question find a link paste that link into cursor and then it loaded all the files from that link so it's like a starting template in cursor and you could see the files in the left window and then we iterated on it we asked it to create new files and

to use examples from the files that were in this GitHub repo and it used the examples and it created a pretty cool design if we go to aent mate.com we can see that I don't know if I would have created this without that one example that we used and I just think these are like pretty cool animations obviously we didn't spend that long like 30 minutes making this but I think this site looks pretty good for just like and then here it says now rotate it and we created some pretty cool rotations and we used

this random GitHub repo as inspiration which is pretty cool and so um and we were running it locally just by asking composer you just ask composer run it locally and so that's how we could see it in the Local Host so every time we made changes to the code we could see it on this web View once we were done we deployed it or we committed it to GitHub we posted it on GitHub I don't even know the vernacular I just know that if I say um put this code on GitHub after creating a repository

cursor's like yep got you fam and then it uploaded the code to GitHub right we can go to GitHub right now and we can see that we have created if we go to our repositories which are just like the projects that we create we can see this agent toate landing page and here uh we see all of our code we just asked cursor to make this and then we deployed it to verel and you can always just ask cursor for all of the instructions on how to deploy to versel depending on the type of code

you have this process uh might be a little bit different but with AI if you just ask AI how to deploy it you will uh you can get it deployed to versell and once you get it on versell it'll give you this like app domain so I'm pretty sure like versell do agentmate uh. verell doppers something like that and then we used uh name cheap I bought a gate.com for fun and then I connected that domain to the versel deployment and so they're basically hosting the code so that anytime anyone can go to it and

use the app they are hosting it so that's kind of the overall thing that we did so now we're going to do a very similar process I'm not going to start off by finding a repo we're going to start off with our template once again and now we're actually going to build an app that not only not only can you go and see the app in Local Host we're also going to add a database which means as the user as uh and so it'll be like an internal company tool that will allow you to do

something important and each member of your team will be able to sign in and so it's going to have a database meaning the work that they do on this app will be saved to their profile so it's going to have a database it's going to have authentication because in order to store the data in the right place you need to have authentication so it knows what users signing in and yeah we're going to do a database authentication we're going to have multiple AI features and we're going to do this same process again except we're going

to create a useful tool and so I wanted to uh in this video I really wanted to get some repetition and do many projects so you can see it get practice doing different types of projects because the only thing that will make you better at this is finding ideas and taking action and trying to get to the final outcome we are going to be focused on the outcome okay I want to talk about the problem that I want to solve with my next app and the problem that I want to solve is somewhat Niche it's

would help me and I think it would help a decent amount of other people I'm not saying it could be a millions of user app but my problem is that I love the new deep research feature from chat GPT currently it is only on the $200 per month plan and it generates full research reports after thinking for a very long time and the one thing I don't like about it is it's just too much text and so I want to be able to export it with cool images every once in a while so I want

to create an app that allows me to just come in here after it does all of this research because it's just so like look at how long this is um and I want to be able to copy and paste This research copy it paste it somewhere and then be able to add in like a uh for each section add in a graphic and as we've been talking about recently we've talking a lot about um JavaScript and HTML Graphics this video that's how we created our landing page and we could easily take this information and generate

a chart generate cool quotes cool animations to actually make it more fun to read so that there's a lot more images and things like that so I think that would be a fun project to work on and yeah I'll show you let's go ahead and let's just let's dive into this the first thing I want to do is I want to come up with some just some ideas on like what these charts will look like so create a chart using examples to show how many programmers will exist in 2030 from now 2025 from 17 million

programmers to 100 million um make it uh elegant and cool okay so I'm just trying to get an idea of what it'll look like I mean look at these charts like we could have it automatically generate these charts um to show different ideas and this is just really cool so yeah let's just send it and so what I did here is I just pasted this image into bear uh to be note and I'm going to just get a screenshot of this and now what we're going to do I'm going to copy that to my clipboard

now let's just list out our idea to cursor so we're going to go to cursor okay let's get started on our project and we've done this process before we're going to start using our react native template and all we do to do that is just go to clone repo and we're going to paste in a link from GitHub I have it pinned to my clipboard app that I use so I can just immediately access it I use it all the time and we're going to press enter and we're going to I'm going to create a

new folder and I'm going to call this deep reearch View and I'm going to hit select repository destination and we're going to hit open now what we're going to do is we're going to press command I to open up composer we've done this before remember and we're going to hit agent my idea for an app is and again so here is just a quick outline that I created of my app idea and I actually had to think about this for a second because I want to do this in steps so the steps will be to

allow the user to paste in a link right the or paste in and deep research um markdown report right it's just text and markdown format and then this will automatically load blank blank animation canvases and I want to be able to click on those canvases and paste my own code to create those animations and you might be thinking wait why wouldn't you use AI to generate that and then also like why wouldn't it happen automatically and I have found that when you're using AI features figure out how to get it so that you can just

paste it in and then you can basically uh use AI to uh create the process of pasting it in right we because we want to solve this in steps right we want to solve these being able to be rendered right these cool animations to be rendered in a markdown format right and we can paste in the code for each one and then we can add the AI features that where you can click on the code describe the image and then AI will uh look at the page for that section and create a chart for you

but I I think the best first step would just be to do it manually and I think we can do it relatively quickly and then we can figure out how to use AI to generate these animations based on a list of examples so let's go ahead and get started we are starting from this template and remember this template right here built in right this template built in has uh the ability to sign in with Google and so we can actually set up the database and the authentication right from the beginning and in this case I'm

actually going to do that for my idea for an app is I'm going to paste in that text that I just showed you and then I'm also going to paste in that image that I took uh like this uh which is like the bare note that shows how it's a markdown file with a cool chart the user should immediately have to sign in with Google if not signed in they should not be able to add the report um paste in markdown okay so we're pasting that in there and it's going to go to work and

while that works we actually need to set up our database and this process is actually actually simpler than it looks and we are going to be using Google Firebase there's a lot of different database providers you can use I think Firebase is the best to use when you're starting out because it's the easiest in my opinion and Claude really understands the documentation of Firebase it just understands how to use Firebase because it's probably in their training data a ton and so what we're doing here is we're allowing the users to sign in and add data

to but you need to hook it up via an API very similar to how we set up the image generator API earlier we need to connect basically I think of this like a Google Cloud for the app that's basically all the database is and so we need to create a project on firebase.com that's what I've done so far go to Google uh firebase.com it's free to get set up and if you used it for your internal team it would be free uh for a while it's it doesn't start getting expensive until you have a lot

of users or you have a lot of data uploaded and so let's go ahead we're going to type in our project name and we're calling this deep research visual I forgot what we call it doesn't matter we're going to hit continue and then it's going to ask us to enable Google analytics I'm not going to do that right now that adds an unnecessary step that we can always go back and add that later and so this is loading and basically what we're doing is we're setting up a Google Cloud the same way you have your

docs and you have your spreadsheets in your Google Cloud we're setting that up for the project if you go to my app and sign in this is where the data will be stored right the data will be stored on Google Firebase and you can think of the database as anything that you would put in the spreadsheet like text like dates uh links URLs things like that will go in the database and uh you can see here we can build a lot of different things right here we can create a firestore database we can create storage

we can create authentication and we're going to do that in just a second but what I want you to focus on is right here we're creating a web app so we need to actually create a web app and we need to get Firebase keys for this app and so I'm just going to call this visual I it doesn't matter uh register the app and what this is going to do here is this is going to give us some API key keys so there are six keys that it just created for me I'm covering these up

because you need to keep these separate always keep your API Keys private and so it gives you an API key an off domain project ID storage bucket message sender ID and app ID do not don't look into these you don't need to worry about that for now if you're just getting started you just need to paste these Keys into the template that we've created for you and I'll show you exactly where you need to do that So Below the keys there's actually this copy button and what I'm going to do is I'm going to come

back I'm going to come into our composer and say here are my keys put them where they need to go uh in EnV file format them properly please now all right now I'm going to paste them and run this prompt I'm going to do it off camera because I want to keep those keys private awesome so it added my keys into this env. loal file which is great so now we are connected the API keys are connected but there's one final step that we need to take we need to actually go and create the database

and these are only a couple clicks so we're creating this database and what we're doing is we are going to create a database here we're going to hit next and we're going to hit start in test mode create once that is done it should look like this this is where your data will be stored then you're going to hit build again you're going to go to storage and then you're going to press this button and you want to upgrade the project so once you uh set up this payment account this I'm pretty sure you will

not get charged for this and you can create like a maximum budget you can literally make it $10 I'm just going to say $30 for this this is once you like really start update like uploading a ton of things to store storage they basically just want you to create like a payment account for it and so we're just going to hit continue and we're just going to hit link uh billing account and we're going to hit done once it's done it should look like this final step we need to add authentication this will allow people

to sign in with Google any site that you come to and you're like sign in with Google that's exactly what we're doing right now you're going to hit get started you're going to hit Google you're going to hit enable you're going to hit uh whatever your default email wherever you created this account with will be this support email for the project and just hit save once you do that we are done with this page we can go back to cursor for the rest of the time okay so we ran that first prompt and then we

said to put the API keys where they need to go for the Firebase and so now I'm just going to ask please run this locally and you could also go into terminal and type in npm runev to run it but let's just go ahead and make sure everything's set up properly and when in doubt just use the agent because it has access to every feature on cursor so please run this locally um then we're going to click on this link Local Host 3000 and here it is so welcome to deep research view we can just

press sign in with Google and this should work we should be able to sign in with whatever email we want continue we've created this account and okay so it just has an input markdown and I want to be able to paste in this link right here so let's just go ahead and I'm going to paste this in to our app and look at this we now have this right here we have obviously it's not perfect this seems to be some like weird coding formatting which is fine um that's cool I like it this is good

and then it has these add animations and so if we click animations we can paste our anime animation code here create example code right here and I'll copy it and paste it in there create a doc that I can copy the whole thing and paste it in okay we need to test this again so we need to go to cursor composer the same thing that we've done earlier we need to go back to Local Host you need to paste it in okay okay hopefully it fixed the error what we can do is we can give

it one of the code Snippets that it suggested for us so we'll click add to animation and let's go ahead and paste in this one save animation there we go we have a very simple animation there okay this is cool this is cool I can very easily see how we can create the app that we want here let's actually go uh to to a new composer window I'm going to paste in this text and I'm just going to say please give me another one that summarizes this first section adhere to um adhere to proper formatting

and sizing rules just give it to me uh in chat not in code in the code base and so we're just going to tell the agent okay whoops I didn't paste in this we'll paste in this right here because we want it to summarize the cursor composer welcome to cursor your favorite companion okay yeah we're going to need to make some changes to this but that's okay so we can actually oh still goes uh we can remove this so like if we remove it and hit save animation oh boy okay that might be a problem

but let's just paste it in hit save animation okay now it just says welcome to cursor your friendly animation companion make it more fun and um more uh light movement have a placeholder logo for cursor and make it um in the center and then have the key topics like going across the bottom of the screen like a ticker of like a stock show at the bottom I don't know oh wow oh wow this is long okay chill bro um let's copy this now let's come here paste in the new one save animation okay welcome to

curser real time help okay so we can make these better we can make these better okay so I just spent like 20 minutes trying to get these diagrams to be consistent and I just didn't like it I wanted I want to spend like four or five hours trying to find like really good examples for animations and I can always add it in however I am using mermaid diagrams and for uh mermaid diagrams are these diagrams that are a lot more predictable um and so I can go for example I can go to claw for example

this is a mermaid diagram and this one doesn't look that good I can say I can paste this in create a simple mermaid diagram choose the type and create um one in plain text here in the chat um okay so here's the the text this is a very simple mermaid diagram this one's going to be very small but you can uh paste it here save diagram and this is what it looks like the subject desires the object uh the subject imitates the model and Des it's actually way better make a longer one that shows more

features of of his is Theory use your training data not what I pasted mimetic Theory and I actually think that looks pretty good you can actually change this so like um you could you know imitates you know it changes that right there and so here we can copy this one let's click this save diagram okay so this is a lot I cuz we can't even like really see that so like sacred violent cycle um scapegoat mechanism but anyway it's still works right this would take a little while to analyze but the point is we can

actually create these mermaid diagrams um and it's pretty cool okay so I'm going to show Claude this example right here I'm actually going to do it on this one let's pick a good section okay like this I'm going to paste in that earlier one this is a simple mermaid diagram and what I'm going to do is I'm going to screenshot this right here I'm going to paste it into clae now I want to use the clae API on these um placeholders for mermaid diagrams I want there to be a button that uses AI to generate

a mermaid diagram for that section and what it should do is it should look from because these are placed right below the headers and so it should look from header from the current header that you're working under to the next header and that's where it should get the information from and so that's what it should use as the input prompt to generate a mermaid diagram and the output should only be a mermaid diagram and what I'm going to do so now we want to use the clae API and so for those of you who've never

tried Claude this is Claude right here we can create a new chat we can say hi and this is Claude but we want to access this technology with within our own app which means you should either go to perplexity and say give me examples or type in Claude documentation platform and this should so we're looking for the documentation and so I'm just going to copy the docs for Claude and we're going to paste these in so docs for claw paste that link right there because cursor can actually access this you can also also add documentation

maybe we've done this earlier in this video I forget but this is a really good thing to learn you're going to want to go to features and you want to go to docs we're going to add a new docs and we're just going to paste this in right here and then we're going to name it clae API doc confirm and um and instead of just pasting that link from now on we can just type in Claude API docs and it's actually indexed all of these so it can go through and it'll look exact it'll look

for what it needs to find right here so docs for Claude API docs um and API key I'm going to paste I'm going to run this I'm going to paste my API key and then run this prompt and we also need to create a key on console. anthropic tocom and this is where I can get a key I can press create key right here I'm not going to do it on film cuz I want to keep everything private and so now it's installing this anthropic package hopefully this works properly now we are watching it load

in real time and I'm going to hit accept all I'm going to say put API key in env. loal because I saw that it didn't it actually put it directly in the code instead of putting it in this secured env. looc file so we need to do that I guess I could have just put it in there manually but I'm trying to show that you can just do everything from cursor composer and so I want to test this and I want to make sure nothing goes wrong or I want to know if something goes wrong

and when you first set up an AI feature it's likely that something goes wrong there's just so many docks so many things to deal with um but here what we're going to do is we're going to hit generate with AI and let's see and so what it should do oh what the okay syntax error in text um we can see it right oh okay so it added I like this we can actually add this I think we just need to get rid of these um this I believe this will work maybe okay yes why is

it so small we can fix this we'll figure it out um no okay so we can hit generate with AI can we do multiple at of once so the API route worked in its first go except it generated these with these uh weird which we actually need to copy okay please make sure in the AI prompt that this formatting is removed and we can paste and so it is so at beginning this is added and then at end this is added so we can run that based on those changes let's see how this does so

let's choose a new SE section historical examples of mimetic rivalry generate with AI okay so it's working however these are really small they're not being shown full screen okay this one is so the vertical ones are shown full screen but it seems like the horizontal ones are not some of these are being shown full screen some of them are way too small can you please look into this and try and fix it all right this is starting to look really good like triangular structure of Desire um like I actually really like this for whatever reason

this one has a syntax error but what we should actually do here is we should have first of all we need to have a button to view them I want a button at bottom right of these charts to allow me to see the mermaid diagram um full screen and then have a little X to exit out and go back to scrolling down the the the kind of the the article and then I also want to have an edit chart after the chart was already generated I want there to be little edit icon but beneath it

if pressed it allows me to change so add a new AI prompt using Claud to change the existing code and the output should be the full code um of the mermaid diagram with the changes that I said only the output only that output okay let's see so we can generate a chart for this one okay and now we [Music] can um so we can press this um the full screen feature should be a modal that pops up full like almost full screen that like pops up for so I can look at the mermaid chart full

screen and then the edit feature uh oh huh so no okay it didn't get that one okay so now we can view it full screen that looks good let's see if it works with a bigger one let's just start generating these yeah I like this we should make this animation cleaner syntax error we keep getting a syntax error on this one no no no what's going on here bro what happened show me the what is the syntax error see maybe it's cuz I tried to do multiple at a time okay so now we can view

this full screen that looks cool nice now what we can do and now this edit button just lets me edit it let's create a new uh page cuz this context is getting quite big and I'm just going to screenshot this right here so it knows the full screen feature within the mer uh mermaid diagrams is working pretty well uh but the little edit button at the bottom right I actually want a little chat field to pop up when I press it that's not to actually edit the text directly I still think you that feature should

be allowed if I just click directly on the chart itself it should let me edit the code manually but what this feature allows me to do is it allows me to edit it and so it should be a little chat bubble that pops up where I can say make it shorter or I could say make it longer or I could say change this to a pie chart or for those types of things you understand okay let's give this a test here copying this we got to paste this in again in our app we'll paste this

right here okay let's go ahead and generate with a okay and so we can view this full screen it's not full full screen but that's okay meic Theory meic desire um okay so now we have this like chat feature make this a vertical flow chart send wait I've updated the diagram did you oh what the wait hold on hold on okay I don't think it's working perfectly I don't know why it's not rendering right away syntax error classic okay cool colors here I like this I want to incorporate these colors so we can view this

but now we can hit chat we can say expand on these keep these colors I've updated your request okay so what happens if I click on this save okay um the changes aren't immediately uh should as soon as these changes are made it should update the mermaid diagram basically I have to click on it hit edit and then save again after I've asked for changes I want it to just happen it should automatically update this is when I'm using AI chat to um when I'm using AI chat to edit the mermaid diagram okay let's give

it a try let's just do it with a fresh one right here let's goo chat we can say make this vertical right now it's horizontal send boom there we go look at that so now we can generate a chart here wait generate with AI um and we're generating for this chart okay so mimetic desire rivalry double blind obstinate rivalry mimetic doubles mimetic crisis undifferentiated conflict so I don't fully know what that means we can hit edit Here and Now say please include additional um additional explanation on what these mean wow that's crazy okay we need

the uh markdown to render better okay I want you to change nothing except for the mark down or or like the formatting of the paragraphs like the headers should be more they should be bigger right you know if you look at something like bare note the headers are bigger than the rest of the text I want something like that and in that way the formatting should be better and more clear about the division of sections all right so this is actually starting to look pretty good the headers are looking solid they're massive but like I

like it I like the way this looks I just like the font and everything looks good oh that's huge actually that's crazy crazy okay let's actually go like this the input marked down should be in the same column as the output except the input should be a drop-down that I can place it in and then close it so it should start with me placing it in the input markdown and then the preview should load below it rather than side by side because I want to get rid of this like I just want this to be

I want this to be one column okay input markdown we paste it there and we can actually just copy this text right here and what we can do is we can go to the search section we can paste this right here we can look for input mark down and what we can do is we can say paste your deep research here and then this will say paste your deep research here and then the generate with AI buttons the components don't make them like those green buttons to generate with AI when make that just like a

nice light gray text with no background when it's empty instead of having that big green button I don't want it to be too M um too intense but while it's loading I want you to have like a nice like effect over that component and like it should it's almost like a moving gradient over that section okay so now let's go ahead and let's test this out so major tech companies open aai Google this is a AI competitive landscape a game theory perspective let's generate with AI wow that's a fire chart look at this obviously we

can make this look better but um so the game theory perspective is they either com competitive or cooperative strategies jeez forget we have to go like that okay so they race ahead or they can cooperate for safety let's generate with AI for this section and so this should take into consideration uh competition versus cooperation and there is a syntax error oh my Lord this one's massive but it worked but I don't want to use that as a good example this is great I love this I want this format for all of them um okay based

on that problem can you update the prompt as uh with as few changes as possible to fix this issue but also I want you to make sure that this problem's actually fixed and then the second example that worked above I want that style for all of them like those colors and so just suggest to the AI to use that those colors yeah cuz this is just like pleasing color palette in my opinion compared to like some some of these other ones yeah like this is so lame okay here's what we have so far and then

we're going to actually add the database and this does this process does take a while sometimes it's a battle um this is not the easiest project it's also not the hardest but anyway so as soon as we finish uh a deep research report right I had AI it thought for five minutes and it gathered 17 different sources and I want to see better visuals like I want it to look good and so I can just copy this we can take it to the app that we just created which is Local Host 3000 there we go

let's go ahead and refresh this so this is what it will look like to start we'd sign in and then we could paste this here and here we can generate diagrams now I want to as a user who's been signed in I want to be able to save it to my profile and and I want these to be saved as reports and reports should include everything that's on this page including the diagram data including the including the input text and the output text this I should be able to come back to this page as my

user as the user signed in and I should be able to access this and since I'm already signed in through Google this shouldn't be too difficult to save to the database please figure this out I'm actually not going to enter it in here this is a big ask ask for the AI we want to make sure it has as much context as possible and I'm going to run it actually please create a profile button at the top right that I can press where I can view all of my saved reports so basically what we're doing

here is we want this right we want to be able to see our documents our reports right these are all the documents that we've saved and we don't want to just lose them and so that's what we're doing right now so it just got done fully loading and it immediately gave us this error so we're going to copy this and we're going to say error please [Music] fix oh let's go all right so let's see let's see all right so wait let's go do open AI open AI open AI copy this go back to this

paste this here that loads save report okay ah oh wait so back to reports okay so this view report huh hold on okay but this okay so okay um okay uh let me see okay so we're here and the first thing that we can do is create a report and so what we can do is we can paste that in and then we can generate with AI and let's just generate three charts I don't care if they fail for now um okay that's cool we have multiple charts let's hit save report so now we save

the report okay when I generate charts and then I save the report the charts are not in the report that I saved they're not in the right place and we can actually go ahead and take a look at this right remember we did uh Google Firebase that's where this is saving so let me show you what that even uh what that means here um so we can actually go to fir store database and we can see that there's a report and this is the data that's in the report what's this and so we can see

that data is being being stored if we go to authentication and we click users we can see that I am one of the users in here so as people use your site or app their name will be added here it's when they log in and then in the fir store database this is where the reports are being stored and so we're trying to get the proper charts to be stored as well and so we'll see how uh cursor decides to do this and we'll hit accept let's take a look here I'm going to fully reset

this so I'm going to make a new report and I just like every time when I'm doing this testing every single time I'm going back and refreshing the Local Host because if it made a change to how things are saved and I'm using something that's been saved previously the logic might be completely messed up and so we want to completely do things from scratch like you want to start your process over when testing it in my opinion I've just that's one thing that I've learned so re like allow yourself to refresh every time you make

a change it'll just help you in the long run let's go back to Local Host we'll paste this in here I like the way this animates in now um and we can close this let's generate and we'll go down we will generate and generate and once these load we have these three charts here two and three now let's go ahead and hit save report let's see if they're here it doesn't appear as though they are there no that's in the response yeah the mermaid diagrams were not there when I saved them at least they did

not show up in the view where I can view the report all right testing again sometimes you just got to test things over and over again got to go to Local Host got to paste it in um let's generate with AI generate with AI generate with AI just the first three all right this is interesting first mover Advantage multipolar trap okay interesting okay AI race okay cool now let's save the report yes there we go nice cool we did it okay one more thing I want to add on the save uh on the uh report

at any given time I want to be able to export it as a PDF so the entire report gets um exported as the entire component uh that is the report like below the input field that shows like all of the markdown and all of the mermaid diagrams in it as well I want to be able to export it as a PDF all right it generated this code now it says it found some error and so let me fix the type issues with the react to print okay so here it is and we can actually just

export this and now it's like it made a change where it's like checking to see if everything is like rendered properly and then it downloads and there's a lot of I've done this before there's a lot of different things that you can do uh to make the formatting proper um so like obviously like not a lot is fit on each page but you know we still got a PDF created and it has those charts rendered within it and so that's pretty cool and if we go back to reports we can see all of my reports

obviously we can rename and I can add an edit button and a delete button but for my sake right now we've created this app that has a database set up to it and we can go let's go back to home one thing that we should add can you please add a persistent top bar to this app that allows me to just access the key Pages via icons the top bar should have home and the reports and like pool um so now we can go to my reports we can go back home which creates a new

report last thing I'm going to do before we're done with this is say um create a title in that same top bar I want you to name it deep visual okay you know what this is really bothering me so I'm just want to change it my OCD please uh for the drop down please put the paste your deep research here right aligned and in line with that little carrot thing not below it I do not like the way that looks at all oh my God okay that's so much better isn't it um okay now we

can say paste your deep research here we can now we can paste this boom it's going to load it up in this clean fashion and we can begin generating images with AI obviously if I was doing this I would probably have it automatically generate images um so the user just like immediately gets value and we can save this report uh we can save this report like this and we can also export them as PDFs not only this but we can actually chat and we can actually change these include the companies here let's see if this

works all right it included it look at this micros open AI Google deep mine meta Microsoft anthropic and others that's really cool so we created this now what we're going to do now what we're going to do is we are want to upload this to GitHub so what I'm want to do and we're going to make this one private so on GitHub we can create a new repository I'm going to make this one private we're going to call this uh deep Visual and we're going to create a new repository and we've done this multiple times

so far if you're skipping ahead uh then you haven't seen this yet but all this does is this allows us to save it to our GitHub profile so the code is updated into this central location I'm making it private so if I'm on a different computer or if I have a team member we can actually download this code and work from this place in the app or in cursor we can download this code here and all we have to do is we can just copy this open up a new composer window and say Commit This

to this GitHub repo that I just created so I already created this repo please upload my code to this repo I really don't know the proper vernacular for this I know that's not right but cursor will do it for us and once it's done it's basically just said congrats it's it's successfully uploaded we can refresh this and here all our code is right here now we want to put it on the internet and we're we want to use versel again so we're going to put this on the internet this is going to be harder because

we actually need to upload our environment variables because we have API keys that we need to have secure and so what we're going to do here is we are going to go to now I now create a verel project using the C I think we can force it to use versel here using the CLI and deploy it to verel and um yeah I think we can just say this okay it's going great the versel CLI is already installed now let's deploy your project so now we're basically just going to say set up and deploy pick

whether you want to use your business or personal um let's just run it like this link to existing project no what's the name of your project um deep visual enter what do you want to modify these settings no I honestly couldn't tell you why some of those settings are the way they are I just know that I've talked to AI before and they told me to do that and so I do that every time I wish I had more information for you I could have looked it up beforehand but I don't know so just do

what I just did it might work and so it says it's building but I think we're going to have to go enter our environment variables and so I'm going to click on this right here and this is going to take us to it's show it's showing us that it's building but I'm pretty sure it's going to fail because we haven't yet entered our environment variables because we need to do that so I think we need to go to yeah and so if you're on the project deep visual here we need to go to settings and

we need to go to environment variables and I want I need to paste in those keys here right I need to paste those keys in here so what I need to do is I need to go to cursor and we're going to open this up and now what I'm going to do is I'm literally going to go to env. loc file and again I don't want to press on this because you'll be able to see what you'll be able to see my keys which I don't want you to be able to see the keys that

I'm using so I'm going to open this up and I'll show you what I did okay so if you copy the entire env. looc file which is the place where you keep all of your API tokens and you just come into where it says key and press command V it'll automatically load all of them in this format right here and you can press save and that's what I did I did it off camera because I wanted to keep it safe so go to your EMV file copy the entire thing with all your keys come to

key press command V paste it in hit save and all of your keys will be loaded so that's really cool and so I added my environment variables please deploy and so now it's trying again and you can always keep track of it so you can click on this little link right here well open this up and this will allow us this is the site that it will be loaded on and if we go back to cursor if we click on this top one uh this will actually show us the build status so here we see

it's building building building and there we go so it says status ready and now we can press on I think we can just press this domain right here deep Visual and here we're going to sign in now here is an important part watch this when I click on this nothing happens we're getting an error and this error is happening because we actually need to go back to our authentication right we need to go this authentication remember back at the beginning when we were setting up this project and we did signin method we uh we turn

Google on and it's automatically set up to allow your Local Host to sign in to whatever app you're building but it's not set up for the deployed one so we need to go to settings and we need to go to authorized domains and so we need to go back to versel so we need to go to back to versell so yeah we're going to open this link up right here and this link we need to copy and we need to put this into the authorized domains so we can paste this domain right here and now

this is going to authorize the authorization to work within Firebase let me try to explain this again what allows us to sign in is authentication through firebase.com and we need to authorize the um we need to authorize this we need to authorize that the domain that we just created deep visual. bell.app localhost is automatically authorized when you start out I didn't have to do anything for this so let's let me show you so when we go back to this right here and we refresh the page we can hit sign in with Google and it works

works and I'm going to sign in I think I made an account with this one but um yes so here we can either paste our deep research project yeah we can paste this in right here and the the app works just like normal and we can generate images with AI we can edit them with AI and this is the app that we created and it is on the website deep visual. for.app however I'm not going to set up a custom domain for this one since we've already done that that process is relatively simple um and

you can see here and you can see here it's race or cooperate and so we can actually edit this right and so we see Deep Mind Google Microsoft um we can actually copy this we could say please make uh please include the company names and show and explain Concepts further and so we can use AI it's now going to go in and edit this uh graphic there we go competitive moves and now we can do that so that's pretty cool and so we can use AI to edit these uh charts and then we can come

up here and we can press save report and this now is saved to our report and we can export the PDF so the PDF of this was just is about to be exported there we go so we can come right here select it here is our PDF report and obviously we didn't generate charts for the whole thing so it's not amazing but we can see and we could honestly make this a lot better but I don't think it's a bad start if we go to back to reports I have not edited the title of all

of them but here we have all the reports that we've saved so we can go back to this one and it'll have the same charts uh loaded we could probably add something like comments to this but for now I think this is pretty solid like we created uh this app that allows us to generate with AI we can continue to generate these with AI and that's the app that we created and it's on the internet and you can sign in with a different account as well right if we go um I actually didn't add a

sign out button I don't think I could sign out oh it's there they added it for me we can sign out we can sign in with Google and we can sign in with a different account right and so when I sign in with a different account and I go to my reports nothing's there right no reports yet because I signed in as a different user right create a report and if I were to save anything here we can also write we can say hello there this is a banana split and we can go ingredients and

then uh we can generate with AI I'm pretty sure it's just going to this is all the context it has hello banana split ingredients and there you go that kind of shows you how it how this kind of works and then we can hit save report and then if we go back to our reports we'll see that we have this and we could obviously make this way better we could have ai generated titles for now I don't care too much about that I wanted to show how we've set up the database if we go back

into the database right we go to the fir store database we'll see all of the reports um we can see uh the authentication is right here we can see that there are now two users for the app one of my emails and the other one of my emails and storage we have nothing in here yet because we're not actually storing images or videos the charts that are saved are saved as mermaid code and so yeah that's the app that we created that was a long video we created a clean landing page for agate. comom you

can find this online if you want to check it out and I believe the GitHub repo is public so I'll paste that below and uh yeah we just found a random GitHub repo that had cool animation Styles and so we used that library to bring our own ideas to life obviously we created the Deep research uh image Creator which allows us to export and save reports and and uh yeah we can export them as PDFs pretty cool we also Dove deep into the basics of cursor we talked about how cursor composer has two modes uh

it has normal and agent and you need to just use the agent mode because it has access to the terminal has all the commands basically anything that you need to do cursor has access and it can create it can edit and it can delete files all so that you can create an app and you can upload it to to GitHub and then deploy it to the internet just like we did with aent mate and just like we did with this link this is a deployed link on the internet as well and we could set it

up to our own custom domain and so yeah if you guys want to dive deeper hop into my community software composers we have a lot of really fun stuff planned here right now we have we have 10,215 members and we are going to be creating a lot of really cool free resources in software composers if you want to learn more about cursor and creating apps uh to make money for your own internal tools uh for design and for whatever project you want just because you like it and you think it's fun so join the community

if you want to see what's we have in store because it's awesome anyway I'll talk to you guys later this was a long vid peace