How to Capture Website Screenshots from VS Code with an MCP Server

To capture a website screenshot from VS Code with an MCP server, install Playwright MCP, approve its configuration when VS Code asks, then ask the agent to visit a URL and take a screenshot. You need Node.js 20 or newer. Playwright MCP gives the agent browser navigation and screenshot tools; for browser interaction without an external MCP server, VS Code also offers built-in browser tools.

1. Choose built-in browser tools or Playwright MCP

Use VS Code’s built-in browser tools if you only need browser interaction and do not specifically need an MCP server. Choose Playwright MCP when you want an external MCP tool provider that gives the agent browser controls and screenshot capture. VS Code’s documentation explicitly recommends checking its built-in browser tools first when the goal is browser interaction rather than learning MCP setup. VS Code: Add and manage MCP servers.

The steps below use Playwright MCP, the documented Playwright server for giving a VS Code agent browser tools.

2. Install Playwright MCP in VS Code

Install Node.js 20 or newer if it is not already available. Check with node --version.
In VS Code, open Extensions and search for @mcp playwright.
Install the Playwright MCP server extension or entry shown in the results.
Review the server publisher and configuration. When VS Code asks whether to trust and start the server, approve it only if you trust it.
Open Chat and select an agent mode that can use tools.

VS Code also documents adding the server with its CLI. Run this in a terminal where the code command is available:

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

The equivalent server entry uses npx to run the Playwright MCP package:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Use the configuration format and location VS Code generated for your installation; the JSON above shows the server fields, not a replacement for the complete configuration file.

3. Ask the agent to capture a page

In VS Code Chat, be specific about the page and the desired output. For example:

Visit https://code.visualstudio.com, decline the cookie banner if one appears, and take a screenshot of the homepage.

The agent can invoke Playwright tools to navigate and capture the page. Depending on your VS Code settings, it may ask you to confirm each tool invocation. Approve the browser actions you expect, then inspect the screenshot result in the conversation. You can also ask for a specific element or the current page. Playwright MCP supports capturing the current page or specific elements for visual verification.

4. Configure the server for your workflow

Choose a configuration scope

VS Code supports user-profile and workspace MCP configuration. Use a user-level configuration for a server you want available in your own projects. Use workspace configuration when the server is part of a project’s shared setup. VS Code documents .vscode/mcp.json, portable workspace .mcp.json, and user-level configuration options. A workspace configuration can be shared with the project, so review it before trusting or starting its servers.

Run headed or headless

Playwright MCP runs with a visible browser by default. This is useful when you want to watch navigation and diagnose what the agent is doing. To run headless, add --headless to the server arguments:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless"]
    }
  }
}

Restart the MCP server after changing its arguments. Use the visible browser for interactive diagnosis; use headless mode when a visible window is unnecessary.

Select a browser

The documented browser choices include Chrome, Firefox, WebKit, and Microsoft Edge. Set the browser option supported by the installed Playwright MCP version in the server arguments. Check the Playwright MCP guide for the current option spelling and available browser setup. Browser availability can depend on the browser binaries installed in the environment.

Give the agent a precise capture request

State the URL, whether to handle a consent prompt, and whether you need a full-page image or a particular element. For repeatable work, also name the viewport or browser you want when relevant. Ask for a screenshot when the deliverable is visual evidence. Ask for a structured page summary when you need the agent to understand page structure and interact with controls.

5. Understand screenshots and accessibility snapshots

A screenshot is a visual capture of what the browser rendered. Playwright MCP’s browser_take_screenshot tool captures the page visually. An accessibility snapshot is structured information about the page’s accessible elements and roles; browser_snapshot is intended to help the agent understand structure and choose interactions. The Playwright MCP guidance says actions should be based on snapshots rather than screenshots. In practice, use snapshots to locate and operate controls, then take a screenshot to verify the visual result. Playwright MCP repository.

6. Trust and security considerations

A local MCP server runs on your machine and can execute code. Review who publishes it and what command and arguments VS Code will start before you trust it. Treat project-provided MCP configuration with the same care as other code that can run locally. VS Code documents MCP server trust and configuration.

Playwright MCP describes browser_run_code_unsafe as executing arbitrary JavaScript in the server process and warns that it is equivalent to remote code execution. Enable that facility only for trusted MCP clients. The project also states that Playwright MCP is not a security boundary. Do not treat browser isolation as a substitute for reviewing the server and its configuration. Playwright MCP security guidance.

7. Troubleshoot common problems

Symptom	Likely cause	What to do
The Playwright server does not start	Node.js is missing or older than the documented prerequisite, or the package command cannot run.	Check `node --version` and use Node.js 20 or newer. Confirm the configured command is `npx` and the package argument is `@playwright/mcp@latest`. Restart the server after correcting configuration.
VS Code asks for trust or tool approval	VS Code is asking you to trust a local server or approve a tool invocation.	Review the publisher, command, arguments, and requested action. Approve only the server and actions you trust.
The agent can describe the page but provides no image	The agent may have used an accessibility snapshot, which gives structured page information rather than a visual capture.	Ask explicitly: “Take a screenshot of the current page.” Confirm the screenshot tool invocation if VS Code prompts.
The browser window is not visible	The server may have been configured with `--headless`.	Remove that argument and restart the server if you want to watch the browser. Headed operation is the default documented by Playwright MCP.
The selected browser fails to launch	The requested browser may not be installed or available in that environment.	Try a documented browser choice that is available, or follow the Playwright MCP guide’s browser setup instructions.
The screenshot shows a consent banner or popup	The site presented an overlay, and the agent did not dismiss it before capture.	Ask the agent to identify and dismiss the banner or popup, then capture again. Use a clear prompt and let the agent inspect the page structure before interacting.
The screenshot is incomplete or the page has not finished rendering	The page may load content asynchronously or require more time before capture.	Ask the agent to wait for the relevant content to appear before taking the screenshot. Name a target element or page state that indicates readiness.

8. Performance, reliability, and cost

Playwright MCP starts a browser and navigates the target site, so capture time depends on server startup, browser availability, network conditions, and how the page loads. Large or script-heavy pages can take longer and may continue changing after the initial render. Ask the agent to wait for the content you need, and avoid repeating navigation when the current page is already correct.

For repeatability, use a stable URL, specify the expected page state, and inspect the result when a site has dynamic content or consent prompts. Browser and website changes can affect the rendered output. The research sources do not provide a benchmark, price, or performance guarantee for this workflow; check the tooling and infrastructure you use for any applicable costs.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request returns an image or PDF, and its MCP server gives AI agents screenshot tools. Its capture flow accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.

For a direct API call, see the ScreenshotNeo documentation. This cURL example saves a WebP screenshot:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://code.visualstudio.com \
  -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://code.visualstudio.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://code.visualstudio.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

With ScreenshotNeo, cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots a month are free with no card. Paid plans start at $5 for 3,000 screenshots.

FAQ

Can the VS Code agent take a screenshot without Playwright MCP?

Yes. VS Code’s built-in browser tools support browser interaction without requiring an MCP server. Use Playwright MCP when you specifically want its external browser tools.

Does an accessibility snapshot produce an image?

No. It gives the agent structured accessibility information. Request a screenshot for a visual capture.

Can Playwright MCP run without showing a browser?

Yes. Add --headless to the server arguments. Headed mode is the default.

Which browsers can it use?

The documented choices include Chrome, Firefox, WebKit, and Microsoft Edge. Availability depends on the environment and browser setup.