Get Started Building A SAAS with Cursor in 13 Mins

--- type: transcript date: 2025-05-13 youtube_id: 3Uc8KEY_-Mg --- # Transcript: Get Started Building A SAAS with Cursor in 13 Mins In this video, I'm going to be taking a look at Gemini 2.5 Pro within cursors. I thought I'd go through a practical demonstration, show you what it looks like, and hopefully as I go through this, you can potentially take something from this and see how you can potentially leverage building up some quick little applications. First, what I'm going to do is I'm going to mpm create convex at latest. And if you're not familiar with convex, effectively, it's a really easy way on how you can easily add in a database, server functions, things like file storage, cron jobs. There's a ton of really nice functionality with it and you can pair it with next vit whatever it might be. I'm going to set it up as a next.js application, but I'm also going to be setting it up with clerk. Once it's all installed, I'll just go into our directory and then I'll mpm rundev. Now, from here, I'm just going to call this my app. And then we're going to deploy everything to the cloud. If you haven't used convex before, this is the platform. It's really straightforward, really intuitive. You have your database here. We have our server functions. We have where we can store our files, any schedules that we have, our logging, all of that's all set up. The great thing with the Convex environment is as you go and update everything, it's going to go and sync it with what they have here. As soon as you begin to invoke functions within your application or update your database, you'll be able to see it live within the Convex platform. First, what I'm going to do is I'm just going to open up our Next.js template here. Here we see we have the Convex Nex.js as well as Clerk template. Now, a cool thing with Clerk is they also have keyless mode. You don't need to immediately go and chase down your API key. I can go ahead and claim this application. And if you're authenticated on Clerk, you can make a free account to do this. You can go ahead and call this my demo app or whatever it might be. And you can claim this application. And basically, as soon as I save out my API keys, we'll be able to see that we can resume development here. For instance, if I go and sign into our application, we have this nice clerk modal here and I can click to log in. And as soon as we log in, we'll see here is we do have to grab the JWT template within clerk. Given that we are using convex within clerk, if I go over to our projects, we have demo app here and I go over to configure on the left hand side, we should see JWT templates. I can create a new template. Select convex. Once it's saved, we have to grab the issuer here. We can go and copy this domain. If we go over to our authentication.configts file, what we'll have to uncomment is this section here. If this is a new project, this is going to be what it looks like. Now, within convex, there's a couple different ways on how you can add in environment variables. We can go over to environment variables and within we can put in the clerk JWT issuer domain. Grab that domain. I can save that out. Now, when I go and refresh our application, we have the convex nex.js as well as clerk on the home screen here. We can go ahead and we can add a random number here just like we see here. Basically, what's happening is we have the ability to add a number and then also list the number. As I click that button, it's going and it's using these server functions. Basically, it just has a starting point of an application to get everything rolling for us. Now that we have the starting point of our application, what I'm going to do is I'm just going to open up our agent here and we're going to get started. One thing to note is if you don't open up the root of your project within cursor sometimes it will try and write things in the wrong position. I found one thing that seems to mitigate it quite well is if you are actually within the root even though there was nothing within my app if I just go within the workspace it seems to work a little bit better. What I'm going to say here is I want to move the current homepage to a dashboard page and I also want to change the overall style to be neo brutalist. Everything on the site should have fun colors. Let's add in a navigation. Let's add in a footer, some placeholder links, and on the homepage, let's add in a ton of different components for what would otherwise be for a SAS company. Let's call it developers digest. Let's have some testimonials, FAQs, and the things that you'd typically see on a SAS website. So, just to give you an idea in terms of the benchmark speeds, Gemini 2.5 Pro does stream out at on average about 146 tokens per second. And given the capabilities and the strength and given the benchmarks of intelligence of the model as well as the cost being cheaper than things like GBD40 as well as sonnet 3.7, this is a really interesting model and personally I found myself using more and more Gemini models especially over the past year or so. Now if I open up our application here is the current state of things. We have a very Lauram Ipsum type of page. Now while it doesn't look terrible, it also doesn't look too great either. What was interesting with how it decided to do this was it looked like it potentially did the structural elements first, the HTML, and then after the fact it did this fun neo brutalist theme. Now, if I go over to our dashboard, I see that isn't quite updated now, but there we go. We see it snap in as I land on the page here. So, overall, we have a relatively simple page here. We have the dashboard. We can add the random number. Now, we're moving in a little bit more of a direction that we can work with here. One thing that I'm going to do is we have the user dashboard. But one thing here is we have this login button. Instead of having it just on this page, I'm going to want to have that on the homepage as well. Now that the agent is done, I'm going to say I want to add in the clerk authentication button within the main navigation. Additionally, on the dashboard page, I also want to show some more users specific information. Specifically, let's add in an area where they can add in their name as well as some other information about themselves. But most importantly, I want to make sure when they save that out that it saves in a unique key that can be further retrieved from within Convex. This just gives you an idea on how you can potentially leverage some of these new services. One thing to note with a lot of the AI generated code that is out there, you do always want to make sure that what you're pushing out there is secure. Now, if you're building with nextgen tools like cursor, windsurf, lovable, or bolt, you already know how quickly AI can turn ideas into fully working apps. But the faster we ship, the more we need to think about security. One miss vulnerability in an AI generated pull request can undo all that productivity. That's why I've partnered with Sneak, the developer first security platform that integrates into your workflow, scanning code, open source packages, containers, and even infrastructure as code before anything reaches production. On May 28th, Sneak is hosting Sneak Launch, a completely free virtual event focused on securing the new AI era of development. You'll hear from their CEO on why today's AI powered enterprise isn't secure yet, and learn hands-on techniques to keep pace with the huge volume of AI generated code while staying ahead of emerging LLM threat vectors. Two sessions are available, 10 a.m. ET as well as 6 p.m. ET, so you can fit it into your schedule. If you want in, register by clicking the link within the description of the video. Build fast, stay secure, and I'll see you and your safer code on May 28th. One thing I've definitely noticed with cursor, as well as the increase in intelligence of these latest models, is it definitely seems like you can feed in more and more complex instructions. Initially, when I was using cursor, it did quite well with quite poignant instructions. Do this task, do that task, and if you gave it something to focus on, it did quite well. But as you've seen in some of the prompts, I can tell it to do several different things. And broadly speaking, it does a pretty reasonable job considering the request. Here we can see it's updating our convex schema and it's just going through a ton of different code. Now, if I take a look at our application, we have the clerk authentication button within the navigation here. And now, if I go over to our profile and I go and I save this out, we can see the profile was updated successfully. And if I hop over to Convex and I go over to data within user profiles, I now see that associated name, user ID, as well as the creation time. A really cool thing with Clarkly just released billing within beta. My X feed has just been full of a bunch of different ads for this new functionality from Clerk. And one thing that really stood out to me is the developer experience in terms of how you can set this up. This really alleviates a ton of the different pieces that would go in having to set up Stripe and all of the different pieces, whether it's web hooks, making sure that the users are synced with what the information is within Stripe, making sure everything works according to plan. There's just a ton to consider with that. And the really cool thing with this is if we want to protect a page, we can just wrap that within this protect provider, control who sees that page based on their particular access. Additionally, what you can reference is the method. This is cool because basically what you can do is if someone has a particular type of plan, you can render dynamically the different tiers. Say if there's a plus tier and a pro tier, depending on what access they have, you can render the different React components and grant access just like that. One thing to know with this is it does come at a price. There are also some things that I noticed within it when I was initially looking at it. It doesn't seem like there are web hooks built into the native integration quite yet. There could be some applications where you might have to do a little bit more work or something outside of like an event- driven architecture that you might have been used to, but overall it's a really great option to consider if you want to leverage subscriptions. You can get started under subscriptions. You can go to configure and we can create a plan. So it will start you off with a free plan. But what you can do within here is if I have say a plus plan, it will give you a slug. You can describe this. This gives access to plus features and you can give a price. Let's just call this $10. And we can give it an annual discount of $8 for instance. And then you also have the ability to add in effectively metadata. You can say something like access to image generation or whatever it might be. And you can go and create different features just like that. Now, once you save this out, all that you need to do to get set up with this is if I go over to Clerk Docs and I go into billing and I go to overview and I go to B TOC SAS within here, you can see just how simple it is to set all of this up. Now, what's really cool with this, all that I have to do to add this within our application, if I import the pricing table, just like that, and then I grab the pricing table component and I put it between a section. Then the last thing that we have to do is once you've set up the plans, you just have to enable billing in the console here. If I go back to our application within our homepage, we have our homepage, but now we also have these components here. We have the free tier and then we also have this plus tier for the image generation. As soon as I click that, I have all of that information to check out right there. And now that I have this within our application, given that it is already within the authentication object and we have the authentication already bound to what we've set up within the unique user ID, what we can now do here is I can go back to cursor. Now, what I can do here is I can say based on the following docs and I'll paste in that documentation page just so the agent actually does have that current context of what they just released given this just came out a number of days ago. If a user has the plus tier, let's make sure on the dashboard to show pluson content. Alternatively, if they're on the free tier, show freeon content. Now we see the agent is going through and it's decided to use that protect component from clerk to conditionally render different contents the dashboard based on the user subscription tier. I do see welcome back at developers digest. You are on the free tier. The agent from cursor did call out that you must use the plus tier within protect. We have the plan of plus tier. When I set this up and this is where variables are still important while you can describe things within natural language. I'm going to go back to our subscription plans and what I originally called plus, what I'm going to replace that with is just plus tier here. Now, it's going to have that proper context of that slug or that variable that we have set up within a clerk here. Now, if I demonstrate this working, if I go and I subscribe and I use a test payment here, now what you'll see that isn't on screen here is I do get an email. I have a receipt for the $10. when I'll click continue here. And now if I go over to our dashboard on the plus tier, we have the exclusive plus feature unlimited numbers. Add big numbers here. At this point, this is going to be where you can add in those premium features, whether it's AI features or whatever your application that you're building. Right? This is a really great option in terms of how to build out a SAS. Now, another thing that I noticed that is really quite neat with this on the pricing tiles here. Now, you will be able to change out the styling of all of this as well as the drop-down that you have here within Clerk. You can change all of that out. But let's say you want to switch to the free plan. There are some subtle features that are quite nice that would have otherwise been pretty non-trivial had you had to set this up in your own application. Now, we see that this is active. But now, starting on June 10th, we see that the free tier is going to be upcoming. Overall, I just wanted to show you a really quick starting point in terms of how you can get started with building your SAS application. Obviously, I just spent a number of minutes on this. I didn't add any features of value, but at this point, you can really build to your heart's content. So long as you put it within that conditional logic to protect it based on the user that's authenticated and the tier that they've subscribed to, you'll be able to have the basis point of building out a SAS application. But otherwise, that's pretty much it for this video. Hopefully, you found this video useful. If you found this video useful, please comment, share, and subscribe.