Cursor 2.0 Launch
Learn how to build a full-stack app with Cursor 2.0, from planning to deployment.
Terms in this video
Transcript
Well, good morning, good afternoon, good evening, wherever you're tuning in from. We're very excited to have you here to talk more about our recent release of Cursor 2.0. Uh hopefully you all have seen it, but we just released a new version and I would love to walk you through everything that we shipped with a very practical demo. We're going to build something together and show some of the new features we have. So, if you want to drop in the chat where you're
tuning in from, that's always fun to hear where people are are at around the world. and we can kind of get right into things and start building out an app together. We got Austin, North Carolina, Amsterdam, Ottawa, New York, all over Tel Aviv, Argentina. Amazing. Oh, wow.
Omaha, Nebraska, you're like three hours from me. So, very close. I'm in the Midwest. Very nice. All right, let me share my screen. Oh, wow. It's really flowing in now. We got people everywhere. [laughter] Love to see it. All right, I want to start by giving an overview of what we're going to build together today. And in the process of doing that, I'm going to show many of the Cursor 2.0 features. Now, to start, I'm on Cursor 2.0, but you might notice things look
pretty normal. It looks pretty similar to the cursor that I'm used to. And that's because we have our existing layout, our classic layout or the editor IDE layout. Nothing has changed here. So, if you're the type of person who loves this layout, that's amazing. However, in 2.0, we've introduced a new way to allow you to work with agents, and we're calling it the agent layout or the agent window. And I can either click this button in the top left or command E
or control E to jump to this new view. Now in this new view, it's much more agent first, agent centric where I can start with prompts and control the agent and run agents in parallel, run multiple agents, and a bunch more. We're going to get into this. We're going to show different models. Um, but first, I want to talk about the idea of the app that we're going to build together here, and I'm going to talk through some of the ways that we can do this very
effectively. So, I don't know about you all, I'm a big fan of Christmas, of the holidays, and we're past Halloween, so it's now officially okay for me to start talking about Christmas. Uh, and I and it's pretty early. I know it's just the beginning of November, but we're we're going to start thinking about Christmas.
And you might have played a game called Secret Santa, where you basically get paired with people. Each person gets a unknown uh gifter and you get them gifts. And the way this works is you go through, you pick a bunch of products that are usually under some dollar amount threshold, 20 bucks or something, and then you get mashed with somebody anonymously and they buy a gift off their list. So, I kind of wanted to build a full stack app that we can use
to do this and I want to talk through some of the tech stack that we're going to use and some of the features that we're going to build. So, first things first, I did a few things to get us set up today. Now, the reason why I did this ahead of time is because you still want to use deterministic commands like using these scaffold commands to create new projects. So, I created a new Nex.js app and then I installed Shadcen UI. If you're not as familiar with this, Nex.js
is a web framework allows you to create websites using React code. Tailwind CSS and Shaden UI are just ways to style your websites and to use components that are highquality. They look nice. They're accessible. So, kind of set up the scaffolding. The reason for that is I don't really want to ask the agent to generate all these files when I can just run a command and do it. And then also we're going to deploy this eventually. So I'm uh installed Verscell to deploy
our app at uh Santa list.vercell.app. So I have some ideas for what we want to build. Um and right now the app isn't really doing anything and I want to get started building this out. So first things first, I'm going to enter into agent layout and I'm going to click this browser icon. This browser icon is new to Cursor 2.0. And I'm going to build using the browser tab. So you can either do this integrated browser or you can open up in an external Chrome window. And then also I'm going to do control back tick to
open up the terminal. There's also if you prefer to keep your controls up here, you can do that as well. But I'm going to open up the terminal. And I'm using pmppm. So I'm going to do pmppm rundev. I also have this alias to just PN, but you can uh you can use whatever package manager you want. And now we can open up our application in this kind of integrated browser.
Uh the back tick is not the same as the backslash. So back tick is it's the same as the tildy on the top left of your your screen. I have these hidden up here, by the way, um layout controls, but it's the same thing as this if you prefer that. I just kind of like having the very minimal layout, but that kind of is a way to toggle between your terminal being open or not. You can also just ask the agent, hey, uh, start the dev server and open browser if you
really want. Um, so there's kind of multiple ways to get into this entry point. So we've got our kind of environment set up. We have an app. We have it running in our local machine. We have it open in the browser. Now I want to actually start scaffolding this thing out. And what we've been working on improving and making really great in cursor 2.0 is planning before implementing code. So we're going to talk through kind of two different strategies of coding with AI. The first one is kind of your fast loop and the
second one is your deep loop. Uh and we're going to actually start with the deep loop where you want to do more work kind of in the background or more processing power uh before you go and make a bunch of fast changes in the foreground. So, it's kind of foreground and background or synchronous and asynchronous. So, for example, if I go back over to our readme, I had a list of some ideas here. So, I'm just going to copy this and inside of the prompt
input, we've kind of redesigned and simplified our prompt input. You can do shift tab or you can click on this and it's going to switch between the different modes. So, I'm going to shift into plan mode and I'm going to paste in some of these ideas I had. And you'll see they show up as this kind of inline pill. So, I can paste lines from specific files and then, you know, add additional context. Or if I want to paste without formatting, I can do
command shiftV and then it doesn't put the inline pill. And uh I want to start creating a plan for this. So, we're going to say, let's create a secret [snorts] Santa gifting game. And one of my first tips for plans is to try not to do everything all at once in one plan. You want to break things down into chunks. So, in this app, people are going to need to log in. There's going to need to be some authentication. So, I think we should tackle that first. um users. So, we're going to create a
secret Santa game. Users can log in, see their list, and be part of a game. Uh each secret Santa game can have many people. Um two people get paired, and there's probably like an even number of people. Cool. Um and then this like idea about searching for gifts, let's just leave that. That's too much stuff for one plan. Same thing with, you know, adding to the list of a products page.
Too much for one plan. So for what this first piece of plan is, I want to set up the O flow using Drizzle, which is a way of working with a database. The database we're going to use here is Postgress. So we need a way to let users log in and then save that information into a database. So we're going to use Drizzle and Postgress. And you can really use whatever tools you want for authentication. You can do this in a bunch of different ways. You can
manually set up an ooth client. You can use abstractions on top. Just for fun, we're going to use one called better o, which is newer. So, we're going to try this. And uh they have a guide here that talks about, you know, the most recent way of using adapters with drizzle. So, I'm just actually going to take this and just say docs are here. And um you'll see we can just kind of paste these links in line and they show up as pills. And we're gonna do let's try sonnet for
the plan on this. Um, so let's actually kick this off. And what you're going to notice is I put a link in the prompt, but I didn't have to say at web or at link. And you'll notice there if if you've been using cursor for some time, we used to have this very broad extensive list of commands that you would do in the context menu. and it required you to be pretty explicit about what you wanted to include. Well, as models have got better, as agents have got better, you don't have to be as explicit. And the
agent and harness inside of cursor, it knows when you put a link, you probably want to go read that link, right? So, you can see up here it went and it saw that link. It went and read the content of that links. Uh, now the way plan mode works, which is really great, is it comes back with clarifying questions.
And these are really helpful because often it asks me things that I hadn't really considered yet. So game creation management, who creates games and how are participants added? Um, what do we want to do here? One organizer can create a game. Uh, let's do that. For participants joining, uh, can they see who they're assigned gifts to give to? Let's do on a specific date and time.
let's do on a specific date and time. Sure. Should users have gift registries and wish list? Yes, they should. Uh scope for initial implementation off database setup basic game creation and pairing only. Yes, I don't want to do everything. If I do too much, it will be harder for the agent to get it all right. And then O providers, we're just going to do Google O. so we can log in with your Google accounts. I think that's probably the the easiest way to
get O up and rolling here. So, we're going to do some clarifying questions for me. I see two comments in the chat. How do you switch into this view? Uh you can toggle in the top left uh if you're in the classic IDE view. So, I can actually just go back right here. Um and you can use command E on Mac or control E on Windows. If it's not working for you, make sure you're on the latest version of cursor. Um and please let me know uh question here. The brain icon is not showing. This was also an improvement
that we made. Uh the functionality has not changed. So the thinking or non-thinking models uh most of the time people are using thinking models now. So we don't show a little brain icon even though functionally it still works the same way. Any other questions?
Nice. Okay. Uh, I'll make sure to answer more questions as we go, but I'll just keep checking the chat uh as we're making progress along. So, we have a plan. So, we used Sonnet to create our plan. Um, let me just close this for more space. You can kind of toggle these sidebars. And I'll just make this a bit smaller. So, here's what it thinks we need to do. Uh, better off Drizzle Postgress. Uh, we need an EMV local file.
Um, great. We're going to set up our dri drizzle configuration. We're going to make a database schema. This is something where we should probably make sure this looks correct. So, we need to have tables for user session account verification. That all seems okay for a game. You have many participants to a game. And then you also have gift items. That seems okay. Configure drizzle client. Configure better off. make an API route.
Okay. And then run a database migration. So the database migration, we'll have our schema and we can even ask the agent if we want explain our schema, explain the relationships in our database. The schema is just the mapping for how uh how our application should work or how our data should be structured and then the migration will actually go and update our database which is empty. We don't there's nothing in it right now to support this new uh application. So this all seems fine. Uh I'm going to make two
changes here which is now you can actually edit this directly like I already have this or you can ask it in the chat and I went ahead of time and provisioned a database so that we wouldn't have to do that live. So I'm just going to save those changes here and you can also change whether you want to view this uh you know with markdown or something else. uh and you can change the model that you want to implement it. So for this kind of deep work mode where the agent goes and creates a plan I recommend using
models like sonnet or gp5 uh codecs work really well for this. Then when you want to actually go and build you can choose to build on your machine or you can build it in the cloud. And we're going to decide here to build locally on our machine and we're going to use composer one. So I'm going to hit build. Composer one is cursor's first coding model for agentic coding. So we have um developed a custom model for tab in the past which many of you have probably used. We're
taking all of that same insight for building a really really fast and smart autocomplete model and we're bringing that to aentic coding and we find that this model is both very fast but also very smart for a lot of the kind of fast loop tasks. So we have a very good plan now and we want to actually go and do the stuff. Well, composer works very well for that. Uh as well as iterating on these changes very quickly in the front end. Um so it's going to go ahead
and start building this out. We can just kind of see what's happening here. It's installing some dependencies for our OM uh which is basically a wrapper on the database. It's uh setting up some things in our EMV file. Setting up our drizzle file. And we see here it's actually searching the web. So it's going out and just double-checking and making sure do we have the latest versions of how to define uh define these things. All along updating a to-do list. So the agent has
the ability to kind of track its progress through these to-do lists. As part of 2.0, we've made the agent harness. So what actually wraps the model and integrates it inside of cursor. We've made this much better across every single model you use. So whether you're using a Frontier model, a sonnet, a GPT5 codeex, you're using cursors, model, composer, all of these things, we've tried to make these really, really smooth. And composer is just really fast. So you see it just ripping through, generating a ton of
code after going and searching the web and figuring out which bits it wants to add. So we're going to let this just keep cooking away. And let me check and see if there's any questions while this is working. Um, uh, does cursor offer a trial? Yes, we do offer a trial.
Why is the plan editor different from a regular text editor? Uh, we can't I can't search and find inside of it. Uh, good news. This should be fixed in the next version. So, we're going to do a patch version. So, you can command F inside of the plan editor, similar to a regular text editor. Uh, how did you bring up the browser? this uh globe icon here. You can click to open the browser tab or you can ask the agent directly, hey uh I want to um open up the browser. Uh it wanted to go make some changes to my ENV file. So
I went ahead and allowed that. It's updating our git ignore. Great. Other questions while this is still cooking here? Um, can we also explain sandbox versus everything else? Um, so there's kind of multiple modes you can have the agent run in. By default, it's going to run in a sandbox. What that means is, let's say I open up this project. There's a project called Secret Santa. It's in a directory on my computer. when it runs by default in the sandbox on Mac for example that means that you're giving
the agent permission to run commands and um you know things like reading are just automatically going to be allowed so reading files uh because you kind of scoped it into this sandbox environment of this directory then you can still get prompted when there's things like it prompted me it wanted to modify the file um let's see what else it's doing here it's Uh, checking some of the folders. Great. Searching something on the web.
Um, what other questions do we have here? Can you explain the browser integration? So, the browser integration, just pull this back up um over here. There's a couple things here. One, obviously, you can view what you're what you're building, but more importantly, the agent has context of the browser. So, I can use these buttons in the top right. I can select specific elements and it can send them to the agent chat. So it knows the actual DOM element. It knows all of the CSS properties on it and you can send that
and you can ask for changes which I'm sure we'll do here very soon. Um you can also open up dev tools. So if you want to just use the normal DevTools, you can do that in line here or in a a separate browser. So the cursor agent now with the browser integration can read console logs. It can read network logs. uh it can read a lot of information the browser is giving. So let's excuse [clears throat] me let's review this change. Um another nice feature of
cursor 2.0 is that we have this integrated view uh where you can review all the changes the agent makes. So we have our configuration file. We have our schema account verification games participants items relations. We have our database index file. So just creating a new connection to our Postgress database and using the Drizzle OM. The Drizzle OM again is just a way to have type safety when accessing your database. Uh then we have a file for authentication
and we have an API route that sets up this better off. Better off is just an abstraction on top of Google Oath. So, if you want your application to be able to sign in with Google, this is a helpful way to add that in a kind of very concise way. So, all of this looks good. I'm going to hit keep all. And I want to double check that the uh EMV was correct. So, we're going to do a little boop. Oh, it's off the screen. Where did it go? Uh, that's because I need to
check my EMV file and I don't want to get it in the recording. So, I'm going to make sure that this looks good. Um, there was the Google client ID, Google Client secret. So, I want to make sure those are named correctly, and they are named correctly. And then there's the database URL that's in there correctly. Great.
Okay, we're back. [laughter] Uh, okay. So, we have an EMV file. That seems okay. I'm going to go back to this mode. And what I want to do for the next steps, we have our EMV local. We're going to run these database migrations. Now, I can actually go and run these commands myself or we can just say run the DB migrations, please.
Great. And why don't we start pulling up some questions while this is going from the Q&A. So, this is going to Let's see what it's doing. It's generating the better off schema. It is then running the migrations. Cool. Uh, looks like that worked. So, it generated the SQL migration for our application, which we can probably go actually look at the file. So, if you go to /db um let's see where that's at.
Drizzle, here's the actual SQL migration that was ran. So, these are all the commands that were actually thrown to the SQL database. And that's why the TypeScript abstractions on top are kind of nice. Um, so okay, it created seven tables in our database for better off secret Santa games. It has all of the foreign key relationships. Our database is ready to go. Uh, we can review the changes if we want. This seems good. We'll keep these. Uh, let's see if it
actually works. So, okay, let's replace uh the page with a login button to test. And if this works, that'd be good. That means we set up um the scaffolding of our application to persist the user authentication to a database and to actually support signing in with Google. So we've got uh secret signin, sign in with Google, secret Santa seems okay.
Let's give it a shot. We need the better off secret. So once again, we're going to pop this off the screen. Boop. And I'm going to open up the thev file and I'm going to add this file in. I could do it on screen, but then you know you know you know how it goes.
Better off secret. Great. Okay. Bring this back on screen. Nice. Uh, now make sure we have the right things. I need a better off URL as well too. Great. Let's add that in the emb.local as well. Better off URL is local http localhost 3000. Great.
And we're back. Uh, so we have all this. Uh, we're going to start our dev server. Actually, I'll go back into this view. So, let's restart our dev server and visit localhost 3000. Click sign in with Google. It will redirect to Google for authentication. Um, provider not found. Make sure to add the provider in your config.
Now, one thing we can do, you can copy paste things from the terminal here. So, from the server side output and kind of paste back in here. So, I'll just say fix this. Maybe something with the better O config. Secrets are better secrets. Yeah, I mean I could share it. Then I have to go and like rotate the database. Grant, this is like a a brand new database, so it's really not that big of a deal. [laughter] Oh, that's why it's called Secret Santa. Yes. Yes. Yes. Indeed.
[laughter] Uh Noah, do you want to do some of the questions? What do you think? Oh, I can see the questions here. Here we go. some good questions for from the chat. Happy to call out a few, but you may be able to see them yourself. >> I can see it now. This is my my Zoom skills. Uh they're getting better. Um okay, let's see. Is there a way to project the context token a command is going to use? Uh so, as we've been kind of building here, as you've been seeing
me make changes, uh you see this little context gauge. This context gauge is going to tell you the exact percentage of the context window that you've used and the active rules that are applied in your application. So we have about uh 32.9% context used in this window. And you generally want to try to keep that as minimal as possible and kind of have this high quality amount of context. Um, in terms of tokens, there's also a usage summary that you can turn on if you want to see the percentage of usage for your
plan that you've used in a given kind of billing period. Uh, what's the best shape the best way to shape agent behavior? Is it agents.md cursor rules or something else? Um, all of these abstractions are just ways to get context to the agent. So when I'm typing something into this prompt, it's part of the user message that's sent to the agent and user rules. So all of the rules that are attached here are just ways to always include sentences or additional information in the prompt that goes into every single agent
conversation. You can do that through agents.md through cursor rules. It's the same thing in terms of getting that information to the agent. Uh the usage summary is enabled by default uh and it shows up when you're getting close to your limits. If you want it to show always, you can go to cursor uh settings and then it's under usage summary right here.
Uh other questions, what's the future of cursor rules? Uh kind of same question that I just answered. Um, can we get clarity on rules versus agents? Yeah, very very similar answer. Hopefully that uh answers your question. >> Uh, Lee, there's a question from Naveen in the chat. Does the cursor browser exactly work as an actual Chrome or Edge browser >> in terms of loading all elements in the page, navigation, etc.
>> Yes. Yes, it does uh work exactly like a Chrome browser. And just >> uh if we want, we can do this instead. So, we can do a Chrome browser out here. And I could close this and let's go to this and go to localhost 3000. And it's the same thing. So you can use it and you can have it connect to a Chrome instance there or in the integrated browser. Either either one is fine. Um yeah, hopefully that answers your question.
Um other questions we have any insight into how auto decides what model to use? So I have been showing picking specific models. You can also use auto. Auto is a router between different Frontier models. So this isn't when you pick the specific model, but this is going to allow you to have uh pretty competitive pricing um because basically cursor is picking the model behind the scenes for you to use. And we can then do it based on our inference capacity. Uh if you
want a specific model, which is helpful for demos and what I've been showing here, uh you can just pick your model directly from the drop down. Hopefully that answers your question. Okay, let's see if we can figure out this error before we finish what we're doing. So, there is it looks like a little bug here with the better off setup. And this is actually uh a good example of when you use newer libraries, models just sometimes really are not as good with getting their um signatures right. And
regardless of whatever model you use, it's helpful to provide code snippets or examples of the proper way of doing this. So it's saying that this Google social providers is not the way. So what I actually want to do here is we're going to go back to readme. I'm going to take this and I'm going to go back to the browser and I just want to double check the way that they recommended to do it. Um, which this seems fine. drizzle adapter.
Oh, I might need to uh explicitly check Postgress like this. Let's see if there's a uh Google. So, it's saying the way to do it is this. And usually all these docs now have copy markdown. You can kind of copy the page. So instead of kind of keeping this on the chat, one thing I might do here is I'm going to make a new chat. I have a fresh context window and we're going to say uh my better off integration is not yet working. Here are the docs. And a pro tip, but I like to just wrap
things in back ticks. uh some way of delineating that you're kind of sending to the agent like this is the context I'm providing. You can also use XML. It doesn't really matter exactly how you do it, but I I think that that's helpful. And then you can also say, you know, here's some of the information from the logs and you can tag it in as a pill and we'll see what it does. Import their docs and references. Yeah, exactly. Uh can the cursor browser access a backend
API used in the network tab? Yes. So you can ask the uh the browser to look at network logs or look at console logs. And it looks like after reviewing the docs uh there was a change to the provider syntax. Um that seems fine. And let's try this. Maybe this will work now.
Um okay. So this correctly redirected us to Google. Uh, I'll log in with my personal email. Great. And I think that worked. Let's see. We got some Why can't I click? There we go. Uh, yeah, that seems okay. Uh, one other way we can check for this, um, is Drizzle, which I'm actually not sure if I know we're getting close to time, but this will, uh, this will complete the the trilogy here. So, I'm going to say, uh, let's open Drizzle Studio to look at my database. Drizzle has this nice thing
where you can basically inspect the contents of your database and make sure that things work. I don't remember the exact command for it. So, uh, we're going to use this and let's see if this works. Drizzle Studio is running. Did that work? Um, maybe, maybe not. Let's try this again. Address already in use.
Maybe didn't work. Drizzle Studio, why are you not working out for me? Oh, this is a fun one, too. Uh sometimes if you get this port already in use error, uh one fun thing you can do is you can command K inside of here and just say uh kill port 4 983 because honestly nobody remembers what this command is. Nobody ever remembers what this command is. So we're going to try this again. Okay.
Maybe it was because it was localhost versus uh you know local.drizzle.studio. Let's try this. Okay, we did it. So, we have an account uh that was authenticated. It's in our database. We have a session. We have a user. So, authentication set up. We can log in with Google. We can save it to a Postgress database. Uh we have a lot of the plumbing in place. This is a great place to pause and stop. And we should do part two another time. Um because there's so much more to build here. We've got the foundation, but we're kind
of just getting started on building our billion-dollar SAS for Santa gifting games. So, uh, yeah, I can answer a few more questions before we wrap up here. Uh, if anybody has anything extra they want to ask, but um, yeah, you always learn things when don't work. 100%. Debugging is definitely the most interesting part of AI demos, I think, because something always goes wrong, and that's how you become a better engineer is by learning how to kind of figure out
what to do when things go wrong. [laughter] Amazing. Okay, well, we'll wrap up here. Uh, thank you uh to everybody for tuning in and hanging out here. [clears throat] This was really fun and uh we should do it again sometime.