Playwright MCP: Browser Automation with AI (Complete Setup Guide)

Updated: May 18, 2026 — added the hosted Playwright MCP option (one-click cloud deploy, live URL + bearer token).

What is Playwright MCP? Playwright MCP is an official Model Context Protocol server from Microsoft that lets AI assistants (Claude, Cursor, GitHub Copilot, etc.) control a real browser. Instead of sending screenshots to a vision model, it uses accessibility snapshots—a structured representation of the page (roles, names, states)—so the AI can navigate, click, type, and extract data reliably and without expensive image APIs.

This guide covers both paths: the hosted route (~30 seconds, no install) for anyone who wants to get started immediately, and the local STDIO route for teams that need full control or want to run on their own hardware.

Why Playwright MCP?

What You Can Do With Playwright MCP

• Generate Playwright tests: Ask the AI to explore a URL and produce test code (e.g. "Generate a Playwright test that logs in and checks the dashboard").
• Automate tasks: Fill forms, click through flows, download files, or extract data from pages.
• Web scraping & summarization: Navigate to a page, take a snapshot or screenshot, and have the AI summarize or extract structured data.
• Explore site structure: "List all links on this page" or "What forms are on this site?" using the accessibility snapshot.

Prerequisites

Step 1: Install Playwright Browsers

The Playwright MCP server drives real browsers. Install them once (if you haven't already):

npx playwright install

This installs Chromium, Firefox, and WebKit. You can also install only Chromium with npx playwright install chromium to save disk space.

Step 2: Add Playwright MCP to Your Client

The official npm package is @playwright/mcp. Add it to your MCP client config.

Claude Desktop

Edit your Claude Desktop config (e.g. ~/Library/Application Support/Claude/claude_desktop_config.json on macOS) and add:

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

Cursor

In Cursor: Settings → Tools & MCP → Add MCP server. Use:

Restart Claude Desktop or Cursor after changing the config.

Step 3: Verify It Works

In your AI chat, try:

• "What Playwright tools do you have?" — You should see tools like browser_navigate, browser_snapshot, browser_click, browser_take_screenshot, browser_fill_form, browser_type.
• "Open https://example.com and give me a snapshot of the page." — The AI will use the MCP server to navigate and return the accessibility snapshot.

Example Prompts

• "Go to https://example.com, take a snapshot, and list all the headings and links."
• "Generate a Playwright test script that navigates to [URL], clicks the login button, and fills the email and password fields."
• "Open [product page URL], extract the product name and price, and return them as JSON."

Important Notes

Package and repo references:

• npm: @playwright/mcp (npmjs.com/package/@playwright/mcp)
• GitHub: github.com/microsoft/playwright-mcp
• Docs: playwright.dev/agents, Browser Automation

Related Content

• Build an AI GitHub PR Reviewer
• How to Set Up MCP in Claude Desktop
• Awesome MCP Servers List

Frequently Asked Questions