VS Code Agent Mode Just Changed Everything

in this video I'm going to show you all of the new AI features that just dropped for Visual Studio Code we've got agent mode we've got a new completions model we've got MCP servers what is that bring your own key all of that and more and we're going to see if we can build a complete application by the end of this video are you ready let's do it now first let's talk about agent mode because it's a big deal so how do you get the new agent mode in Visual Studio Code well if you come down to your chat sidebar you'll see a dropdown and it has three options in it ask edit and agent now if your dropdown only has two options in it that's because we're sort of slowly rolling this out to everyone so some folks have it and some don't but because you watched this video I'm going to show you how to turn it on so what you need to do is go to user settings and in your user settings you can just search for agent and there's a little check box here and yours is probably not checked if you don't see that so just come in and check it and boom you've got agent mode all right cool so now what well let's take a look at the different ways that you can use chat and ask edit an agent so this is an AstroJS project and what I want to do is just say install Tailwind CSS in this project that's a pretty simple prompt here now in ask mode what this is going to do is it's going to go out it's going to get an answer and it's going to return it this is the standard chat interaction that you're used to it's just an answer here in your sidebar it's great in edit mode let's switch over there if we run the exact same prompt in this case we'll get the exact same answer the difference is that in edit mode we've given VS Code permission to create and modify files which is what it's doing right now so you can see it's created all these files for us that it thinks that we need to successfully install Tailwind now if we switch to agent mode it gets even more interesting so in agent mode if I ask the agent the same thing the agent is going to act a little bit more like you would if you were given this task it's going to run through and do the steps that need to be done in order to take care of this including installing dependencies so you can see here it wants to run a command in the terminal it's waiting for me to press continue so that it can do that now I'm not going to do that and that's because there's something that all three of these modes have in common and that is that this is the wrong answer and that's actually kind of expected and here's why the training cutoff date for Claude 35 which we're using is April 2024 and the docs for installing Tailwind in Astro have a date down here of 2025 so they may have changed since then and this is a problem for LLMs technology moves very quickly and they have training cutoff dates and so it's really important in your prompts that you provide these models with the context that they need to be successful just like you would do as a developer which is read the docs so how do we get the agent to read the docs well first we're going to grab this URL and then let's head back to agent mode so let's try the prompt again but this time I'm going to use this fetch tool so you have these tools that you can use by pressing the pound key here and then you can just use the different tools that are in this menu so I'm going to use fetch and then I'm going to paste in the URL and then I'm going to say follow the instructions exactly and this last part is important because models sometimes will take context that you give them and they'll merge that with their own ideas and give you an answer in this case we literally just wanted to follow the docs so it's going to ask us we have permission to read this web page will give it that permission in agent mode we want to be careful with security that we not have it go out and do things like execute a terminal command without your explicit permission so here's the command it wants to execute is this correct let's just double check with the docs and it is and you can see that it was smart enough to skip over the first step which is creating the project because we already have a project all right so let's continue on here and see what it wants to do next if it's following the documentation the next thing that it should want to do is modify our astro. config. mjs file so let's see if it is doing that all right it has modified the file and it looks to me like that's exactly what's here and it should be now creating a global CSS file which it has done and then it wants to add that to our index.

astro page which is exactly what the docs tell us to do perfect so then it wants to start the dev server so you can see the agent is doing everything it's starting the dev server it's installing dependencies it's reading the project it's acting just like an autonomous developer would if it was given this same task so let's go ahead and click on this and see what we've got now notice here that I haven't actually saved anything uh these changes are autosaved you can also do file save all if you want to here and when you do that it saves the changes but it doesn't actually keep the changes and this is a great way to test something out without committing to those changes because if we click undo all of this will be rolled back so let's click on this URL and see what we get here okay and our application's running but how do we know if Tailwind is actually working here well one of the things we can do is look at the CSS classes which I don't actually see any C any Tailwind CSS here so it it may be working but it isn't implemented so let's go back and ask it to do that just say please modify the welcome component to use Tailwind okay and the welcome component is what we see here this is sort of the default Astro page that you see for a template and we're asking it to modify this component to use the Tailwind CSS classes so that we can ensure that Tailwind is actually working here and you can see that it's even checking its own errors to make sure that it didn't introduce any errors that would break the application again it acts exactly like maybe you would as a developer okay so let's go ahead and jump back out and see what our application looks like and it looks pretty much the same but this time if we come over here we'll see it should actually now be using Tailwind CSS so let's go ahead and inspect some of this stuff and it is we can see all of the Tailwind CSS classes in here h full flex justify center that's all tailwind and CSS perfect so we're ready to start building this application let's go ahead and keep these changes now before we start building our application we need to be able to tell the agent exactly what it is that we want to build how do we do that well one of the ways that you can do that is something called a PRD or project requirements document which I just so happen to have here so in our project requirements document here we have a simple table of what the user would like to do and then what the software should do to facilitate that so in our case we're going to be building an application called the URL list that allows users to track lists of links they can group links together and share them with one link and these are the different steps that are needed for an MVP or a minimum viable product here right the minimum amount of functionality to be considered a viable application i will include this in the description for the video and you can copy my PRD here and you can use AI tell it what you want and have it generate one for you now the other thing that I have here is I've included some custom instructions here in this copilot instructions. md file which defines some best practices it talks about the name of the application what it is the technologies that are used and then some of the best practices for those technologies now where did I get this i generated it with AI and you can too just go out to any of these AIs and ask them for best practices for the application stack that you're building and it's very capable of generating it and then you can just go tweak it to your liking all right so there's actually one more thing that we need to do before we can have copilot try to build this on its own and that is we need to tell Copilot about our database how are we going to do that well the database that we have is a Postgress database and it's not complicated it has two tables in it links and lists but the only way for us to really tell Copilot about the database is to either write some sort of extension for Copilot that talks to the database which I'm not sure how to do or we could manually extract all the information with the database and just give it to Copilot but this is where MCP servers come in mcp stands for model context protocol and it solves this exact problem how do we get VS code to talk to the database mcp servers are these little programs that you download and they run on your machine and these programs know how to talk to different things like a Postgress database and VS code knows how to talk to all of these programs via the model context protocol so how do you use these things where do you find them well at this point it's basically the wild west out there so you can Google or search for a Postgress MCP server and here's one mcp. so it's a great site and here's a Postgress SQL server so to install this thing it has to run locally remember and usually these things are offered in a variety of formats you may get it as a Docker container as an npm package or as a a Python package and so I'm going to use the npm package because we're using node so I'm just going to grab the package name here and then back in Visual Studio Code let's go ahead and open our command pallet and choose MCP add server and you can see here we want to select npm as the package type paste the package name in and we need to allow it to run because it's going to run locally on our machine and then we need our connection string so let's go ahead and grab that from our env file here so we'll just grab this connection string paste that in and then it's going to ask us what we want to name it and where do we want to put it do we want to put it in user settings or workspace settings in user settings it's available to every project that I'll ever work with which is what I want in workspace settings it will only be available to this project so I'm going to choose user settings here and you can see here's our MCP server so I'm going to go ahead and click start to start this thing up and now it's running so the way that this works is you'll see now in our tools menu there's this query tool provided by this MCP server and we can actually test this out and say what is the schema of my database and we're going to use this query tool so let's go ahead and pass this in and you'll see that it runs the query so it actually comes up with the query on its own and it comes back and says "Here's your schema you got two tables links and lists and it knows all about them right knows what the primary keys are knows what the relations are.

" Okay now that we have all of the context Copilot should be able to build this thing in agent mode are you ready to find out if that's the case let's see if agent mode in VS Code can build an application when given a product requirements document a PRD so let's drag it in and then just ask for it please build the application defined in this product requirements document thank you good luck now it's going to take some time for the agent to do this and I'm going to speed this up but I'm going to leave the camera on so that you can watch the whole thing here we go heat heat n [Music] okay the agent's done that took about 30 minutes now at about the 20 minute mark I stepped away to get some lunch and when I came back 10 minutes later it was very quick the screen had gone dark on my computer so the 10 last 10 minutes is not there but you get the idea so before we actually see what it's built here I can already see that there's one issue here that we're going to have where in our client here we need to import this a different way so we just need to import Postgress like this now when I do this you'll see this little green box pop up this is our new next edit suggestion where it sees oh you've changed this here you're going to need to update update this down here as well so you can just tab or click and boom it updates for you anticipating what you need based on the change above it that's next edit suggestion also on today for everyone all right enough talking ready to see what this thing is built let's do it here it is this is our new application let's see if it actually works all right so let's just do um what is this call this my favorite links all right let's go ahead and create the list all right here it is let's add some links here so let's add uh let's see we got to add what we got to add my website right so that's uh burkholland. github. io so let's go ahead and add that uh let's see let's Oh look and it does and it pulls in the metadata from the page that's very cool it did all this on its own let's add Google that's a cool site uh let's add one more here uh I don't know um let's see here what about Battleet uh if you know what Battlelet is hello fellow Overwatch players all right now we can take this and we can actually reorder these things with drag and drop and again it just did all this for us and if I click refresh you can see the database is working because it's persisted absolutely incredible what you can build with agent mode this looks way better than anything that I could build on my own so there's one more thing and I promised I've saved the best for last check this out if you come down to your models and you click manage models you can now bring your own key to use with VS Code so we could use Olama with a local model or let's say we want to use Gemini i'm going to paste my key in here and look I've now got access to Gemini 2.

0 2.