BrowserLoop
About
A Model Context Protocol (MCP) server for taking screenshots of web pages using Playwright.
Details
- Author
- mattiasw
- Downloads
- 168
- Categories
- Web Scraping, Automation, Other, Developer Tools
Jump to
- 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
BrowserLoopCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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”.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"browserloop": {
"browserloop": {
"command": "npx",
"args": [
"playwright",
"install",
"chromium"
]
}
}
}
}McpServers
{
"browserloop": {
"command": "npx",
"args": [
"playwright",
"install",
"chromium"
]
}
}BrowserLoop
A Model Context Protocol (MCP) server for taking screenshots of web pages using Playwright. This tool allows AI agents to automatically capture and analyze screenshots for UI verification or other tasks.
NOTE: Almost all of the code in this repository has been auto-generated. That means you should probably not trust it too much. That being said, it does work and I'm using it myself.
NOTE: If the documentation is incorrect, please let me know or send a PR. If you too want to use a code generation tool to update the code for this project, PROJECT_CONTEXT.md has been used as context to give a good overview of the various parts of the project. It might be a bit messy now but it's a good starting point and you're welcome to update it.
Features
- 📸 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
- 🛡️ Secure non-root container execution
- 🤖 Full MCP protocol integration with AI development tools
- 🔧 Configurable viewport sizes and capture options
- 📱 Full page and element-specific screenshot capture
- ⚡ TypeScript with Biome for fast development
- 🧪 Comprehensive testing with Node.js built-in test runner
Quick Start
📦 NPX Usage (Recommended)
The easiest way to get started - no installation required!
```bash
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
