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 on your computer
• Set up GitHub Copilot in VS Code
• Install Git on your computer

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 empty folder named myportfolio.

2. Put the folder under Git version control so you can track changes and choose how the agent applies its edits.

   Open a terminal in the myportfolio folder, and then run the following command:

   git init
   

   Tip

   You can also initialize a repository later from the Source Control view in VS Code. You use source control near the end of this tutorial to commit your changes.

Build with the Agents window

The Agents window is a dedicated window in VS Code, built for an agent-first workflow. It's optimized for orchestrating tasks across projects, so you can start agent sessions, watch them work, and switch between workspaces without opening a separate window for each one. This is different from the editor window and the Chat view, which are centered on coding within a single workspace.

In this part, you open your folder in the Agents window and build your portfolio page from a single prompt.

Open the Agents window

1. In VS Code, select the Open in Agents button in the 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. In the bottom left, you can access your agent customization to modify the agent's behavior to match your coding practices.

2. In the workspace dropdown, select the myportfolio folder on your machine.

   

   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 Copilot CLI as the agent for the session.

   Copilot CLI runs the agent on your local machine. VS Code installs and configures Copilot CLI for you, so there's nothing extra to set up.

4. Notice that the isolation is initialized to Folder to let the agent apply changes directly to your workspace.

   If you have an existing Git repo with commits, you can also choose to let the agent work in a separate Git worktree and merge the changes later.

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.
   

   The agent plans the work, creates the files, and self-corrects if something goes wrong. It might ask for approval before it runs a command. Review the request and approve it to continue.

   

Preview your page

When you work in an agent-first workflow, your focus might be first on the outcome of the task rather than the code. You can preview the result of your agent's work in the integrated browser without leaving VS Code or setting up a separate development server.

1. Preview the page in the integrated browser.

   In the Changes panel, select the Files tab to see a file explorer of your workspace. Right-click the index.html file and select Open in Integrated Browser.

   The integrated browser opens your portfolio page inside VS Code, so you don't need an external browser or a separate development server. Get more info about the integrated browser.

Iterate on the design

To iterate on the design, it's often easier to point at an element on the page instead of describing it in words. The integrated browser has a built-in tool that lets you select an element on the page and add it to your prompt as context for the agent.

1. In the integrated browser toolbar, select the Add Element to Chat button to enter selection mode.

2. Select an element on your page, for example the heading with your name or a button.

   The agent adds the selected element to your prompt as context, including its HTML and CSS.

3. Close the browser and enter a prompt that describes the change you want, and press Enter. For example:

   Make this heading larger and use a gradient color for the text.
   

   The agent updates the files to apply your change. Open the integrated browser to see the updated page.

Review and commit the changes

Before you commit the agent's work, review what changed. The Changes panel lists every file the agent created or modified, so you can confirm the result matches your intent.

1. In the Changes panel, select the Changes tab to see the list of files the agent added or modified.

2. Select a file to open the diff view and review the agent's edits. You can move between the different files with the navigation controls.

   The diff view shows the changes side by side and highlights the added and removed lines. In this case, there are only new files added.

1. Select Commit Changes in the Changes panel to save the agent's changes to your Git repository. The agent generates a commit message based on the changes.

Write code with agents in the editor

For some changes, you might prefer a code-first approach, where your focus is on writing code and agents help you in the process. For example, you might want to add a theme switcher and fine-tune the styles as you go. For this approach, you switch to the editor and use the Chat view.

Open the editor for your workspace

1. In the Agents window, select the Open in Editor button in the title bar to open the active workspace in the editor.

2. Notice that the left sidebar shows the Explorer view, which displays the files in your workspace. Select a file to open it in an Editor tab in the main area.

   You use the Explorer view to view and manage the files and folders in your workspace. You can open as many editors as you like and view them side by side.

3. The right sidebar shows the Chat view, which shows your session list and lets you start or continue a conversation.

Add a feature from the Chat view

1. Select New Chat (+) to start a new session.

2. Select Local from the Agent Target dropdown to run the agent in the context of the editor. It operates directly on your workspace files.

   The local agent runs in VS Code and has access to additional tools that integrate with the editor. For example, it can read linting and compiler errors from your files to fix problems, or launch the integrated browser directly to preview your page.

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

   Add a theme switcher button that toggles between a light and dark color theme for the page.
   

   The agent applies the changes to your files.

4. Review the changes directly in the editor.

   Open a changed file to see the agent's edits as inline diffs. Use the overlay controls to Keep or Undo individual edits.

5. Ask the agent to preview your page in the integrated browser to see the new feature in action. Enter the following prompt to preview the page:

   Preview the page in the integrated browser.
   

Next steps

Congratulations! You built a portfolio page with agents, working in both the Agents window and the Chat view. To go deeper with agentic coding in Visual Studio Code, get more info about how to:

• Explore different agent types and hand off tasks

• Learn more about the Agents window

• Learn more about the Chat view