Simon Willison’s Weblog

microsoft/playwright-mcp. The Playwright team at Microsoft have released an MCP (Model Context Protocol) server wrapping Playwright, and it's pretty fascinating.

They implemented it on top of the Chrome accessibility tree, so MCP clients (such as the Claude Desktop app) can use it to drive an automated browser and use the accessibility tree to read and navigate pages that they visit.

Trying it out is quite easy if you have Claude Desktop and Node.js installed already. Edit your claude_desktop_config.json file:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

And add this:

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

Now when you launch Claude Desktop various new browser automation tools will be available to it, and you can tell Claude to navigate to a website and interact with it.

I ran the following to get a list of the available tools:

cd /tmp
git clone https://github.com/microsoft/playwright-mcp
cd playwright-mcp/src/tools
files-to-prompt . | llm -m claude-3.7-sonnet \
  'Output a detailed description of these tools'

The full output is here, but here's the truncated tool list:

Navigation Tools (common.ts)

• browser_navigate: Navigate to a specific URL
• browser_go_back: Navigate back in browser history
• browser_go_forward: Navigate forward in browser history
• browser_wait: Wait for a specified time in seconds
• browser_press_key: Press a keyboard key
• browser_save_as_pdf: Save current page as PDF
• browser_close: Close the current page

Screenshot and Mouse Tools (screenshot.ts)

• browser_screenshot: Take a screenshot of the current page
• browser_move_mouse: Move mouse to specific coordinates
• browser_click (coordinate-based): Click at specific x,y coordinates
• browser_drag (coordinate-based): Drag mouse from one position to another
• browser_type (keyboard): Type text and optionally submit

Accessibility Snapshot Tools (snapshot.ts)

• browser_snapshot: Capture accessibility structure of the page
• browser_click (element-based): Click on a specific element using accessibility reference
• browser_drag (element-based): Drag between two elements
• browser_hover: Hover over an element
• browser_type (element-based): Type text into a specific element