I’ve recently been playing with Agent Mode in VS Code, which looks promising. If you’re using VS Code and want to give your development a turbo boost, you’ll want to hear about this.
What is VS Code Agent Mode?
Think of it as an autonomous AI pair programmer integrated directly into your VS Code editor, via GitHub Copilot. Unlike traditional code completion or simpler AI chat interactions, Agent Mode is designed for multi-step, complex coding tasks.
You give Agent Mode a high-level task in plain English (or other supported languages). For example, “Create a React component for a user login form” or “Refactor this Python module to use a more efficient algorithm and add error handling.”
Agent Mode then:
-
Analyzes your request and codebase: It determines the relevant files, context, and potential dependencies.
-
Plans the work: It breaks down the task into a series of steps, which might involve writing new code, modifying existing files, or even running terminal commands.
-
Invokes Tools: It uses a combination of built-in code editing capabilities and other “tools” (like file system operations, terminal command execution, or even interacting with external services via Model Context Protocol or MCP servers).
-
Applies Changes: It streams suggested code edits directly into your editor.
An agent will often ask for confirmation before running terminal commands or making significant changes. You can review all suggested edits, accept or discard them, and guide the agent with follow-up prompts.
Getting Started with Agent Mode
Before you can harness the power of Agent Mode, make sure you have the following:
- Latest VS Code: Make sure you have the newest version of
Visual Studio Code . You can download it from the official website for Windows, Mac, or Linux. - GitHub Copilot: Agent Mode is part of the
GitHub Copilot ecosystem. You’ll need access to Copilot. The good news is that GitHub has a free plan that gives you a monthly limit for completions and chat interactions. - Install Extensions: Open VS Code, go to the Extensions view (the icon usually looks like four squares, with one detached), and search for:
-
GitHub Copilot
-
GitHub Copilot Chat
-
-
Sign In: You’ll need to sign in with your GitHub account that has the Copilot subscription active.
-
Enable Agent Mode: Once the extensions are installed and you’re signed in, you should see a Copilot icon (often in the status bar or activity bar). At the bottom of the chat input field, there’s usually a small dropdown menu. By default, it has two options: “Ask” and “Edit.” Click on it, and you should see an option for “Agent.” Select that. If you don’t see “Agent” there, you might need to enable it in your VS Code settings. Go to File > Preferences > Settings (or Code > Settings > Settings on Mac), search for “agent,” and make sure the checkbox for Chat: Agent: Enabled is ticked.
Now you are ready to start work with your agent. :)
Building a To-Do App with Agent Mode
Click on the GitHub Copilot Icon at the top of the window, and you will see the AI chat on the right sidebar. In the chat section, select “Agent” from the menu and then write your first prompt.
create a simple to-do app using Python and Django framework
After that, follow the instructions that you will see in the chat window.
The first version of my app was very basic — literally just a title saying “To-Do List.” Not quite a functional app! :)
This is where the iterative nature of Agent Mode shines. I went back to the chat and gave it more specific instructions:
The web page contains only a header; there is no real application.
Please create a real to-do application with the following features:
1. Add Task: a form to add new tasks. 2. Mark Task as Completed. 3.
Delete Task.
Now, the Agent understood much better. It started creating the Django models, views, templates, and URL configurations. It showed me the files it was changing, and I could review them.
The app was functional, but it looked very plain.
So, my next prompt was:
Add Bootstrap styling to my application and make it pretty.
And just like that, it modified the HTML templates to include Bootstrap CSS, and the app started looking much nicer.
I kept going, asking it to add a dark/light theme toggle button and a login/logout system. Each time, I’d give it a prompt, it would work through the changes, and I’d review and continue.
Within about 10–15 minutes of back-and-forth, I had a pretty decent-looking to-do list application with basic functionality, styling, a theme toggle, and user authentication.
It’s a simple example, but I hope it shows how to start with the agent. There is much more to explore, and I could deep-dive in my future tutorial if I see the interest from my audience.
Tips
- Be Descriptive: The more detail you give in your prompts, the better the Agent can understand your intent and the fewer iterations you’ll need.
- Iterate: Don’t expect perfection on the first try for complex tasks. Be prepared to refine your prompts and guide the Agent.
- Review Changes: Especially when you’re starting, it’s a good idea to look at the proposed changes before accepting them. VS Code makes it easy to see the diffs. You can accept all changes, individual changes, or undo them.
- Use it for Debugging: As I found out, you can paste error messages, and the Agent can often help you find the cause and suggest fixes.
Video Tutorial: VS Code Agent Mode
I also created a video tutorial where I take you through all the steps.
Watch on YouTube:
Final Thoughts
VS Code Agent Mode is quite powerful tool. It’s not going to replace developers, but it can definitely act as a massive productivity booster, helping with boilerplate, generating initial structures, and even assisting with debugging. It feels like having a very knowledgeable developer by your side who can quickly scaffold out ideas.
If you’re already in the VS Code and GitHub Copilot ecosystem, I highly recommend you enable Agent Mode and give it a try.
Cheers! :)