← 返回首页
Build and test web apps with browser agent tools
Visual Studio Code
Download

📼 Rewatch VS Code Live at MS Build 2026

All Docs

Agents

Topics Overview Tutorial Agents Window Chat View Remote Agent Sessions Sessions     Session Insights     Sync Sessions Agent Types     Local Agents     Copilot CLI     Cloud Agents     Third-Party Agents Approvals & Permissions Planning Memory Subagents Best Practices Security Overview Instructions Agent Skills Custom Agents Language Models MCP Hooks Plugins Prompt Files Overview Chat Sessions Add Context Tools Inline Chat Review Edits Checkpoints Artifacts Panel Overview Language Models Context Tools Agents Customization Trust & Safety Prompt Examples Context Engineering Optimize AI Credit Usage Customize AI Test-Driven Development Edit Notebooks with AI Test with AI Test Web Apps with Browser Tools Debug with AI MCP Dev Guide OpenTelemetry Monitoring Debug Chat Interactions Diagnose Prompt Caching Troubleshooting FAQ Cheat Sheet Settings Reference MCP Configuration Hooks Reference Workspace Context
Copy as Markdown

On this page there are 9 sections

Build and test web apps with browser agent tools

Browser agent tools enable AI to autonomously build and verify web applications in a closed development loop. The agent can create HTML, CSS, and JavaScript, open the app in the integrated browser, interact with it to validate functionality, identify issues through console errors and visual inspection, and fix problems without manual intervention.

This guide walks you through using browser agent tools to build a calculator app and watch as the agent discovers and fixes bugs through automated testing.

Prerequisites

To complete this guide, you need:

How browser agent tools work

When you enable browser agent tools, agents gain access to tools that let them read and interact with pages in the integrated browser. These tools include:

  • Page navigation: openBrowserPage, navigatePage
  • Page content and appearance: readPage, screenshotPage
  • User interaction: clickElement, hoverElement, dragElement, typeInPage, handleDialog
  • Custom browser automation: runPlaywrightCode

By default, pages opened by the agent run in private, in-memory sessions that don't share cookies or storage with your other browser tabs. This gives you control over what browsing data the agent can access.

Learn more about the integrated browser in VS Code.

Note

Administrators can disable browser tools or restrict which domains agent tools can reach with enterprise policies.

Step 1: Enable browser tools for the agent

Before an agent can use browser tools, you must explicitly enable them in the chat tools picker.

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

  2. Select the Tools button in the chat input area to open the tools picker.

  3. Verify that all the browser tools are enabled (they are grouped under Built-in > Browser).

The agent can now use these tools to interact with web pages.

Step 2: Ask the agent to build a calculator

With browser tools enabled, ask the agent to create a simple calculator application.

  1. Create a new project folder and open it in VS Code.

  2. In the Chat view, enter the following prompt:

    Open the calculator in the browser and test if all the operations work correctly.

  3. Watch as the agent opens index.html in the integrated browser, parses the page content to understand the structure, and systematically tests each button and operation by simulating clicks and checking the results.

The agent reports which operations work correctly and identifies any issues it discovers.

Step 4: Watch the agent debug and fix issues

If the agent discovers bugs during testing, it automatically analyzes the problem and implements a fix.

  1. Let's introduce a bug by removing the division by zero check:

    Verify the division operation works correctly. If you find any issues, fix them.

  2. Watch as the agent encounters an error when dividing by zero, then analyzes and fixes the code, and finally validates the bug fix.

The agent has completed a full development cycle: build, test, debug, and fix by using browser automation.

Step 5: Share a browser page with the agent (optional)

You can also manually open web pages and explicitly share them with the agent for analysis or interaction. By default, the agent can only interact with web pages it opened itself.

  1. Open the integrated browser by running the Browser: Open Integrated Browser command from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

  2. Navigate to a web page you want the agent to analyze or interact with.

  3. Select the Share with Agent button in the browser toolbar.

    A visual indicator on the browser tab shows that the page is actively shared with the agent.

  4. Ask the agent to perform actions on the shared page: