screenshot
Take a screenshot of a web page — localhost or remote, full page or one element — through Playwright.
LABSCO SUMMARY
Cookie auth is what makes it useful on the pages you actually build.
A screenshot server that can only reach public pages misses the admin panel, the dashboard and the flow behind a login — which is most of what a developer wants to look at. Passing cookies fixes that, and the log sanitiser means the console output you collect from a real session does not carry tokens into the transcript. Two things to note before adopting: the project is archived, with the author pointing at Chrome DevTools MCP as the more comprehensive successor, and console collection always waits three seconds after load, so expect a few seconds per call.
What it is
A Playwright-backed server for two jobs: capturing what a page looks like and collecting what its console said. Both work against localhost and remote URLs, and both can run as an authenticated session using cookies you supply.
What you get
- The screenshot tool takes a url, with width and height between 200 and 4000, defaulting to 1280 by 720
- Formats are webp, png or jpeg, with quality from 1 to 100 and a default of 80
- fullPage captures the whole document; selector captures a single element
- Console log collection with the levels chosen through BROWSERLOOP_CONSOLE_LOG_LEVELS — log, info, warn, error and debug by default
- Log sanitisation is on by default and masks API keys, email addresses, JWT tokens, auth headers, URLs carrying credentials and secret-looking variables
- Cookie authentication takes a JSON array inline or from a file path in BROWSERLOOP_DEFAULT_COOKIES, so a protected page screenshots as the logged-in user
- Retries are built in — BROWSERLOOP_RETRY_COUNT defaults to 3
Requirements
Node.js 20 or newer, run over npx as browserloop — version 1.1.1. Chromium must be installed first with npx playwright install chromium; the most common failure is skipping that step. Debug logs go to a file rather than the console, at /tmp/browserloop.log when BROWSERLOOP_DEBUG is true, to keep stdout clean for the MCP protocol. Licensed AGPL-3.0-or-later.
Setup effort
Follow the published steps — npx playwright install chromium
USE CASES
01
Seeing whether a UI change actually rendered
Capture at a specific viewport, or the full page, in the format you want.
02
Screenshotting a page behind a login
Supply session cookies and the capture happens as the authenticated user.
03
Finding the error a page is throwing
Console output comes back filtered to the levels you asked for, with secrets masked.
04
Capturing one component rather than the page
A CSS selector narrows the capture to a single element.
2 tools
Listed in project code.
read_console
Read the console output of a web page, filtered to the configured log levels, with secrets masked.
BEFORE YOU INSTALL
What to know first
Tools you get
2 tools registered in the project's code.
Requires
- npx on PATH
- Node.js 20+
- Chromium installed through Playwright (npx playwright install chromium)
INSTALLATION
Connect your client
Server setup
TERMINAL
npx playwright install chromium
npx -y browserloop@latestMCP Clients
Cursor
CURSOR · JSON
{
"mcpServers": {
"browserloop": {
"command": "npx",
"args": [
"-y",
"browserloop@latest"
],
"description": "Screenshot and console log capture server for web pages using Playwright"
}
}
}Install Chromium first with npx playwright install chromium — BrowserLoop cannot take screenshots without it.
Any MCP client — local build
ANY MCP CLIENT — LOCAL BUILD · TERMINAL
git clone https://github.com/mattiasw/browserloop.git
cd browserloop
npm install
npx playwright install chromium
npm run buildThen add the block below
ANY MCP CLIENT — LOCAL BUILD · JSON
{
"mcpServers": {
"browserloop": {
"command": "node",
"args": [
"<YOUR_PATH_TO_BROWSERLOOP>/dist/src/index.js"
],
"description": "Screenshot and console log capture server for web pages using Playwright"
}
}
}
