Install Playwright MCP

Install this skill

npx skills add jamesyang124/agent-skills --skill install-playwright-mcp -g

Adds browser automation to your agent: navigate, screenshot, click, fill forms, intercept network. Repository: https://github.com/microsoft/playwright-mcp

Arguments

All optional — anything not passed is asked in Step 1.

Quick Start

Ask the user two questions, then run the bundled script.

Step 1 — Collect parameters

Use vscode_askQuestions with:

1. agent — which agent to configure
   • options: claude, copilot
2. mode — browser mode
   • options: headed (default, shows browser window), headless

Step 2 — Run the installer

Find this skill's directory from the SKILL.md path, then run:

PROJECT_ROOT="<workspace-root>" \
  bash "<skill-dir>/scripts/install.sh" \
  --agent <agent> \
  [--headless]

<skill-dir> is this skill's folder, the base directory shown when the skill loads (for example ~/.claude/skills/install-playwright-mcp).

• Set PROJECT_ROOT to the user's current workspace folder
• Add --headless only when the user chose headless mode
• The script merges into any existing config file; it will not overwrite other servers

Step 3 — Confirm

Tell the user: Restart your agent to load Playwright MCP.

What Gets Written

Copilot (.vscode/mcp.json):

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

Claude (.mcp.json):

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

Troubleshooting

• npx not found → install Node.js from https://nodejs.org/
• jq not found → brew install jq on macOS
• Config not loading → confirm the agent was fully restarted after install