Browserloop MCP Server

A Model Context Protocol server for taking screenshots of web pages using Playwright

Local serverstdioTypeScript

What is the Browserloop MCP server?

Most browser automation work still happens through a UI a human drives. Browserloop MCP server moves it into the conversation instead. A Model Context Protocol server for taking screenshots of web pages using Playwright.

The short version

A Model Context Protocol (MCP) server for taking screenshots and reading console logs from web pages using Playwright. This tool allows AI agents to automatically capture screenshots and monitor browser console output for debugging, testing, and development tasks.

  • 📸 High-quality screenshot capture using Playwright
  • 📝 Console log monitoring and collection from web pages
  • 🌐 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

The tools it exposes

The server publishes 8 tools. What each one is for:

  • url — string
  • width — number
  • height — number
  • format — string
  • quality — number
  • fullPage — boolean
  • selector — string
  • Screenshots — The Screenshots tool exposed by this server

What it needs from you

Configuration is passed through the environment: BROWSERLOOP_DEFAULT_COOKIES, BROWSERLOOP_DEFAULT_FORMAT, BROWSERLOOP_DEFAULT_QUALITY. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.

Getting it running

Usage on npm is all you need. Most clients run it directly, so configuration is a few lines and a restart.

How it compares

Plenty of browser automation servers cover similar ground. The differences that matter in practice are scope of access and how much setup stands between you and a working tool call. Browserloop's toolset — url, width, height and 5 more — is a fair guide to whether it matches your workflow. It is maintained by mattiasw; worth a glance at recent repository activity before you build anything load-bearing on it.

SyncDev reviews every entry in this directory against the project's own documentation before publishing, and revisits them as servers change.

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
urlstring
widthnumber
heightnumber
formatstring
qualitynumber
fullPageboolean
selectorstring
ScreenshotsThe Screenshots tool exposed by this server.

How to install the Browserloop MCP server

Reference in MCP config:
```json
{
  "mcpServers": {
    "browserloop": {
      "command": "node",
      "args": ["dist/src/mcp-server.js"],
      "env": {
        "BROWSERLOOP_DEFAULT_COOKIES": "/home/username/.config/browserloop/cookies.json",
        "BROWSERLOOP_DEFAULT_FORMAT": "webp",
        "BROWSERLOOP_DEFAULT_QUALITY": "85"
      }
    }
  }
}

Configuration as documented by the project. Restart the client after saving.

Configuration

VariableDescriptionRequired
BROWSERLOOP_DEFAULT_COOKIESConfiguration value read at startup.Optional
BROWSERLOOP_DEFAULT_FORMATConfiguration value read at startup.Optional
BROWSERLOOP_DEFAULT_QUALITYConfiguration value read at startup.Optional

Example prompts to try

  • Use Browserloop to url.
  • Use Browserloop to width.
  • Use Browserloop to height.

Frequently asked questions

It connects Browserloop to MCP-compatible AI assistants such as Claude and Cursor, exposing 8 tools (url, width, height, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Browserloop directly.