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

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 test the result

AI-generated code can contain mistakes. Review and test the result before you keep it.

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

  2. In the Files panel, right-click index.html, and then select Open in Integrated Browser.

  3. Add a task, mark it as completed, and delete it.

  4. Add another task and reload the page. Verify that the task is still present.

  5. If something doesn't work, describe what happened in the chat input and ask the agent to fix it. Review and test the updated code.

You have completed your first task with an agent. The agent interpreted your goal, created the code, and responded to your feedback, while you stayed in control through approvals, code review, and testing.

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