Transcription
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 checkbox 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, and 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 3.5, 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 if we have permission to read this web page. We'll 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 auto-saved. 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 PostgreSQL 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 PostgreSQL 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 PostgreSQL MCP server. And here's one, mcp.so. It's a great site. And here's a PostgreSQL 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 palette 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. [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 PostgreSQL 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 called? 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 Battle.net? Uh, if you know what Battle.net 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 Ollama 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.5 Pro rather. Let me click OK. And you'll see that it now shows up in the model picker. How cool is that?
So that's Agent mode in VS Code. That's MCP in VS Code. That's Next Edit suggestion. That's bring your own key. All of that is available today. You can use it today in Visual Studio Code. It's an incredible time to be a dev, especially with all of the AI capabilities that we have. And my question is, what will you build? Happy coding.