Thanks to visit codestin.com
Credit goes to code.visualstudio.com

Quickstart: Complete your first task with an agent

In this quickstart, you use the Chat view and an AI agent in Visual Studio Code to build a small web app from a natural-language prompt. You then review the generated code, let the agent validate the app with browser tools, and verify the result yourself. You can follow the same exercise in the Agents window (Preview) if you prefer an agent-first interface.

Prerequisites

Note

Requests in this quickstart use AI credits from your Copilot plan. Copilot Free includes a monthly allowance. Open the Copilot status dashboard from the Status Bar to monitor your monthly usage. Learn more about AI credits and model costs and what happens when you reach a limit.

Create a project folder

You will create a project folder for the quickstart app on your computer. You will open this folder in VS Code to work with the agent.

Run the following command in your terminal to create the folder:

mkdir agent-quickstart
Important

Use the empty folder you created for this quickstart. Before you run an agent against an existing codebase, review the recommended security baseline.

Build the app

Start in the Chat view to keep the agent beside your code. You can choose the Agents window tab to complete the same task in a dedicated agent-first interface.

Important

The agent saves edits directly in the folder you select. Manual permissions asks about actions that aren't covered by your approval settings, but it doesn't require confirmation for every file edit. Use the empty quickstart folder, review the diff before you rely on the result, and learn how to require approval for sensitive files before you use an agent on an existing project.

The Chat view lets you work with agents alongside your editor within a specific project. This approach is useful for coding tasks where agents assist you in real-time while you develop your code.

  1. In VS Code, select File > Open Folder from the menu, and then open the agent-quickstart folder.

    If VS Code asks whether you trust the folder, select Manage from the notification, and then select Trust.

    Screenshot of trusting the folder in VS Code.

  2. Open the Chat view with ⌃⌘I (Windows, Linux Ctrl+Alt+I), and then select New Chat (+).

    Screenshot of opening a new chat in the Copilot Chat view.

  3. Select the Copilot session target and the Agent role. Keep Manual permissions selected and use Auto for the language model if it is available. You don't need to configure other options for this task.

    Screenshot of selecting the Copilot agent harness and the Agent role with Manual permissions.

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

  5. Follow the agent's progress and review each approval request before you accept it.

    The agent creates the index.html file and saves updates as it progresses. Approval prompts appear for actions that aren't covered by your approval settings.

Review and validate the result

It's important to review the generated code and outcome carefully. You can let the agent validate key scenarios and edge cases for you by running the app in the integrated browser and observing its behavior.

Notice that the agent might have launched the integrated browser to validate that the app runs correctly as part of creating the task list web app in the previous steps.

In the following steps you'll ask the agent to validate the basic functionality of the task list web app.

  1. Select index.html in the agent response to review the generated code and its diff.

  2. Now, enter the following prompt to have the agent open the app in the integrated browser and validate its functionality.

    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.

  3. Notice how the agent interacts with the integrated browser and validates the user scenarios.

    Screenshot of the integrated browser validating the app.

Verify the result yourself

The agent's validation report helps you find problems, but it doesn't replace your own review. In the integrated browser:

  1. Add a task and mark it complete.
  2. Reload the page and confirm that the task and its completed state persist.
  3. Delete the task and confirm that it doesn't return after another reload.

If a check fails, describe what you observed in chat and ask the agent to fix and retest it. Review the resulting diff before you commit the changes.

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 issues it found. You reviewed both the code and the result.

Stop, revise, or undo the work

  • Stop or redirect the current request: while a request is running, use the Send dropdown to choose Steer with Message or Stop and Send. Stopping doesn't undo actions that already completed.
  • Revise the result: send a follow-up prompt. In a diff, you can select code and provide focused feedback when the interface offers that action.
  • Undo file changes from a request: hover over an earlier request and select Restore Checkpoint. This restores affected workspace files and chat history. It doesn't reverse terminal commands, network requests, deployments, or changes to external services. Learn more about reviewing and reverting agent changes.

If a follow-up doesn't resolve the problem, use Get an agent back on track to choose your next recovery action.

If your screen looks different

Optional: 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.

Clean up resources

When you no longer need the app, run these steps to clean up your local resources:

  • Close the agent-quickstart folder in VS Code.
  • Delete the agent-quickstart folder from your computer.

Next steps

9/9/2026