microsoft/playwright-mcp
Apache-2.0API key requiredOfficial Microsoft Playwright MCP server, enabling LLMs to interact with web pages through structured accessibility snapshots
Install
npx -y @playwright/mcp@latestRequired environment variables
PLAYWRIGHT_MCP_SECRETSet in your MCP configclaude_desktop_config.json
{
"mcpServers": {
"microsoft-playwright-mcp": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
],
"env": {
"PLAYWRIGHT_MCP_SECRET": "<YOUR_PLAYWRIGHT_MCP_SECRET>"
}
}
}
}Add this to your Claude Desktop config file. Find it at ~/Library/Application Support/Claude/claude_desktop_config.json on macOS.
What this does
microsoft/playwright-mcp exposes a set of tools to Claude over the Model Context Protocol. After you add it to claude_desktop_config.json (snippet above) and restart Claude Desktop, those tools become callable inside any conversation. That makes it useful when you want Claude to reach into live web pages and browser sessions without copy-pasting context every turn.
Requirements
This server needs the following environment variables to be set before it can run:
PLAYWRIGHT_MCP_SECRET
Set these via the env object in your MCP config (see claude_desktop_config.json snippet above).
Common use cases
- •Navigate, fill forms, and scrape pages on demand from Claude
- •Test UI flows or capture screenshots as part of a debugging session
- •Reach data behind logins or interactive pages that simple HTTP fetch cannot
More TypeScript MCP servers
upstash/context7
📇 ☁️ - Up-to-date code documentation for LLMs and AI code editors.
agent-infra/mcp-server-browser
📇 🏠 - Browser automation capabilities using Puppeteer, both support local and remote browser connection.
GLips/Figma-Context-MCP
📇 🏠 - Provide coding agents direct access to Figma data to help them one-shot design implementation.
TypeScript MCP SDK
The official TypeScript SDK for Model Context Protocol servers and clients