Playwright MCP Server

by dsouza-anush

README.md

Heroku MCP Server - Playwright Web Browser

Deploy to Heroku

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables AI models to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

This implementation is fully compatible with Heroku Inference and can be used as a web browsing tool for your AI models.

Key Features

  • Fast and lightweight. Uses Playwright's accessibility tree, not pixel-based input.
  • LLM-friendly. No vision models needed, operates purely on structured data.
  • Deterministic tool application. Avoids ambiguity common with screenshot-based approaches.

Requirements

  • Node.js 18 or newer
  • VS Code, Cursor, Windsurf, Claude Desktop, Goose or any other MCP client

Heroku Deployment

Option 1: One-Click Deploy (Recommended)

Click the "Deploy to Heroku" button at the top of this page to create a new Heroku app with this server pre-configured.

Option 2: Manual Deployment

# Clone this repository
git clone https://github.com/dsouza-anush/playwright-mcp-heroku.git
cd playwright-mcp-heroku

# Create a Heroku app
heroku create your-app-name

# Deploy to Heroku
git push heroku main

Once deployed, your Playwright MCP server will be available at:

  • Streamable HTTP endpoint: https://your-app-name.herokuapp.com/mcp
  • SSE endpoint: https://your-app-name.herokuapp.com/sse

Using your Heroku-deployed server with MCP clients

Add the following to your MCP client configuration:

{
  "mcpServers": {
    "playwright": {
      "url": "https://your-app-name.herokuapp.com/mcp"
    }
  }
}

For Claude Code CLI:

claude mcp add playwright --url https://your-app-name.herokuapp.com/mcp

For more details, see README-HEROKU.md.

Getting started with Local Setup

First, install the Playwright MCP server with your client.

Standard config works in most of the tools:

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

Install in VS Code Install in VS Code Insiders

Claude Code

Use the Claude Code CLI to add the Playwright MCP server:

claude mcp add playwright npx @playwright/mcp@latest
Claude Desktop

Follow the MCP install guide, use the standard config above.

Cursor

Click the button to install:

Install MCP Server

Or install manually:

Go to Cursor Settings -> MCP -> Add new MCP Server. Name to your liking, use command type with the command npx @playwright/mcp. You can also verify config or add command like arguments via clicking Edit.

Gemini CLI

Follow the MCP install guide, use the standard config above.

Goose

Click the button to install:

Install in Goose

Or install manually:

Go to Advanced settings -> Extensions -> Add custom extension. Name to your liking, use type STDIO, and set the command to npx @playwright/mcp. Click "Add Extension".