VS Code already includes browser tools for agent sessions, so you do not need to install an external MCP server for the basic workflow. Enable workbench.browser.enableChatTools, open an Agent chat, select the browser tools, and give the agent a precise task: start or find your app, open its URL, follow a user journey, inspect the page and console, then fix or report defects. Add an external server such as Playwright MCP or Chrome DevTools MCP only when you need a separately maintained browser integration or a tool surface that the built-in tools do not provide.
What “browser tools MCP” means in VS Code
Model Context Protocol (MCP) is an open standard for connecting an AI agent to tools and other capabilities. VS Code groups tools into three categories: built-in tools shipped with the editor, MCP tools supplied by MCP servers, and extension tools contributed through the Language Model Tools API. Microsoft’s documentation states that its browser tools are built into Visual Studio Code and “don’t require an external Model Context Protocol (MCP) server.”
That distinction matters. The built-in browser integration is the shortest path for testing a local web app from an Agent session. An MCP server is a separate installation with its own configuration, trust prompt, updates and policies. You can use both, but an external server is optional rather than a prerequisite.
Prerequisites and the important state distinction
- A current VS Code installation with Chat and Agent mode available.
- A web project that can be started locally, or an already-running URL the agent can reach.
- Permission to let the agent use browser and project tools. Organization policy can restrict tools or MCP servers.
VS Code’s agent-opened page normally uses an isolated, in-memory browser session. It will not automatically contain your normal browser cookies, local storage or sign-in. A page shared by you can retain authenticated or stateful data. Share an existing page only when the flow genuinely requires that state, and avoid exposing production credentials to an agent.
Recommended Free Tools
#1 Best Overall
Enable VS Code’s built-in browser tools
- Open Settings with File → Preferences → Settings on Windows/Linux or Code → Settings → Settings on macOS.
- Search for
workbench.browser.enableChatToolsand enable it. You can also open Preferences: Open User Settings (JSON) from the Command Palette and add"workbench.browser.enableChatTools": true. - Open Chat, create an Agent session, and open the tool configuration (often labeled Configure Tools).
- Make sure the browser tools are selected. Keep the selection narrow: enable navigation, page reading, interaction and console inspection only when the task needs them.
Labels and policy controls can change between VS Code releases. If the setting or picker is absent, update VS Code, check whether your administrator has disabled agent tools, and review the release documentation for your installed version.
Give the agent a task it can verify
Vague requests such as “test my app” produce vague results. Include the startup command, URL or route, journey, expected result, edge cases, viewport requirements and whether the agent is allowed to edit code. A useful prompt looks like this:
Start the app with npm run dev. Open http://localhost:3000/checkout.
Test as a new user: add one item, enter an invalid card number, correct it,
submit, and verify the success message and URL. Also test an empty cart and a
mobile viewport. Inspect accessibility information and console errors. If you
find a defect, explain it first, then fix the source and rerun the affected flow.Tell the agent what counts as success: visible text, URL, enabled or disabled controls, network result, downloaded file or a console condition. Ask it to report steps that were actually executed and to distinguish an observed failure from an untested assumption.
The built-in testing loop
1. Start or locate the app
The agent can run the project’s documented start command or use an existing server. If several apps are running, provide the exact port. A browser cannot test a process that is bound only to an unreachable interface or blocked by a firewall.
2. Navigate and read the page
Built-in tools cover page navigation and page reading. Ask for the page title, headings, important text, links, form labels and accessibility information when you need a structural check rather than a visual impression.
3. Exercise the user journey
The documented tool set includes clicking, hovering, dragging, typing and dialog handling. Describe the action sequence and the data to use. For destructive actions, explicitly request a safe test account or a dry run.
4. Inspect screenshots and console output
Request a screenshot at the required viewport and ask the agent to inspect console errors after each major transition. A visual defect and a JavaScript exception are different findings; record both, including the route where each occurred.
5. Use custom Playwright code when a direct action is insufficient
For repeated assertions, complex selectors or a short script, ask the agent to run custom Playwright code through the browser tool. Keep selectors stable (roles, labels and test IDs are preferable to generated class names) and have the agent show the assertion or result it used.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 116. Change code and repeat
The intended loop is start or locate the app, inspect, interact, diagnose, edit, and rerun the failing flow. Ask for a focused retest after every fix, then a broader smoke test so a correction does not break another route.
Sharing authenticated browser state safely
Use the isolated session for public pages and ordinary local testing. Share an existing page only for a sign-in, consent choice or account state that cannot be reproduced safely. Before sharing, close unrelated tabs, use a least-privilege test account, remove payment and personal data, and tell the agent exactly which actions are permitted. Cookies and storage in a shared page can authorize real changes; treat the agent as an operator, not a read-only viewer.
When to add an external browser MCP server
Install an external server when you need a separately maintained integration, a browser already running outside VS Code, or a specialized tool surface. Playwright MCP is a common choice for browser automation. Chrome for Developers also documents Chrome DevTools MCP, which connects compatible AI agents or IDEs to a live browser instance for DevTools-oriented inspection. Check the current vendor documentation for availability and setup because extensions, package names and supported transports change.
- Open Extensions and search
@mcp(or@mcp playwright). - Install the Playwright MCP server or another suitable server from the gallery.
- When VS Code asks whether you trust it, verify the publisher and approve only if your organization permits it.
- Open Chat and ask the agent to use the server’s tools.
- Use Configure Tools to enable only the capabilities required for the task.
- For project-level setup, inspect or edit
.vscode/mcp.json. VS Code provides commands to start, stop and restart configured servers.
External servers have their own installation and version lifecycle. Review their network access, authentication method, logging and update policy. Local stdio, streamable HTTP and legacy SSE are transport patterns listed in the VS Code MCP developer guide; the server’s current documentation determines which one you should configure.
Built-in tools versus an external server
| Area | Built into VS Code | External MCP server |
|---|---|---|
| Deployment | Enabled in VS Code settings; no separate server required | Install, trust and configure a server |
| Session state | Isolated agent page by default; shared pages can retain cookies and storage | Depends on the server and browser connection |
| Tool surface | Navigation, reading, screenshots, interaction, dialogs, console inspection and custom Playwright code | Varies; may target Playwright automation or live Chrome DevTools |
| Maintenance | Follows VS Code updates | Server packages and configuration have separate release cycles |
| Governance | Tool picker, trust and administrator policy controls | Those controls plus the server’s permissions, credentials and network policy |
Common failures and fixes
The agent cannot see browser tools
Confirm workbench.browser.enableChatTools is enabled, that the chat is in Agent mode, and that browser tools are selected in the tool picker. Reload VS Code after changing settings. An administrator policy or an older build can hide the feature.
The page opens but is blank or unreachable
Verify the app is running on the port you supplied, that the route exists, and that the browser can reach the host. Check the terminal for startup errors and inspect console output for JavaScript or mixed-content failures. A server bound to a private container interface may need a forwarded port.
Login-dependent steps fail
The isolated session has no normal browser cookies. Share an authenticated page or create a disposable test account, then repeat the flow. Never paste a production password into chat.
Clicks or selectors are unreliable
Ask the agent to inspect the accessibility tree and use a role, label or stable test ID. Add a wait for the relevant selector or state instead of an arbitrary delay. If an overlay blocks the target, inspect dialogs, cookie banners and other fixed elements first.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The external MCP server will not start
Check the server’s installation command, runtime version, .vscode/mcp.json syntax and environment variables. Use the server’s start or restart command, read its output, and verify that the selected transport matches the configuration. Revoke or replace credentials if they were accidentally logged.
Results differ between runs
Record viewport, timezone, locale, account state and test data. Clear or deliberately preserve storage as appropriate. Network-dependent pages can change; ask the agent to capture the URL, console output and visible evidence for each failure.
Performance, reliability and cost considerations
VS Code’s documentation does not publish benchmark, adoption or time-saving figures for these tools, so do not treat an agent run as a performance test. Browser automation is affected by app startup time, network latency, animations, third-party scripts and test data. Prefer deterministic fixtures, explicit waits and a small smoke journey before a long exploratory run. Use a real test runner for repeatable CI assertions; use the agent loop for interactive diagnosis and repair.
Built-in tools avoid the separate server installation, but they still consume agent context and tool calls. External servers add their own runtime and possible service costs. Keep tool permissions minimal, limit network access where possible, and ask for evidence rather than assuming a green-looking page is correct.
Free tools Windows power users keep installed
One-click scans. No signup required.
Or skip the browser setup
If your immediate requirement is a clean image or PDF of a URL rather than an interactive debugging session, ScreenshotNeo provides a website screenshot API and MCP server. One request can return PNG, JPEG, WebP or PDF. It accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP tools are take_screenshot, get_page_info and capture_pdf.
Example cURL request (see the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes full-page and element capture, 12 device presets plus custom viewports, retina scale, dark mode, PDF controls, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture for up to 100 URLs per call, usage and OpenAPI APIs, and compatibility with parameter names used by other screenshot APIs. Every feature is on every plan: 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to start.
Frequently Asked Questions
Do I need Playwright MCP to use browser tools in VS Code?
No. VS Code’s built-in browser tools work in an Agent session without an external MCP server. Install Playwright MCP only for a separate integration or tool surface.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Can the VS Code agent use my normal browser login?
Not by default. The agent browser is isolated; share an existing page only when an authenticated or stateful flow requires it.
Where should project MCP configuration live?
Project-level server configuration is commonly placed in .vscode/mcp.json; the server’s current instructions define the exact entries.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
