smithery/JamesPrial

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 structured accessibility-based automation without screenshots or vision models.

Installation

$ npx skills add smithery/JamesPrial --skill playwright-mcp

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery/JamesPrial · top by installs.

npx skills add smithery/JamesPrial

Browse all from smithery/JamesPrial

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Skill metadata

Parsed from SKILL.md frontmatter.

Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,152 B
  • docs SUMMARY.md 292 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

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](references/configuration.md) for full browser and server configuration options.

Available Tools

See [references/tools.md](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