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.
-
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)).
-
Select New at the top of the sidebar.
-
From the workspace dropdown, select the
agent-quickstartfolder.If VS Code asks whether you trust the folder, select Yes, I trust the authors.
-
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.
-
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. -
Follow the agent's progress and review any approval requests before you accept them.
The Chat view keeps the agent beside your editor, which is useful when you want to inspect and work with the generated code.
-
In VS Code, select File > Open Folder, and then open the
agent-quickstartfolder.If VS Code asks whether you trust the folder, select Yes, I trust the authors.
-
Open the Chat view with ⌃⌘I (Windows, Linux Ctrl+Alt+I), and then select New Chat (
+). -
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.
-
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. -
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.
-
Open the Changes panel and select
index.htmlto review the generated code. -
In the Files panel, right-click
index.html, and then select Open in Integrated Browser. -
Add a task, mark it as completed, and delete it.
-
Add another task and reload the page. Verify that the task is still present.
-
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.
-
Select
index.htmlin the agent response to review the generated code and its diff. -
Open
index.htmlfrom the Explorer, and then select Open in Integrated Browser in the editor title bar. -
Add a task, mark it as completed, and delete it.
-
Add another task and reload the page. Verify that the task is still present.
-
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.