# playwright-mcp-server MCP server Headless browser primitives for AI agents when sites need real JS rendering. ## At a glance playwright-mcp-server is an MCP server in the Web & Search category. It is hosted remotely and connects over HTTP, and needs Authorization. It exposes 17 tools, including navigate, screenshot and click. It scores C (40/100) on the MCP Skills Hub health score as of Oct 28, 2026. ## Install ### How to install playwright-mcp-server in Claude Code 1. Add the server ```bash claude mcp add --transport http playwright-mcp-server https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp --header 'Authorization: Bearer ' ``` 2. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 3. Verify it's connected ```bash claude mcp list ``` 4. Sharing it with your team? Add `--scope project` to write it to .mcp.json in the repository root, which you can commit (with the secrets left as environment variables). 5. Use it in a session Ask Claude to use the tools this server exposes (e.g. navigate, screenshot, click). It discovers them automatically. ### How to install playwright-mcp-server in Claude Desktop 1. Open your MCP config macOS: ~/Library/Application Support/Claude/claude_desktop_config.json ยท Windows: %APPDATA%\Claude\claude_desktop_config.json 2. Add this server ```json { "mcpServers": { "playwright-mcp-server": { "command": "npx", "args": [ "-y", "mcp-remote", "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "--header", "Authorization:${AUTH_HEADER}" ], "env": { "AUTH_HEADER": "Bearer " } } } } ``` 3. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 4. Why the wrapper? This is a remote (HTTP) server and Claude Desktop only launches local processes, so mcp-remote proxies the connection. It will open a browser window if the server needs OAuth. 5. Restart Claude Desktop The tools appear under the ๐Ÿ”Œ menu once the app reloads. ### How to install playwright-mcp-server in Cursor 1. Create / edit .cursor/mcp.json in your project ```json { "mcpServers": { "playwright-mcp-server": { "url": "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "headers": { "Authorization": "Bearer " } } } } ``` 2. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 3. Enable it Cursor Settings โ†’ MCP โ†’ toggle the server on. Tools become available to the Composer/Agent. ### How to install playwright-mcp-server in Codex CLI 1. Add to ~/.codex/config.toml ```toml [mcp_servers.playwright-mcp-server] command = "npx" args = ["-y", "mcp-remote", "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "--header", "Authorization:${AUTH_HEADER}"] env = { AUTH_HEADER = "Bearer " } ``` 2. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 3. Why the wrapper? Codex runs MCP servers as local processes, so mcp-remote bridges this HTTP endpoint to stdio. 4. Run Codex Codex loads MCP servers from config.toml on startup and exposes their tools to the agent. ### How to install playwright-mcp-server in Windsurf 1. Edit ~/.codeium/windsurf/mcp_config.json ```json { "mcpServers": { "playwright-mcp-server": { "serverUrl": "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "headers": { "Authorization": "Bearer " } } } } ``` 2. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 3. Reload Windsurf โ†’ Cascade โ†’ refresh MCP servers. Cascade can now call the tools. ### How to install playwright-mcp-server in Cline 1. Open Cline โ†’ MCP Servers โ†’ Configure Adds to cline_mcp_settings.json. 2. Add the server ```json { "mcpServers": { "playwright-mcp-server": { "type": "streamableHttp", "url": "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "headers": { "Authorization": "Bearer " } } } } ``` 3. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. ### How to install playwright-mcp-server in VS Code 1. Create .vscode/mcp.json ```json { "servers": { "playwright-mcp-server": { "type": "http", "url": "https://nexgendata-mcp-proxy.steve-corbeil.workers.dev/playwright-mcp-server/mcp", "headers": { "Authorization": "Bearer " } } } } ``` 2. Fill in your credentials Replace Bearer with your real value. Keep secrets out of any config file you commit. 3. Start it VS Code shows a โ–ถ Start action above the server entry. Agent mode (Copilot Chat) can then use the tools. ## Tools - `navigate` โ€” Navigate the browser to a URL. Returns the final URL and page title. - `screenshot` โ€” Take a PNG screenshot of the current page (or a specific element). Returns base64 PNG. - `click` โ€” Click an element matched by CSS selector or visible text. - `type_text` โ€” Type text into an input/textarea. Optionally clear first or press Enter after. - `get_text` โ€” Extract visible text from the page or a specific element. - `get_html` โ€” Return the HTML of the page or a specific element. - `evaluate` โ€” Evaluate JavaScript in the page context. Use `return` for values or an expression. - `select_option` โ€” Choose an option from a