> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/microsoft/playwright-mcp/llms.txt
> Use this file to discover all available pages before exploring further.

# Playwright MCP

> Browser automation for AI agents through the Model Context Protocol

<div
  style={{
background: 'linear-gradient(135deg, #cb0404 0%, #e37b84 100%)',
borderRadius: '24px',
padding: '48px 32px',
marginBottom: '32px',
color: 'white',
boxShadow: '0 10px 20px rgba(203, 4, 4, 0.3)'
}}
>
  <h1 style={{ fontSize: '56px', fontWeight: '700', marginBottom: '16px', color: 'white' }}>
    Playwright MCP
  </h1>

  <p style={{ fontSize: '20px', marginBottom: '24px', color: 'white', opacity: 0.95 }}>
    A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright through structured accessibility snapshots.
  </p>

  <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
    <a
      href="/quickstart"
      style={{
  background: '#fbbf24',
  color: '#000000',
  padding: '12px 24px',
  borderRadius: '24px',
  fontWeight: '600',
  textDecoration: 'none',
  display: 'inline-block'
}}
    >
      Get Started
    </a>

    <a
      href="https://github.com/microsoft/playwright-mcp"
      style={{
  background: 'transparent',
  color: 'white',
  padding: '12px 24px',
  borderRadius: '24px',
  fontWeight: '600',
  textDecoration: 'none',
  border: '2px solid white',
  display: 'inline-block'
}}
    >
      View on GitHub
    </a>
  </div>
</div>

## Why Playwright MCP?

Playwright MCP enables AI agents to interact with web pages through structured accessibility data instead of screenshots, making browser automation **fast**, **deterministic**, and **LLM-friendly**.

<CardGroup cols={3}>
  <Card title="Fast & Lightweight" icon="bolt">
    Uses Playwright's accessibility tree, not pixel-based input. No vision models needed.
  </Card>

  <Card title="Deterministic" icon="check-circle">
    Avoids ambiguity common with screenshot-based approaches through structured data.
  </Card>

  <Card title="LLM-Friendly" icon="robot">
    Operates purely on structured data that LLMs can understand natively.
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={2}>
  <Card title="Comprehensive Automation" icon="browser" href="/tools/overview">
    Navigate, click, type, evaluate JavaScript, and more through a rich set of browser automation tools.
  </Card>

  <Card title="Multiple MCP Clients" icon="plug" href="/installation">
    Works with VS Code, Cursor, Claude Desktop, Windsurf, Goose, and any MCP-compatible client.
  </Card>

  <Card title="Flexible Configuration" icon="gear" href="/guides/configuration">
    Configure browser options, timeouts, network filtering, and more through a comprehensive config system.
  </Card>

  <Card title="Advanced Capabilities" icon="wand-magic-sparkles" href="/api/capabilities">
    Optional PDF generation, coordinate-based interactions, and test assertion tools.
  </Card>
</CardGroup>

## Quick Example

Here's how simple it is to get started with Playwright MCP:

<CodeGroup>
  ```json VS Code theme={null}
  {
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": ["@playwright/mcp@latest"]
      }
    }
  }
  ```

  ```json Claude Desktop theme={null}
  {
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": ["@playwright/mcp@latest"]
      }
    }
  }
  ```

  ```bash Cursor theme={null}
  npx @playwright/mcp@latest
  ```
</CodeGroup>

Once configured, you can ask your AI agent to:

* Navigate to websites and capture page snapshots
* Click buttons, fill forms, and interact with elements
* Take screenshots or generate PDFs
* Verify page content and run tests
* Execute custom JavaScript on pages

## Get Started

<CardGroup cols={2}>
  <Card title="Introduction" icon="book-open" href="/introduction">
    Learn about Playwright MCP and how it works
  </Card>

  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get up and running in minutes
  </Card>

  <Card title="Installation Guide" icon="download" href="/installation">
    Install for your MCP client
  </Card>

  <Card title="Configuration" icon="sliders" href="/guides/configuration">
    Configure advanced options
  </Card>
</CardGroup>

## Explore Documentation

<CardGroup cols={3}>
  <Card title="Core Concepts" icon="lightbulb" href="/concepts/mcp-overview">
    Understand MCP and browser automation fundamentals
  </Card>

  <Card title="Tools Reference" icon="toolbox" href="/tools/overview">
    Browse all available automation tools
  </Card>

  <Card title="API Reference" icon="code" href="/api/overview">
    Explore the programmatic API
  </Card>
</CardGroup>