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.

Prerequisites

To complete this tutorial, you need:

• Visual Studio Code installed on your computer
• A GitHub account (for cloud agent workflow)
• A GitHub Copilot subscription

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 open it in VS Code.

2. Open the Chat view (⌃⌘I (Windows, Linux Ctrl+Alt+I)) and select Agent from the Agents dropdown.

   Optionally, choose a specific language model if you have a preference.

3. Enter the following prompt in the chat input field to scaffold the todo app and select Send.

   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.
   

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

5. To preview the edits live as you develop, install the Live Preview extension if you don't have it already.

6. Open the generated HTML file and select Show Preview to preview and interact with the app directly in VS Code.

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

   For example, you can ask:

   Mark todos as completed with a strikethrough effect.
   

You now have a working todo app that you can extend with additional features. By using a local agent, you can interactively generate and refine your code in real-time.

Step 2: Use a background agent to implement a feature plan

In this step, you use the plan agent to create an implementation plan for a theme toggle and then hand off the implementation to a background agent. Background agents are ideal for delegating tasks that don't require immediate interaction. They use Git worktrees to isolate file changes from your main workspace and prevent conflicts.

1. First, ensure your project is under Git version control. Select Initialize Repository from the Source Control view and commit your current changes to have a clean state.

   Alternatively, run the following commands in the terminal:

   git init
   git add .
   git commit -m "Initial commit - scaffold todo app"
   

2. Run the Developer: Reload Window command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) to ensure all extensions are properly loaded.

3. In the Chat view, select New Chat (+) > New Chat to start a new local agent session. Notice that your previous chat session is preserved in the sessions list.

4. Select Plan from the Agents dropdown to switch to the plan agent and enter the following prompt:

   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. Review the proposed implementation plan and make any adjustments as needed.

6. When you're ready, select Start Implementation > Continue in Background to hand off the plan to a background agent.

   

7. The background agent creates a Git worktree where it starts implementing the feature. You can track the background agent in the Sessions view. Select the session to see details about its progress.

   Tip

   While the background agent works, you can continue editing your main workspace without conflicts.

8. Once the background agent finishes, review the changes from the session details. Alternatively, switch to the Source Control view to see the changes in the Git worktree.

9. When you're happy with the changes, in the Chat view, select Keep and then select Apply to apply the changes into your main workspace.

   

You've successfully used a background agent to perform a task autonomously in the background. You can start multiple background agents 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 coding agent) to redesign the app layout and use pull requests and collaboration features in GitHub. Copilot coding 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 coding 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 Cloud Agent and enter the following prompt:

   Redesign the todo app layout to improve user experience. Update colors, spacing, typography, and add animations to give it a modern look.
   

3. The cloud agent starts a new session to work on your request. It creates a branch and pull request in your GitHub repository.

4. You can track the cloud agent in the Sessions view in the Chat view, where you can see all ongoing agent sessions and their status.

   Tip

   If you have the GitHub Pull Requests extension installed, you can also track the pull request progress in the Copilot on my Behalf view in the GitHub Pull Requests view.

5. Once completed, the cloud agent assigns the pull request to you for review.

   

6. Right-click the cloud agent session in the Sessions view to view additional options, such as checking out the pull request locally or viewing it in GitHub.

7. You can use the standard GitHub code review workflow with your team to review, comment, and merge the pull request.

You've successfully used a cloud agent to collaborate on a feature using GitHub. Cloud agents enable you to use remote resources and collaborate seamlessly through GitHub.

Next steps

You've successfully used different types of agents to build, enhance, and redesign a todo app. Continue exploring agents:

• Learn about agent types and when to use them
• Explore creating custom agents