playwright-mcp

Programmatic browser automation using Playwright MCP server. Use when building Claude Code tools or applications that need web automation, testing, scraping, or browser interaction. Provides structure

playwright
mcp

SKILL.md

GitHub

Playwright MCP

Programmatic interface for Playwright MCP server - enables browser automation in Node.js applications using structured accessibility snapshots.

Installation

npm install @playwright/mcp @modelcontextprotocol/sdk

Basic Usage

import http from 'http';
import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

// Create MCP server with browser configuration
const connection = await createConnection({ 
  browser: { 
    launchOptions: { headless: true } 
  } 
});

// Connect with SSE transport
const transport = new SSEServerTransport('/messages', res);
await connection.connect(transport);

Configuration Options

See references/configuration.md for full browser and server configuration options.

Available Tools

See references/tools.md for complete tool documentation including:

  • Core automation (click, type, navigate, etc.)
  • Tab management
  • Screenshots and PDF generation
  • JavaScript evaluation
  • Network and console inspection

Common Patterns

Headless automation:

const connection = await createConnection({
  browser: { launchOptions: { headless: true } }
});

With browser channel:

const connection = await createConnection({
  browser: { 
    launchOptions: { 
      channel: 'chrome',
      headless: false 
    } 
  }
});

Isolated contexts:

const connection = await createConnection({
  browser: { 
    isolated: true,
    contextOptions: {
      storageState: 'path/to/storage.json'
    }
  }
});

Documentation