Building a Full App with New VS Code AI Features: Agent Mode, MCP Servers, and More

In this article, 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 article. Are you ready? Let's do it now.

Agent Mode: A Big Deal

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 drop-down and it has three options in it: Ask, Edit, and Agent.

Now, if your dropdown only has two options in it, that's because this feature is being slowly rolled out to everyone. So some folks have it and some don't. But because you read this article, I'm going to show you how to turn it on.

What you need to do is go to user settings. 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.

Chat Modes: Ask, Edit, and Agent

All right, cool. So now what? Well, let's take a look at the different ways that you can use chat: Ask, Edit, and Agent.

This is an Astro JS project, and what I want to do is just say:

install Tailwind CSS in this project

That's a pretty simple prompt here.

Ask Mode 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.

Edit Mode 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.

Agent Mode 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.

The Importance of Context

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 cut-off 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 cut-off 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 the 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 for 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, 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.

Verifying the Changes

So let's go ahead and check what we've got. Now notice here that I haven't actually saved anything. 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 since 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 check the application. OK, 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 Tailwind CSS here. So it may be working, but it isn't implemented. So let's go back and ask it to:

please modify the welcome component to use Tailwind

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.

OK, 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 inspect the elements, we'll see it should actually now be using Tailwind CSS. And it is, we can see all of the Tailwind CSS classes in here: h-full, flex, justify-center, that's all Tailwind. Perfect.

So, we're ready to start building this application. Let's go ahead and keep these changes.

Building the Application: Requirements and Instructions

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 with something called a PRD or project requirements document, which I just so happened to have here.

In our project requirements document, we have a simple table of what the user would like to do and then what the software should do to facilitate that. In our case, we're going to be building an application called TheUrlist 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? So the minimum amount of functionality to be considered a viable application.

The other thing that I have here is I've included some custom instructions 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. I generated this 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.

Connecting to the Database with MCP Servers

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 Postgres database and it's not complicated. It has 2 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 within 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 Postgres 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 Postgres MCP server. There's a great site, mcp.so, which has a PostgreSQL server. 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 Python package.

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. 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. 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. 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?

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. It actually comes up with the query on its own and it comes back and says, here's your schema. You got 2 tables, links and lists. And it knows all about them, right? Knows what the primary keys are, knows what the relations are.

Building the App with Agent Mode

OK, 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.

OK, the agent's done. That took about 30 minutes. 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 clients here, we need to import this a different way. We just need to import Postgres like this:

import postgres from 'postgres';

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 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 available today for everyone.

The Final Application

All right, enough talking. Ready to see what this thing has 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 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 my website, burkeholland.github.io. So let's go ahead and add that. And look, 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. Let's add one more here. What about Battle.net?

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.

Bring Your Own Key

So there's one more thing. 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.5 Pro. 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 Suggestions. 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. What will you build? Happy Coding!