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