← 返回首页
Tutorial: Work with agents in VS Code
Visual Studio Code
Download

📼 Rewatch VS Code Live at MS Build 2026

All Docs

Agents

Topics Overview Tutorial Agents Window Chat View Remote Agent Sessions Sessions     Session Insights     Sync Sessions Agent Types     Local Agents     Copilot CLI     Cloud Agents     Third-Party Agents Approvals & Permissions Planning Memory Subagents Best Practices Security Overview Instructions Agent Skills Custom Agents Language Models MCP Hooks Plugins Prompt Files Overview Chat Sessions Add Context Tools Inline Chat Review Edits Checkpoints Artifacts Panel Overview Language Models Context Tools Agents Customization Trust & Safety Prompt Examples Context Engineering Optimize AI Credit Usage Customize AI Test-Driven Development Edit Notebooks with AI Test with AI Test Web Apps with Browser Tools Debug with AI MCP Dev Guide OpenTelemetry Monitoring Debug Chat Interactions Diagnose Prompt Caching Troubleshooting FAQ Cheat Sheet Settings Reference MCP Configuration Hooks Reference Workspace Context
Copy as Markdown

On this page there are 5 sections

Try this

Tutorial: Work with agents in VS Code

This tutorial walks you through using different types of agents in Visual Studio Code. You build a todo app from scratch, add a theme toggle, and redesign the layout by delegating work across local, plan, background, and cloud agents.

Tip

If you don't yet have a Copilot subscription, 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.

Prerequisites

To complete this tutorial, you need:

Step 1: Use a local agent to scaffold an app

In this step, you use a local agent to create the initial todo app structure. Local agents are ideal for interactive tasks where you want immediate feedback and results, such as scaffolding a new project or iterating on a new feature.

  1. Create a new project folder and ensure it's under Git version control.

    Create a simple todo app with HTML, CSS, and JavaScript. Include an input field to add todos, a list to display them, and a delete button for each item.

  2. Review as the agent generates the different files for the app. Use Keep or Undo to accept or reject changes as needed.

  3. Open the index.html file and select the Preview button to see the app in the integrated browser.

  4. Send additional prompts to enhance the app further. Notice that the preview updates live as you make changes.

    For example, you can ask:

    Create a plan to add a dark/light theme toggle to the app. The toggle should switch between themes and persist the user's preference.

  5. The plan agent might ask clarifying questions to refine the plan. Respond as needed.

  6. When you're ready, select Start Implementation > Continue in Copilot CLI to hand off the plan to Copilot CLI.

  7. Copilot CLI creates a Git worktree where it starts implementing the feature. When asked, select Copy Changes to make sure all current changes are available to Copilot CLI.

  8. You can track the Copilot CLI session in the Sessions view. Select the session to see details about its progress.

    Tip

    While Copilot CLI works in the background, you can continue editing your main workspace without conflicts.

  9. Once the agent finishes, select any of the changed files to review its changes, or select View All Changes to open a multi-file diff editor with all the changes.

    Tip

    You can send follow-up prompts to Copilot CLI to make adjustments or improvements to the feature.

  10. In the Chat view, select Apply to apply the changes to your main workspace.

You've successfully used Copilot CLI to perform a task autonomously in the background. You can start multiple Copilot CLI sessions for different tasks without interrupting your main workflow.

Step 3: Use a cloud agent to collaborate on a feature

In this step, you use a cloud agent (Copilot cloud agent) to redesign the app layout and use pull requests and collaboration features in GitHub. Copilot cloud agent runs on remote infrastructure and are ideal for tasks that don't require immediate feedback, don't need to run locally, or involve collaboration through GitHub.

  1. First, publish the project to a GitHub repository and add it as a remote to use Copilot cloud agent on your project.

    1. Run the Publish to GitHub command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) and follow the prompts to create a new repository.

    2. Run the Git: Add Remote command from the Command Palette and follow the prompts to add your GitHub repository as a remote.

  2. In the Chat view, select New Chat (+) > New Chat.

  3. Select Cloud from the session type dropdown to switch to a cloud agent and enter the following prompt: