NEW: Cursor AI IDE + Clerk Authentication Setup🤖 OpenAI o1 + Claude Sonnet 3.5 Next.JS App (Python)

What's going on everybody Josh poock here and in today's video we are going to be building out an application using AI more specifically using the AI IDE cursor now we're going to be optimizing this app I already built in the last few videos called stride tube and we're going to be using v0 Shad Cen UI for the components as well as clerk we'll be setting up clerk completely with cursor for user authentification let's dive right into it [Music] all right so

For those of you who aren't new to this channel I did two videos in the last week or so the first one was building a Chrome extension so we used cursor to basically build a Chrome extension and I called that Chrome extension stride tube that we built and this Chrome extension essentially was able to go to any YouTube video and all you would simply do is just copy the you you would click a button basically right down here and it would

Automatically grab the transcript of the YouTube video and then summarize that YouTube video okay and then in the next video we did we actually took that Chrome extension and we converted it to a web app so here we have stride tube web and this is a nextjs app so so we've been making these incremental improvements but in today's video we're actually going to turn this into an application meaning we're going to set up authentification with clerk well we're not going to

Cursor is and who knows maybe we'll have to turn this into a series and continuously just keep on improving this one all right so all right so without Ado for those of you who haven't seen this app in action I'm going to show you so we're just going to copy this clip right here from the all-in podcast and I am going to go right to our app and we are going to paste in the video and this is going to grab

A and this is going to grab a little thumbnail or well not even a thumbnail an embed of the YouTube video right here and then we're going to paste in our open API key if I really wanted to I could put this with um really any type of you know uh llm we could do CLA open AI we could even do um potentially local models right so a lot of different options but just for the sake of Simplicity we're going to

Stick with open Ai and yeah so once we do that we just click summarize and if everything goes well boom we have the transcript right here and we have the summary Okay so that is how the app works and one of the main things we're going to be setting up first is clerk okay so if you're not familiar with clerk uh they claim they're the most comprehensive user management platform and it is a very comprehensive user user management platform um for

Those of you I did a video maybe a week ago showing you guys how to set up super base authentification using cursor and this process will be somewhat similar um if for those of you don't know kind of the difference is I'm not going to do a comparison between clear and super base but clurk is really good it has essentially a lot of features out of box like we have twostep verification here we have all these different pre-built components like a

Account um components here uh we have like you can set up organizations which is good for like a multi-tenant site a bunch of different stuff out of box um so it's really good for that the downside is that you it's not open source in terms of something maybe like next off and so you don't have I guess it's hosted on someone else's server your your user database and then also two there's a pricing with um clerk okay so not going to

Go over that but there is a free tier so you get 10,000 monthly active users on the free tier and I believe you get 100 uh organizations on the free tier so for those of you who are using multi-end site now for 25 bucks you can remove the clerk branding and you get a bunch of other stuff so anyways let's go ahead and we're going to start off by one going to the docs here okay and I'm going to go about

This as if I've never used clerk before like I really don't know too much about it and I just want to set this thing up on our next app and that's what we're going to use cursor for so what I would typically do is I would start by coming to the docks and I would look for different relevant docks for what I want to do which for us it would be nextjs and this is the nextjs getting started so we can

See all this stuff here and I could run this myself go through the docks try to set up the different components but we're we're not going to do that we don't have time for that so we're actually just going to go to cursor right here and I actually did do a bit of uh copy and pasting some of these docks um before so we got our getting started docks here we have a bit of the UI components I didn't copy the

Over the full docks just because there is extensive docks um but we're going to use some of this and basically I'm just going to go into composer here and we're going to see what this thing's made of first of all so I'm going to uh add the UI components MD file markdown and the getting started markdown into context and if you don't know why I'm using markdowns and copy and pasting docks over here check out my longer form uh stepbystep cursor

Tutorial where I give you guys a free I believe 16 to 19 page sop standard operating procedure on how to use cursor in the most efficient way how to set up your workpace and what specific things you should do in order to get the best output um but for those of you who are already kind of understand this maybe you've been using cursor we're going to continue on here so I'm going to go ahead and write the first prompt okay I'm

Also going to include this project structure MD file just for uh context as well and this is a pretty simple short one just concise I mean we don't really have a big app but you can see here we're showing the tree structure of our app here we got our components there's really not much going on in this app besides three components and a page. txt where we're rendering those components on um and then we have a python for those of you

Who didn't see my other video how this is actually how this actually works behind the scenes we have a python flask server that's set up too so that's what's doing the uh getting the transcripts and doing the Su uh sending the API request to open AI so if you want to pretty simple as set up but we're not going to dive too much into the python side of things we're going to be doing the nextjs off and all this stuff so

Check on my other video I'll leave links down below if you want to see how we got to this point okay so here is my prompt and maybe who knows maybe we'll have to adjust this maybe it won't work the first time we'll see but it's please help me completely set up clerk off for my app here and to end I don't want to have to do a single thing just create all the files folders middleware protected routes components environment variables

Etc tell me what commands I have to run and if there's any info you need from me or next steps that we should do after this just ask or tell me I'm completely new to Kirk Clerk and trust you to do everything okay so we're just simply going to run this and of course we could use uh Claude Sonet 3 uh 3.5 or we could use 01 preview just for the sake of this you know 0 one's the new one I'll

Go ahead and start off with 01 and then we'll probably switch to Claude Sonet for the more um you know backto back tasks here okay cool so with 01 we usually always get pretty extensive responses here oh okay so this is okay I made a mistake I actually sent that in chat so it wouldn't actually create everything for us now I'm going to send this in composer and I just got it mixed up because now with the new update you can

See cursor can be in the AI pane on on the right side here or could also be obviously floating or in the big pain um and we could use a notepad for some of this I may actually go ahead and start using a little bit of notepads um later on just so we can see because I know a lot of people were asking me what's the difference between notepads and project so we'll see if we can utilize them a bit no

Promises cuz this is a kind of a small project but definitely will be doing more about notepads in future videos so stay tuned for that okay so we got the output from 01 um I'm going to be quite honest I am not insanely impressed by it I mean it's okay I'm going to go ahead and reject this and try this again I'm going to use Claude Sonet 3.5 and just see we may go ahead and use the 01 one but I

Just want to compare because um just from looking at it I can tell that it's you know could definitely be done better okay to be honest both weren't bad um I think if we had a bit more of the docks it would maybe set up a bit better but uh let's go ahead I'm just for some reason sometimes it doesn't do the um do won't start creating the files for you so I'm just saying you should make the files for all

The files for me okay so now we can see it's creating the files so it's updating the layout. TSX creating the header. TS SX The Source page right here for the dashboard um and then creating the middleware okay perfect creating the environment variable file um we're going to have to add our keys in and then update next config sure okay and okay so we're going to accept this and I'm curious to see if it's going to work out of box all

Right so when you go to Clerk and you create your app here it's actually going to walk you through this pretty simple right here um to create your uh environment variables your middleware your clerk provider right here and then to create your first user we're going to do try to do a little bit more than just this setup and uh let's go ahead and create copy these environment variables okay we're getting this error here I think this I'm going to just

Copy and paste this into cursor okay I'm going to delete our next folder here I think it's just a caching issue oh I see what the issue is so this is the annoying thing about llms and honestly if you don't know much about the um what you're using whether that's clerk super base like for example when I'm and when I was doing the super base I mentioned in super base that super base off helpers are depreciated and I mean they still

Work but um for example with uh clerk with the newer version of clerk off middleware is now uh clerk middleware so that's what we want to use so that's why that's not working so um those are a few things just a side note to keep in mind as you're building with AI you really got to make sure you know um you're using up to-date docks or up todate this or that and even sometimes like you saw we are using upto-date docks

Even though we only have a couple here like I believe it should mention we go clerk yeah see clerk middleware it's showing right here how to add middleware so I should have maybe specified more uh this is a lesson within that first initial prompt don't don't go off your like training data or just do it the way that the docs say don't go you know anything outside of how the getting started guide references setting up the middleware and the authentification because

That's what it did and it's using the outdated stuff okay so now that we got that okay so we're getting another error let me just put this into composer for all I know this could be outdated as well potentially the function I'm going to say reference the getting started MD updated docs all right now I'm going to submit this with the error here see now it's apologizing saying I should have referenced the updated docks uh let's correct this based on the

Getting started guide okay so now it should be pretty good I'm assuming okay this is what we wanted so that's actually my fat bad I can't even blame cursor for doing this because I noticed this it didn't even have the uh the file structure set up right here so always specify to use the most updated docks and we still may even get some issues here actually I need to go ahead and accept these first okay that's really annoying because it literally

Just changed the middleware again on me even though I referenced that dock there so I mean just a lesson you got to be kind of like really precise with when you talk to these things sometimes because if it's just using old outdated data then it could completely screw up things and you're going to get a bunch of Errors so um yeah you do have to use these things but you can't 100% rely on just cursor especially right now okay looks like

We got things somewhat working now now I will let you know what I said sometimes I get kind of angry with these models and I you know type in all caps or whatnot but I said don't change middleware anymore and and then I sent the error message um which was an outdated function I believe uh make sure you're using new docs from MD file not your old outdated training data this is new clerk update believe it got an update maybe like

Six seven months ago um you know I could be wrong but I think it was around that time so anyways now it's and also sometimes you need to tell it to not change change the other stuff especially if you're using composer um chat you know chat it's a little bit different because it's not going to change everything you can select what you want to change for composer you kind of do have to um be specific with it one that's that's another

Reason why if you guys didn't see my video on the new update like this checkout feature is so crucial I've been using this thing like crazy it allows you to go back um and you don't have to be so so worried if you know composer messes you up anymore okay so now we have stride tube here let's go ahead and click sign in okay so now we have our clerk set up here I'm just going to log in through Google okay

We logged in okay looks like we still have that same issue on this other page that it did beforehand so I'm just going to feed this and and say and fix it here too all right guys so I mean hopefully this learing lesson for me that that I already knew but sometimes you make these mistakes and hopefully you guys got some value here from seeing and you know just reinforcing that you guys really need to be precise with your prompts especially

If you're using um a a software whatever software it is whether you're familiar with it or you're not familiar with it really make sure you're providing it upto-date data and not only just that you really have to tell it use this upto-date data don't use you know your outdated training data okay I was running into some connectivity issues sometimes cursor does that but uh I use GPT for uh GPT 01 mini for this one hopefully it's good I'm going to accept

It just with the confidence knowing if it screws everything up I can revert back to a checkpoint and it looks like it ah is super annoying that it keeps using the wrong stuff here all right so boom we finally got here we can see that we got stride tube here um go to dashboard and we got our dashboard here welcome to dashboard user blank ID whatever it's a protected route only authenticated users can see this page and we have our content

Here so I'll quickly walk you through kind of the back and forth I went through a lot of it was just tedious um kind of me yelling at uh cursor but most of it it comes down to like I said before the the initial prompt all right so obviously you know if if you're doing a real project where you're setting things up and you're kind of taking it I would suggest taking it a bit slower and kind of making sure you're

Going more methodically through it unless it's something that you already know like 100% or if you already have like the docks and the system and the prompt kind of ready and you know exactly how to tell it then go boom go for it but um if you're kind of like trying to speedrun like what I technically kind of was trying to do for you know just trying to get this done as quick as possible sometimes you may may not prompt it

The best way right and I did do a pretty decent job at prompting but sometimes these llms especially right now will make stupid mistakes all right so you really got to take accountability for that and realize that you know it's you got to be very specific all right even if you do a decent prompt and you may think it's not your fault um you got to be more specific and sometimes even even if you do an amazing prompt they will still

Just start hallucinating and keep making the same mistake over and over and referencing old docks opposed to new docks so you can see here I'm just basically saying follow the markdown file I'm getting this error uh same issue look at the getting started markdown file you're using the old way and it's doing it I said wrong again I'm losing patience read before you speak look at the entire markdown file first I said wrong again check the protected routes. MD does that

Help so I updated some new information from the docks here and then it did some stuff and I said okay great it it did somewhat work a bit and I said you remove the some of the old um components add that back in and then um kind of Mis misunderstood what I was saying so went back and forth a bit and then basically yeah that was pretty much it it did end up adding the components back in and then it started

Doing the same error again and I'm like oh my gosh So eventually I did get it to not do that error and it basically right here it's and changeed the import of off from clerk nextjs to clerk uh Ser for SL server and then and honestly I wasn't even really looking too much at the code and examining it and trying to figure out why it was making a mistake I was just kind of letting it run more or less so if

You're taking your time with your project and you're actually maybe analyzing the code a bit um you would probably be able to catch that a little bit sooner if you're familiar with what tool you're using now and I was just getting a hydration error so I told her about that and then it fixed the hydration error so now we are in our dashboard so we have all set up right here and go manage our account we have clerk boom and we

Have our app here all right guys so now that we set that up I'm just going to end it off there I don't want to make this video too too long um now there's a lot more you can do with clerk authentification there's so many different features that clerk has and uh you know maybe if you want us to explore more and go more in depth in future videos let me know in the comments down below if you guys want me

To continue out building this app maybe actually make it look somewhat more presentable and a little bit nicer and you know add some different features and whatnot let me know or if you want me to do a different app or if you want me to do a v just different video in general let me know in the comments Down Below guys this video is really just supposed to show you a few different strategies you can use to take you know documentation

From any sort of tool Library whatever and implement it using cursor without having to really do much actual coding or thinking about it kind of just taking that feedback putting it into cursor letting cursor do the iterative process and try to troubleshoot fix errors Etc obviously it's not perfect and like I said before and showcase some of these errors that we faced it's very important to make sure you're having up-to-date docks and being very precise with your prompts you know the

More precise you can be right from the start the more methodical you can be with your planning and getting everything ready is that's just going to shortcut your um your project and getting the right outcome faster all right you want to learn more about that check out the video down below my step to my step-by-step guide for using cursor creating I give you a PRD of product requirements doc template so you can use that to outline your project and get really

Clear on where you want to go before you start just trying to rely on AI okay so obviously because it's a YouTube video right now we don't have 5 hours to plan a whole big project right now um I was kind of rushing for certain things uh maybe didn't take as long as I should have with certain prompts so we encountered a little bit more issues all right but anyways guys if you're new to this channel we upload videos every single

Day on ai ai coding automation business growth Marketing sales Etc so if you want to stay up to date with the daily uploads and you got some value from this video make sure to smash that like button and subscribe to this channel to stay up to date with all the content other than that guys let me know what your thoughts are about clerk you know do you like super base better and how are you using uh cursor to basically not uh

Encounter some of these issues to mitigate hallucinations um what are your thoughts on you know do you prefer 01 or do you prefer Claude for certain things do you like o1 more for planning or do you just like it in general 01 mini or Claude whatever the case may be let me know what your thoughts are guys down below if you have any questions let me know as well other than that guys I will see you in tomorrow's video keep hustling

Keep grinding and of course accelerate your stride take care here