Verifying frontend changes always meant a mental context switch: write code, alt-tab to a browser, poke around in DevTools, switch back. Even with a decent dev server, the loop was still manual — and for AI agents, it was essentially broken. Agents could write unit tests for logic, but verifying whether a button actually renders, whether a dialog triggers, or whether a layout holds up? That required a human in the loop.
I first tried to tackle this problem by using the Playwright or Chrome Dev-Tools MCP server, but with the February 2026 release of VS Code (1.110), that changes. Agents can now open, interact with, and inspect your running application directly inside VS Code's integrated browser — closing the development loop without any manual hand-off.
How it works
When browser agent tools are enabled, Copilot gains access to a set of tools that let it read and interact with pages in the integrated browser. As the agent interacts with the page, it sees updates to page content and any errors and warnings in the console. The tools work out of the box — no extra dependencies to install.
The following tools are available:
- Page navigation:
openBrowserPage,navigatePage - Page content and appearance:
readPage,screenshotPage - User interaction:
clickElement,hoverElement,dragElement,typeInPage,handleDialog - Custom browser automation:
runPlaywrightCode
Remark: runPlaywrightCode is worth highlighting, it gives the agent a full escape hatch into Playwright's automation API, meaning any interaction that can be scripted in Playwright can be handed off to the agent directly.
Step-by-Step: Setting it up
Step 1 - Enable the experimental setting
Browser agent tools are currently experimental. Enable them by turning on the workbench.browser.enableChatTools setting in VS Code. You can open Settings with Ctrl+, and search for the setting name, or add it directly to your settings.json:
{
"workbench.browser.enableChatTools": true
}
Step 2 - Enable browser tools in the Chat view
Open the Chat view with Ctrl+Alt+I (macOS: Ctrl+Cmd+I) and select Agent from the Agents dropdown. Click the Tools button in the chat input area, then verify that all the browser tools are enabled — they're grouped under Built-in → Browser.
Step 3 - Start your dev server
Run your application locally as you normally would. The agent will open the integrated browser and navigate to your running app. Enable workbench.browser.openLocalhostLinks to automatically redirect localhost URLs to the integrated browser instead of your default system browser.
Step 4 - Ask the agent to build and verify
With browser tools enabled, the agent can receive instructions that span both code changes and UI verification in one shot. For example:
Add a contact page that allows you to share your contact details. Open the contact page in a browser and test if the contact details are send to the backend.The agent will generate the files, open the integrated browser, interact with the UI, and report any issues it finds — fixing them automatically if it can.
Step 5 - Share your own browser session (optional)
Open the integrated browser via Browser: Open Integrated Browser from the Command Palette (Ctrl+Shift+P), navigate to any page, and click Share with Agent in the browser toolbar. The agent will now have access to the live page — including your existing session cookies and login state — so you can ask it to audit content, test flows, or check accessibility.
A visual indicator on the browser tab shows when sharing is active. Click the button again to immediately revoke access.
What you can test with it
There are a lot of different use cases, but here are the ones I used it for:
- Form validation: build and test a form — verify error messages, validation rules, and successful submission
- Responsive layouts: ask the agent to screenshot a page at different viewport sizes and verify responsive behaviour Interactive state: verify user interactions and state management in dynamic components
- Accessibility audits: have the agent check any page for missing alt text, heading hierarchy, keyboard navigation, and colour contrast
- Console error triage: ask the agent to load a page and report any errors or warnings from the browser console
Any other use cases you can think of? Please feel free to share.
Conclusion
The development feedback loop has always had a weak link at the UI layer. Agents could reason about code, generate tests, and apply fixes — but they were working blind when it came to what actually rendered in the browser. That gap is now closed. If you're building anything with a frontend and you're already using Copilot agent mode, this is worth enabling today.
If you are looking for a full tutorial, the official VS Code guide walks through a calculator example in detail: Build and test web apps with browser agent tools
More information
microsoft/playwright-mcp: Playwright MCP server
ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents