playwright-mcp

## Playwright MCP A Model Context Protocol (MCP) server that provides browser automation capabilities using [Playwright](https://playwright.dev). This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned 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 <!-- // Generate using: node utils/generate-links.js --> ### Getting started First, install the Playwright MCP server with your client. **Standard config** works in most of the tools: ```js { "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest" ] } } } ``` [<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) <details> <summary>Amp</summary> Add via the Amp VS Code extension settings screen or by updating your settings.json file: ```json "amp.mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest" ] } } ``` **Amp CLI Setup:** Add via the `amp mcp add`command below ```bash amp mcp add playwright -- npx @playwright/mcp@latest ``` </details> <details> <summary>Claude Code</summary> Use the Claude Code CLI to add the Playwright MCP server: ```bash claude mcp add playwright npx @playwright/mcp@latest ``` </details> <details> <summary>Claude Desktop</summary> Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user), use the standard config above. </details> <details> <summary>Codex</summary> Use the Codex CLI to add the Playwright MCP server: ```bash codex mcp add playwright npx "@playwright/mcp@latest" ``` Alternatively, create or edit the configuration file `~/.codex/config.toml` and add: ```toml [mcp_servers.playwright] command = "npx" args = ["@playwright/mcp@latest"] ``` For more information, see the [Codex MCP documentation](https://github.com/openai/codex/blob/main/codex-rs/config.md#mcp_servers). </details> <details> <summary>Copilot</summary> Use the Copilot CLI to interactively add the Playwright MCP server: ```bash /mcp add ``` Alternatively, create or edit the configuration file `~/.copilot/mcp-config.json` and add: ```json { "mcpServers": { "playwright": { "type": "local", "command": "npx", "tools": [ "*" ], "args": [ "@playwright/mcp@latest" ] } } } ``` For more information, see the [Copilot CLI documentation](https://docs.github.com/en/copilot/concepts/agents/about-copilot-cli). </details> <details> <summary>Cursor</summary> #### Click the button to install: [<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=Playwright&config=eyJjb21tYW5kIjoibnB4IEBwbGF5d3JpZ2h0L21jcEBsYXRlc3QifQ%3D%3D) #### 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@latest`. You can also verify config or add command like arguments via clicking `Edit`. </details> <details> <summary>Factory</summary> Use the Factory CLI to add the Playwright MCP server: ```bash droid mcp add playwright "npx @playwright/mcp@latest" ``` Alternatively, type `/mcp` within Factory droid to open an interactive UI for managing MCP servers. For more information, see the [Factory MCP documentation](https://docs.factory.ai/cli/configuration/mcp). </details> <details> <summary>Gemini CLI</summary> Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#configure-the-mcp-server-in-settingsjson), use the standard config above. </details> <details> <summary>Goose</summary> #### Click the button to install: [](https://block.github.io/goose/extension?cmd=npx&arg=%40playwright%2Fmcp%40latest