Playwright MCP Server

Playwright MCP Server

Control browsers through Claude using Playwright's automation engine.

The Playwright MCP Server connects Claude to Playwright's browser automation capabilities. Navigate pages, capture screenshots, and interact with web applications through natural language.

What Does the Playwright MCP Server Do?

The Playwright MCP Server exposes Playwright's browser automation capabilities to Claude through the Model Context Protocol.

Core capabilities:

• Browser Control — Launch and control Chromium, Firefox, or WebKit browsers
• Navigation & Interaction — Navigate to URLs, click elements, fill forms, and scroll pages
• Page Inspection — Retrieve page content, structured accessibility snapshots, and metadata
• Screenshot Capture — Take screenshots when needed for visual verification

The Playwright MCP Server is maintained by Microsoft in the playwright-mcp repository.

How to Install the Playwright MCP Server

Installation paths differ for Claude Code and Claude Desktop.

For Claude Code

Install using Claude Code's MCP management:

claude mcp add playwright npx @playwright/mcp@latest

This adds the Playwright MCP Server to your Claude Code configuration. The server runs automatically when needed.

For Claude Desktop

Add the server to your claude_desktop_config.json file:

Configuration file locations:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Configuration structure:

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

Restart Claude Desktop after saving the configuration file.

Installation notes:

• Requires Node.js 18+ and npx
• Playwright downloads browser binaries automatically on first use
• No additional authentication or API keys required

Configuring Playwright MCP in claude_desktop_config.json

The Claude Desktop setup shown above is separate from the Claude Code installation path. Claude Code uses its own configuration system managed through claude mcp commands.

Configuration notes for Claude Desktop:

• The command field must point to npx or the full path if npx is not in your PATH
• The -y flag auto-confirms package execution
• @latest ensures you get the most current version
• No environment variables are required for basic usage

Playwright MCP Use Cases & Examples

Example workflows that become possible with the Playwright MCP Server.

Capture Screenshots

Example prompt:

> "Navigate to https://example.com and take a full-page screenshot."

Claude can use Playwright to capture page screenshots for visual verification.

Navigate and Interact

Example prompt:

> "Go to https://admin.example.com, fill the search box with 'invoice-2024', and click Search."

Claude can execute navigation and interaction sequences through browser automation.

Inspect Page Elements

Example prompt:

> "On https://example.com, describe the main navigation menu structure."

Claude can inspect page content and elements using structured accessibility snapshots.

Browser Automation Workflows

Example prompt:

> "Launch a browser, go to https://myapp.com/dashboard, and tell me what sections are visible."

Claude can automate browser tasks through Playwright's API.

Note: These are example use cases showing what Claude can help with using the Playwright MCP Server. Actual results depend on page structure and Playwright's current API capabilities.

Use Playwright MCP in Verdent

Verdent includes streamlined access to browser automation capabilities. This is Verdent's platform-level integration flow, not the default setup path from the official Playwright MCP documentation.

Browser automation and screenshot workflows are available immediately in Verdent projects without manual MCP configuration.

Start Using Playwright in Verdent