[ Web Proxy ]
URL:
Viewing: https://code.visualstudio.com/docs/agents/quickstart [Back]  [Original]

Quickstart: Complete your first task with an agent

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 6 sections

Related

Quickstart: Complete your first task with an agent

In this quickstart, you use an AI agent in Visual Studio Code to build a small web app from a natural-language prompt. You can work in the Agents window for an agent-first experience or use the Chat view alongside your code. You then review the generated code and use browser tools to let the agent validate the app.

Prerequisites

Create a project folder

On your computer, create an empty folder named agent-quickstart. The agent creates all the files for the app in this folder.

Build the app

Choose where you want to work with the agent. Both options create the same app and give you access to the same session.

Agents windowChat view

The Agents window (Preview) is a dedicated window for assigning tasks and monitoring agents across your projects.

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

    You can also run Chat: Open Agents Window from the Command Palette (P (Windows, Linux Ctrl+Shift+P)).

  2. Select New at the top of the sidebar.

  3. From the workspace dropdown, select the agent-quickstart folder.

    If VS Code asks whether you trust the folder, select Yes, I trust the authors.

  4. Select the Copilot agent harness and the Agent role. Keep Default Approvals selected so that VS Code asks before the agent runs actions that require approval.

  5. Enter the following prompt and press Enter:

    Create a task list web app in a single index.html file with embedded CSS and JavaScript. Let me add, complete, and delete tasks. Save the tasks in local storage so they persist after a page reload. Use no external libraries.
    
  6. Follow the agent's progress and review any approval requests before you accept them.

The agent creates index.html and reports when the task is complete.

Review and validate the result

AI-generated code can contain mistakes. Review the code, ask the agent to validate the app in the integrated browser, and manually confirm the result before you keep it.

Agents windowChat view
  1. Open the Changes panel and select index.html to review the generated code.

  2. Select Customizations > Tools and verify that Integrated Browser is selected.

  3. Enter the following prompt:

    Open index.html in the integrated browser and validate the app.
    Add a task, mark it complete, and delete it. Then add another task,
    reload the page, and verify that the task persists. If any step fails,
    fix the issue and repeat the complete flow.
    
  4. Review the agent's tool calls, code changes, and verification report.

  5. Open index.html from the Explorer, and then select Open in Integrated Browser in the editor title bar. Manually try the task flow to confirm the result.

You have completed your first task with an agent. The agent interpreted your goal, created the code, exercised the app in the browser, and fixed any issues it found. You stayed in control through approvals, code review, and final validation.

Continue in the other surface

The Agents window and Chat view share the same agent sessions, so you can switch between them without losing the conversation.

  • From the Agents window, select Open in Editor in the title bar. VS Code opens the project in an editor window with the session available in the Chat view.

  • From the Chat view, select Open in Agents in the title bar. The Agents window opens with the same session selected.

Next steps


Web Proxy Viewer  |  New URL  |  Original Page