BrowserLoop
@mattiasw
A Model Context Protocol (MCP) server for taking screenshots of web pages using Playwright.
Overview
What is BrowserLoop?
BrowserLoop is a Model Context Protocol (MCP) server for taking screenshots of web pages using Playwright. It enables AI agents to automatically capture and analyze screenshots for UI verification or other tasks.
How to use BrowserLoop?
Install Chromium with npx playwright install chromium, then run BrowserLoop via NPX (npx -y browserloop@latest) or Docker. Configure the server in your MCP settings file (e.g., ~/.cursor/mcp.json) using the npx command or a compiled Node.js path. Screenshots can be taken with natural language commands like “Take a screenshot of https://example.com”.
Key features of BrowserLoop
- High-quality screenshot capture using Playwright
- Support for localhost and remote URLs
- Cookie-based authentication for protected pages
- Docker containerization for consistent environments
- PNG, JPEG, and WebP format support with configurable quality
- Full page and element-specific screenshot capture
Use cases of BrowserLoop
- Capture UI screenshots of local development servers with authentication
- Take screenshots of staging environments for visual regression testing
- Verify API documentation tools such as Swagger or GraphQL Playground
- Automate screenshots of admin panels and protected routes
- Debug UI changes by capturing pages during development
FAQ from BrowserLoop
How do I fix the “Executable doesn't exist” error?
Install the Chromium browser by running npx playwright install chromium. This is a required one-time setup.
Why is my MCP server not starting?
First test manually with npx browserloop@latest --version. Then verify Node.js 20+, npm, and npx are installed, and check your MCP configuration JSON syntax.
How can I capture screenshots from login-protected pages?
Use cookie-based authentication by providing cookies via the “cookies” parameter or the BROWSERLOOP_DEFAULT_COOKIES environment variable. See the Cookie Authentication Guide for details.
How do I update BrowserLoop to the latest version?
If using NPX with @latest, the latest version is used automatically—no manual update is needed. You can check the current version with npx browserloop@latest --version.
Where are debug logs written and how do I enable them?
Set the BROWSERLOOP_DEBUG environment variable to true. Debug logs are written to /tmp/browserloop.log (not the console) to maintain MCP stdio compatibility.