[ Web Proxy ]
URL:
Viewing: https://code.visualstudio.com/docs/agents/agents-tutorial [Back]  [Original]
Tutorial: Agentic coding in VS Code
Visual Studio Code
Switch to the dark theme [Switch to the dark theme] Switch to the light theme [Switch to the light theme] Download

Rewatch VS Code Live at MS Build 2026

Documentation

Topics Overview Overview Agents Quickstart Editor Tutorial Intro Videos Overview Get started Agents Quickstart Agents Tutorial Best Practices Concepts Agents Agent Harnesses Language Models Context Tools Sessions & Handoff Agent Host Architecture Customization Workspace Context Trust & Safety Run agents Agents Window Chat View Choose an Agent Harness Use Tools Browser Tools Approvals & Permissions Review & Revert Changes Artifacts Remote Agent Sessions Plan Work Memory Subagents Sessions Manage Sessions Session History AI Security Customize agents Create and Manage Instructions Agent Skills Custom Agents Language Models MCP Hooks Plugins Tools Prompt Files Use chat Chat Basics Inline & Quick Chat Add Prompt Context Tutorials & guides Customize AI Context Engineering Test-Driven Development Test with AI Test Web Apps with Browser Tools Debug with AI Edit Notebooks with AI Optimize AI Credit Usage MCP Dev Guide Prompt Examples Reference Cheat Sheet Settings Reference MCP Configuration Hooks Reference OpenTelemetry Monitoring Troubleshooting Troubleshooting Debug Chat Interactions Diagnose Prompt Caching FAQ Editor Overview Quickstart Repositories & Remotes Staging & Committing Source Control History Branches & Worktrees Merge Conflicts Collaborate on GitHub Troubleshooting FAQ Get Started Terminal Basics Terminal Profiles Shell Integration Appearance Advanced Debugging Debug Configuration Tasks Testing Integrated Browser Port Forwarding Guides & Tutorials Test-Driven Development Test Web Apps with Browser Tools Overview Enterprise Policies AI Settings Extensions Telemetry Updates Overview VS Code for the Web SSH SSH Tutorial Tunnels Dev Containers WSL WSL Tutorial GitHub Codespaces VS Code Server Linux Prerequisites Tips and Tricks FAQ GitHub Copilot Setup Linux macOS Windows Raspberry Pi Network Portable Mode Additional Components Uninstall Languages & Runtimes Extension Docs
Copy as Markdown

On this page there are 5 sections

Related

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.

Learn VS Code editor features

Get familiar with the VS Code user interface, editing features, and key productivity tools.

Start the VS Code editing tutorial

Prerequisites

Tip

If you don't have a Copilot subscription yet, you can use Copilot for free by signing up for the Copilot Free plan and get a monthly allowance of inline suggestions and AI credits.

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:

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

    Screenshot of the agent generating the portfolio page files in the Agents window. [Screenshot of the agent generating the portfolio page files in the Agents window.]

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.

    Screenshot of the Files tab in the Agents window, showing the portfolio files and the Open in Integrated Browser option. [Screenshot of the Files tab in the Agents window, showing the portfolio files and the Open in Integrated Browser option.]

  2. The integrated browser opens in a new tab in the Agents window, and you can interact with the page as you would in a normal browser.

    Screenshot of the portfolio page open in the integrated browser in the Agents window. [Screenshot of the portfolio page open in the integrated browser in the Agents window.]

  3. Let's make a design change to the page. In the integrated browser, select the Add Element to Chat button to enter selection mode.

    Screenshot of the integrated browser toolbar, highlighting the Add Element to Chat button. [Screenshot of the integrated browser toolbar, highlighting the Add Element to Chat button.]

  4. Hover over the page and select an element you want to change, for example select the main title.

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

  5. In the chat input, enter a prompt that describes the change you want, and press Enter. For example:

    Add an accessible theme switcher button that toggles between light and dark color themes. Persist the selected theme across page reloads, update the button label to describe the theme it applies, and keep the layout responsive on narrow screens.

    Copilot applies and saves the changes directly to your project files.

  6. Open the Source Control view to review the files that Copilot changed. Select a file to inspect its diff.

    You can also select a changed file in the Chat view to open its diff.

  7. Select the index.html file and select the Open in Integrated Browser (globe) button in the title bar.

  8. In the integrated browser, validate the changes:

    • Select the theme switcher and verify that the page colors and button label change.
    • Resize the browser to a narrow width and verify that the content remains readable and the project cards adapt to the available space.
    • Use Tab to focus the theme switcher, and then use Enter or Space to toggle the theme.

  9. If a check fails, describe what you observed to Copilot in the Chat view. For example:

    Web Proxy Viewer  |  New URL  |  Original Page