NEW: OpenAI o1 + Cursor + v0 = Supabase Authentication Next.JS🤖 o1 Preview + o1 mini (AI Coding)

What's going on guys Josh poock here and in today's video we're going to be using 01 by open AI the newest model 0101 mid to actually build out a nextjs app using cursor using vzer how we can set up authentification on it using super base let's Dive Right [Music] In all right guys so everyone's pretty much been hearing about cursor AI editor I've done multiple videos on it so you're going to want to download cursor if you're going to want to

Follow along with this video I'm using the paid version so I get access to cursor composer we're going to be using v0 to do the front end elements and the goal of this is pretty much to create a website basic website whatever the case is maybe look at a bit make it look a bit nice and then add a login function some authentification maybe we'll get to like adding some dashboard elements whatnot but we'll see how that goes and then we're

Going to want to do the AU authentification through super base you're not familiar with super base essentially like a Firebase alternative um there is an open source version I'm going to be using the the uh the web or the the cloud version right now on a demo project so um yeah let's Dive Right In also too guys if you want to be caught up with the latest uh news around 01 01 mini um definitely check out the video I did yesterday

Going over kind of what we know up until this point how the new paradigm has shifted with these models these reasoning models let's let's actually see and I'm probably going to do a video maybe doing some tests on these maybe comparing it to Cloud Sonet but let's go ahead we're going to use 01 preview to do sort of the planning and then we're going to use 01 mini in the actual uh development and building everything out reason being is because um

01 preview you know if you're if you're going to be using it on a consistent basis it's somewhat not feasible unless for certain test just because you don't want to be using it all the time it's pretty expensive in terms of uh you know cost per milon tokens I think it's about $155 per input and like something crazy like 60 or something on output all right guys and we're going to kind of be testing this out as we go and seeing

What works best um so let's go ahead and start with 01 preview and I'm just going to kind of explain to it um what I'm trying to do of course I'm not going to do everything perfect and prompt it perfect uh I'm going to do this somewhat quick just so we can kind of see what we actually get and what it can you know do but if you're doing this I would suggest maybe taking a little bit more time to really

Fine-tune some of these prompts and try to get the best uh give it the best context possible for what you're trying to build all right guys and when we get into cursor I'm going to show you how you can also um you know put documents into cursor and reference those as you're working with cursor but just for the sake of also testing this out we're going to go to super base docs right here go to the nextjs off section and I'm

Going to copy and paste all right so here's my prompt I'm going to use cursor AI the IDE to build an nextjs app router app that is a website that has superbase o off for login please plan out this project for me in depth so I know how I should proceed for each step I'm using v.d fers for generating front end UI components here's the superbase off docs and I just past it in the docs um for its reference for its

Context now let's go ahead and press enter taking a closer look figuring out the plan that was actually very quick I thought it was going to take a minute or two but here we're getting a plan right here so uh project overview prerequisites um no JS so you know prerequisites that you should have set up a super base account you know have cursor have V Zer which we have that goes without saying um and then step-by-step plan so it's telling us

How to set up a new nextjs app uh navigate to our project directory install superbase packages the dependencies and then set up environment variables so environment locals put our superbase keys in and then set up superbase utility function uh create superbase client file so pretty much I mean I guess it's just re like it's kind of easy I guess I gave it the docs here um now the reason I gave it the docs and why I would always kind of suggest

To reference new documentation is because um lots of times these AI models are trained on um older docks all right there's a reason why when I said nextjs I specified app router all right we're not using the page um you know Pages we're using router but since Pages have been a around for so so much longer than app router so much of the data that it's been trained on most of these models is with pages right so you a specify app

Router same thing with super base o um I know for example you know they used to use off helpers you can even see it referenc off helpers right here but as of now they're not updating those packages they're doing the whole superbase SSR and these new packages they're focusing on they're not the basically the off helpers are depreciated so other than that yeah that's what I would suggest always reference new documentation to get the best output all right so now that

We kind of got this plan we're going to go over into cursor and v0 and start building this thing out all right so I'm just going to copy this code to set up our xjs app now just as a side note guys once you open up cursor if you over to settings which is up here in the top right you'll see all your different models to add the model name well of course you're going to need your open AI API key

Okay so you're going to want to add the model so you can just click add model and the models of our course uh 01- mini and then 01- preview you can add those models and then you'll be able to access them right here okay okay also too guys as a side note if you scroll down you'll see there rules for AI this is sort of like the overarching context that you can set up for cursor so I would definitely recommend setting

Something like this up that's custom for your specific project that will help you basically you know um control what sort of output you're going to be getting from cursor all right so I'm going to run npx create next app latest I'm going to use typescript es lint Tailwind yes yes and no boom right and just as a side note guys you can add docs as a in a markdown file like this so you see I had just created superbase do or-

Off. MD and then over in chat here or in uh composer you could either at that document right here so superbase off MD in the current file you could actually too go over here create a project for example uh new project test and then we could add like a f Focus file here which would be this the super base off and then we could create composers we could also do like some prompts right here so so I could just copy this

You know this initial prompt I had right here paste it in here like I said it's not perfect but uh it's good enough to start I could create a composer here and I could go about it this way you could also go like this you could do at and then you could do docks like so and then you could add a new dock all right you would just click add dock and then you would um grab the link to this documentation

Right here oh no you paste it in right here boom and then that will index that doc on the website it will scrape it and pull that in and then you can reference the doc in your conversation right so you could do it those two ways mainly okay so now we got our next app set up you can see we got the source direct source directory the app router got some fonts here okay pretty basic setup so let's go ahead and

Let's start off by going to v0 and all right so here's my prompt in v0 generate me a beautiful professional modern website for my AI automation marketing agency that has a versell style feel dark colors dark professional colors beautiful UI Sleek has a login button in the top right header catchy heading and everything else a full website should have all right this isn't perfect by any means but we're going to run with it right now the reason I'm starting with v

Zer is because when it comes to actually gener in UI components I find it's always best to start in v0 just because that's what it's good at and then bring it over to cursor afterwards so that's once we bring it over to cursor that's when we're going to start using uh uh o01 all right so here is giving us a logo giving us you know the everything we pretty much asked for of course some of this styling is going to need

To change so I could do some um additional prompts uh to optimize this in v0 and then bring it over to cerso and maybe we'll do one and uh then bring it over all right so I'm saying the button is white on white text fix this all the buttons like this are like this everything should be readable all right so I got this one I guess right but still not perfect so we're just going to run with it and we're going

To copy actually we could copy the code but we're actually just going to add to code base this way so I'm going to copy this and I'm going to come over here I'm going to paste this in and we're going to run this so this is npx shad CN at latest so we're installing Shad CN going to click yes and we're actually adding this exact component in here just from v0 so if you didn't know you could do that it's pretty

Cool feature all right so things look good so far we got our um components folder with our UI we got the button input landing page uh yous right here and pretty much it so now we can actually quickly build out the login um so what I would typically do is you probably would want to split this landing page up into separate components but you know we're not going to do that I'm going to run PNP run Dev right now just so

We can see what everything looks like all right guys so I'm going to start off by using the com uh composer right here and we're just going to um add in so we have our page right here and I'm going to add in the landing page and just because I don't want to write a single bit of code we're going to use our good old friend 01 mini and I'm going to say okay so I'm saying remove dummy content in this

Page and just uh import this component with our good old friend 01 mini let's go ahead and run this all right so it's giving us a bit of an explanation here I'm just going to go ahead and trust it and click accept Okay and it looks like it worked first try I mean that's pretty simple to do as you can see okay it looks like it actually does have the button working well on the render here actually everything looks pretty dang

Good right out of box it looks like we're getting a hydration error so let me just go ahead and paste this anytime you get an error like this you can literally just go into your cursor and just paste this in oh pretty simple it's literally just a used client uh I guess it was already let's go ahead and accept and now we should not get that error okay so it took a couple prompts to fix there and sometimes you'll get less

Like um basically first it's saying it was is going to add a used client to the page and then I said no I don't want that and then it was trying to do that again or something and basically then I just said uh no use client in page either way I'm still getting error because either way that wasn't solving the issue so if you're facing an issue just put it in composer put it in chat either one and just say hey

This is what it is this is the error and try to get it to fix it sometimes it won't won't do it on the first try but it should have to like two or three tries I I actually tend to find when you're doing stuff with like UI like very specific things with UI that's when it can hallucinate like crazy and you'll see here I'm typing all in cap sometimes it pisses me off and um I try to be nice to

The AI but uh sometimes I get pissed off at it so anyways so now we got our website loaded up here it's looking good enough so we're going to go ahead build the login page and actually get uh super Bas set up right now all right so did do so since I already have this chat open with the composer I'm actually just going to try it this way so I'm going to tag our superbase off. markdown and this actually isn't written

Um using like markdown um syntax but we're going to use it anyways markdown just makes it a bit easier for llms to read it but all right so we're going to start it off with this and see how it does so please completely set up off with for me using this super base off do guide uh off guide only follow these docs word for word don't do anything else for the landing page component when the login button is clicked it should

Take the user to login page where they can log in through super base let's go ahead and run this and uh I'm I don't know if it's going to be able to do everything for us but I'm curious if it does like out of box I'd be really amazed but I feel like we're definitely going to have to do a bit of um iteration to this but we'll see all right so here is our first output so basically it created our

Environment uh file or environment. looc we got our middleware set up our actions our page. TSX um and it looks like it did some editing here our route our page. TXS here we'll see what all these are and then our landing page um so environment variables we're going to add this in in just a second we got our client component server component middleware setup um applies the middleware authenticated pages okay so these These are the authenticated pages right here our actions.

TS our page. TSX email confirmation route Handler right here protected pages okay so it made a protected page which is good and then landing page update so updated that and we're going to it's telling us to install the dependencies which is good so we're going to run this going to go new terminal I'm going pnpm install superbase uh do DJs and then superbase SSR all right guys and just so you know where to get your environment variables and superbase you're going

To go over to your project settings all right you're going to set up your own project this is a test project and I'm going to delete this after this video anyways but here you have your Anon public key right here you're going to copy this and this is your uh private key your service roll key all right that does pretty much everything your admin key and then up top over here if I scroll up a bit is the URL for your

Superbase so you're going to want all of those those all right so I'm going to copy the URL I'm going to go here and first off I'm going to I'm just going to accept all these for now um so we got our superbase URL I'm going to paste that right here and I'm going to get my Anon key and I'm going to paste that as well right here go ahead and save that and okay and just out of box I want

To see what this looks like if I click login let's see okay so it does have the login page obviously it's very very like it's very professional very beautiful no I'm joking it's very ugly so we could actually just go over to v0 and say I'm saying generate me a beautiful professional login page that matches the theme of my site all right so I just said remove the 14-day free trial and forgot password and remember me and just have a signin

Button and a sign up button just to keep things simple for the sake of this video all right this looks good enough we are going to go ahead and install this I'm going to come up here copy this code go down here and we are going to install this all right so here we also have this UI component now of the login page and I'm going to basically just go into composer and tag our login page right here as well as

Our login page right here our actual login page our page. TXS and say please all right so I'm saying please make the login page. TSX component import it into the login page. TSX and make it function properly for our super base login all right and I just tagged those files here we're going to send that all right so we got our output updated login page modify login page here ensure navigation from landing page no changes needed for other files make sure

You have dependencies installed environment variables restart development server and yeah so let's go ahead and just accept this so so far I literally haven't done anything except accept what uh 01 gives us let's go ahead and see okay so looks like we're getting a failed to compile I'm just going to copy this and paste it over here one thing I will say and this is something that you won't see just due to editing is sometimes simple things like this take a

Long time like it just took about a minute just to reply to this um where Cloud Sonet would probably get it done in about 10 15 seconds tops all right so like I said I didn't want to write any code um at all so cursor did actually o z did give us the fix just updating our next config file but looks like it didn't put the form I wanted that same form so I'm going to tell it I wanted all right

So I said I wanted the same form for that orig from the original component not the ugly one you have for the login the same form and buttons exactly let's go ahead and run this okay so looks like it's updating the login page component and the loging uh and the landing page we'll go ahead and accept and let's hope that it worked okay so this is a lot better we got a nice looking UI here now looks like we're getting a

Hydration error again so I'm just going to copy and paste this and paste it into cser all right so I said the login button should log the user in through super base and sign up should create a accounts sign up does not nothing and login does this right here after it uh tries to log in there's a hydration error so I'm going to send that all right so I'm just going to go ahead and accept whatever I just did here and

Let's see how it works now okay it looks like it may have worked let's go ahead and check our super base back end perfect it actually worked guys so as you can see we completely I literally did not do one line of code I didn't edit anything I didn't use CLA I didn't use whatever I simply just used o1 to set up super base off I used v0 to set up the components make it look a little bit nice and we

Just fed every single eror we got back into 01 through cursor through chat gpg open AI the new model and it was able to set up this decent looking website in about 30 40 minutes uh of recording obviously this is going to be edited down um cuz yeah the one thing is there was a lot of waiting okay so if I was to actually like improve on this of course once the user logged in it would probably redirect them to that

Private page and that would probably be the dashboard or whatever the case may be so they won't see this login anymore and then you can make the log out functionality you can make the dashboard Etc but this is just the start guys this took me like I said 30 40 minutes to set up a basic website basic login that looks somewhat half decent we connected it back to our superbase datab or dashboard or superbase authentification um you could of course use

Super base as well for your database post grass Etc so pretty cool stuff guys if you want to see more videos like this if you want me to expand going deeper into doing builds um you know whether that's database setup um all that good stuff let me know in the comments down below if you want me to see if you want to see a specific video let me know in the comments down below I'm going to be uh doing more videos

In the next few days around 01 testing it out maybe testing it like I said between clads seeing how good this model actually is but but my opinion on it so far for using it for coding for projects with cursor um I think it's really good I think it's personally I probably in terms of like using it on a consistent basis with cursor uh I would probably use claw just because it's a lot faster it's way faster this one you can

Ask it a simple question sometimes and it can take like a minute or two um so that's the downside if you need to solve a complex problem that needs a lot of reasoning it could be useful or like I said like I showed at the start I'm using it for planning planning out your project probably pretty good for that and other than that guys if you're new to the channel we make videos on every single day on AI automation business growth

Coding sales Etc a bunch of cool stuff so make sure if you're not new to this channel you got some value here make sure to smash that like button smash that subscribe button to stay up to date with the daily uploads also check out our free stride Community down below our free Facebook group free Discord Channel you can join there network with myself as well as other like-minded individuals I'm trying to build a community here guys where we can all add

Value to each other uh I'm going to try to do my best to continuously improve the quality of this content get you guys as much value as possible and uh we're almost at 6K subscribers guys so uh thank you for all the recent support um 10K road to 10K is next so uh other than that I will see you in tomorrow's video guys let me know if you have any questions or thoughts in the comments down below let me know if

You've been playing around with 01 what type of uh tool or what type of things you've been able to build v01 cursor it's a crazy combo I will see you tomorrow's video guys keep hustling keep grinding and of course guys accelerate your stride take care