Tutorial: Agentic coding in VS Code

In this tutorial, you learn how to build with AI agents in Visual Studio Code. Agents can plan a solution, create and edit multiple files, run commands, and fix their own errors, all from a single natural-language prompt. You describe what you want, and the agent does the work.

You start in the Agents window, a dedicated surface for an agent-first workflow. Then you switch to the Chat view, where an agent assists you while you work in the editor. Along the way, you pick up the VS Code basics you need, like opening a workspace, using the integrated browser, and committing your changes with source control.

You build a simple personal portfolio page with HTML, CSS, and JavaScript. The page is fully static, so you don't need to install any runtimes or build tools to follow along.

Prerequisites

• Download and install Visual Studio Code

• Enable AI features in VS Code

• Install Git

Create a project folder

Agents work in the context of a folder, also known as a workspace. You start by creating a folder for your project. You don't need to open the folder in VS Code yet. In the next step, you open it in the Agents window, which lets you work across multiple workspaces without opening a separate window for each one.

1. On your computer, create a new folder named myportfolio.

2. Put the folder under Git version control to track changes. Open a terminal and run the following commands:

   cd myportfolio
   git init
   

   Tip

   You can also initialize a repository from the Source Control view in VS Code.

Build features with the Agents window

The Agents window (preview) is a dedicated window in VS Code that is optimized for working with agents across all your projects without needing to open a separate VS Code window for each one.

In this part, you open your folder in the Agents window and task an agent to build your portfolio page.

Open the Agents window

1. In VS Code, select the Open in Agents button in the VS Code title bar.

   You can also open the Agents window from the VS Code welcome page, or run the Chat: Open Agents window command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

   

2. If you're prompted to sign in, select a sign-in method and continue.

   The Agents window needs access to your GitHub Copilot subscription to run agent sessions. If you're already signed in to GitHub in VS Code, you're signed in here too.

Start an agent session

1. Select New at the top of the left sidebar to start a new session.

   

   The sidebar shows your list of active agent sessions, grouped by workspace. You can use the sessions list to switch between sessions. In the bottom left, you can configure customizations to modify the agent's behavior to match your coding practices.

2. Select Folder, and then select the myportfolio folder on your machine. This folder becomes the primary execution workspace for the session.

   

   If you're prompted to trust the folder, select Yes, I trust the authors.

   Important

   Workspace Trust lets you decide whether code in your project folder can be executed. When you download code from the internet, you should first review it to make sure it's safe to run. Get more info about Workspace Trust.

3. Select the Copilot agent harness to run your agent session locally on your machine using the GitHub Copilot SDK.

   VS Code supports multiple agent harnesses, such as Claude and Codex. The harness coordinates the model, tools, and session in the selected execution environment.

4. Review the other session configuration options:

   • Agent: the generic agent role for performing the task. For specialized tasks, you can create a custom agent, such as a code review or testing agent.
   • Language model: depending on your setup, you can choose from multiple language models and configure additional settings.
   • Manual permissions: the permission level that uses the configured approval rules for tools, terminal commands, and more. VS Code prompts you when an action requires approval.

5. Enter the following prompt in the chat input and press Enter:

   Create a personal portfolio page with HTML, CSS, and JavaScript in separate files. Include a header with my name and a short bio, a section for projects with cards, and a contact section. Use modern styling and add some sample content.
   

6. The agent analyzes your request, plans the work, and then starts creating and editing files. If it encounters errors, it self-corrects or asks for clarification and approval.

   

Preview and iterate on the design

The Agents window is great for workflows where you hand off tasks to the agent and then validate the outcome, rather than the specific code changes. With the integrated browser, you can preview the agent's work without having to leave VS Code.

To preview the generated portfolio in the integrated browser:

1. Select the Files tab in the left sidebar, right-click the index.html file and select Open in Integrated Browser.

   The Files tab shows all files in the workspace, similar to the Explorer view in the editor.