Use browser tools with agents

Browser tools give agents a visual and interactive feedback loop for web development. An agent can change your code, run the application, interact with it in the integrated browser, inspect the result, and fix problems it finds. This closed loop helps the agent verify actual behavior instead of reasoning only from source code.

Browser tools are built into Visual Studio Code and don't require an external Model Context Protocol (MCP) server. For example, you can ask:

Start the application, open it in the browser, test the sign-up flow, and fix any issues you find. Verify the fix before finishing.

How the browser feedback loop works

When an agent uses browser tools, it can complete and verify a web development task in a continuous loop:

1. The agent changes the application code.
2. The agent starts the development server or locates the running application.
3. Browser tools open the application and interact with it.
4. The agent analyzes page content, screenshots, console errors, and interaction results.
5. The agent fixes any problems and repeats the checks.

The agent reports what it tested and the result. Review its code changes and verification results before you keep the changes.

What agents can do in the browser

Browser tools support common web development and validation tasks:

The built-in browser tools include:

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

The agent chooses tools based on your prompt and the available context. You can review the tool calls and their parameters in the chat conversation.

Get started

Browser tools are enabled by default with the workbench.browser.enableChatTools Open in VS Code Open in VS Code Insiders setting.

1. Start a new agent session in the Chat view or the Agents window.

2. Ask the agent to start or locate your web application, test a specific user flow, and report the result.

3. Include the expected behavior and tell the agent whether to fix and verify any problems it finds.

For example:

Start the development server and open the app in the browser.
Add a task named "Review browser tools", mark it complete, and reload the page.
Verify that the completed task persists. If any step fails, fix the issue and repeat the flow.

Choose a browser session

The agent can open a new page in an isolated session, or you can share a browser page that you opened. Choose based on whether the task needs your existing browser state.

Let the agent open a page

Ask the agent to open a URL or test a running application. Pages opened by the agent use isolated ephemeral sessions, which protects the data in your other browser tabs.

In the Agents window, browser tabs are isolated per session. An agent can only read and interact with tabs that belong to its session.

Share an existing page

By default, an agent can't access browser pages that you opened. To grant access to a page:

1. Open the page in the integrated browser.
2. Select Share with Agent in the browser toolbar.
3. Confirm that you want to share the page.
4. Ask the agent to read or interact with the page.

A visual indicator shows that the page is shared. Select Share with Agent again to revoke access immediately.

If an agent needs access to an unshared tab, it can ask you to share one. In autopilot mode, VS Code declines these requests automatically to protect your privacy.

Give feedback from a web page

The integrated browser lets you point to the rendered result instead of describing a visual or runtime problem only in text. You can select page content, attach diagnostic information, and give element-level instructions for the agent to implement.

Use the Add to Chat actions in the browser toolbar to provide:

• Page elements: select a rendered element and attach its HTML, CSS, and optional screenshot.
• Element comments: select one or more elements and associate a specific change request with each one.
• Screenshots: capture the current viewport, a selected area, or the full page.
• Console logs: attach runtime errors and other console output.

For example, give feedback on multiple parts of a page and then let the agent validate its work:

1. Open your application in the integrated browser.
2. Open the Add to Chat dropdown and select Comment on Elements.
3. Select the navigation menu and enter Collapse this navigation into a menu button on narrow screens.
4. Select the form and enter Align these fields and show validation errors below each input.
5. Add any overall instructions in the chat input and send the prompt.
6. Ask the agent to implement the feedback and use browser tools to verify the result at desktop and mobile viewport sizes.

You can also select Share with Agent to let the agent continue interacting with the same page, including its current browser state. This creates a collaborative loop: you identify a problem in the rendered application, the agent implements the change, and browser tools verify the result.

For detailed procedures and browser settings, see adding browser context to AI chat.

Compare browser and chat context workflows

Browser tools are different from manually adding browser content to a chat prompt:

Use the Add to Chat actions when you want to choose the exact browser context yourself. Learn more about adding browser context to chat.

Write effective browser prompts

Describe an observable outcome so the agent knows what to exercise and how to decide whether the task is complete. Include:

• How to start the application and which URL to open.
• The user journey to follow.
• The expected result.
• Important edge cases or viewport sizes.
• Whether the agent should fix discovered problems.
• The checks the agent should repeat after a fix.

The following patterns cover common browser workflows.

Implement the profile form from the requirements. Start the app and use the browser to verify that valid changes save, invalid input shows an error, and cancel restores the original values. Fix any issues and verify the complete flow again.

Open http://localhost:3000 and reproduce this issue: submitting the checkout form twice creates duplicate orders. Find the cause, fix it, and repeat the same browser steps to verify that only one order is created.

Open the dashboard and inspect it at desktop and mobile viewport sizes. Verify that the navigation remains usable and no content overflows. Fix layout issues and capture screenshots of the final result.

Review the sign-in page for accessible names, heading structure, and keyboard operation. Exercise the form without a mouse, fix issues you find, and verify the flow again.

Browser tools provide interactive validation during an agent session. Keep repeatable Playwright or other automated tests in your repository when the checks need to run consistently in continuous integration or guard against regressions.

Privacy and enterprise controls

VS Code provides controls over browser access:

• You explicitly approve sharing a browser tab that you opened.
• Agent-opened tabs use isolated ephemeral storage.
• In untrusted workspaces, the integrated browser always uses ephemeral storage.
• Administrators can turn off browser tools with the BrowserChatTools policy.
• Administrators can use agent network filtering to restrict the domains that agent tools can reach.

Learn more about approvals and permissions, browser session storage, and enterprise controls for AI.

Troubleshoot browser tools

Next steps

• Follow the build and validate a web app with browser tools tutorial.
• Learn about the integrated browser.
• Explore testing with AI.
• Learn how tools work in the agent loop.