> ## 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.

# Introduction

> Learn about Playwright MCP and how it enables LLMs to interact with web pages through structured accessibility snapshots

## What is Playwright MCP?

Playwright MCP is a Model Context Protocol (MCP) server that provides browser automation capabilities using [Playwright](https://playwright.dev). This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

## Key Features

<CardGroup cols={3}>
  <Card title="Fast and Lightweight" icon="gauge-high">
    Uses Playwright's accessibility tree, not pixel-based input
  </Card>

  <Card title="LLM-Friendly" icon="brain">
    No vision models needed, operates purely on structured data
  </Card>

  <Card title="Deterministic" icon="check-circle">
    Avoids ambiguity common with screenshot-based approaches
  </Card>
</CardGroup>

## Why Playwright MCP?

Traditional browser automation for LLMs often relies on screenshots and vision models to understand page content. This approach has several drawbacks:

* **Token-intensive**: Screenshots consume significant context window space
* **Non-deterministic**: Visual interpretation can be ambiguous
* **Requires vision models**: Adds complexity and cost

Playwright MCP solves these problems by leveraging Playwright's **accessibility tree** - a structured representation of web page content that's:

* Compact and efficient
* Deterministic and unambiguous
* Perfect for text-based LLMs

## Playwright MCP vs Playwright CLI

This package provides an MCP interface into Playwright. If you are using a **coding agent**, you might benefit from using the [CLI+SKILLS](https://github.com/microsoft/playwright-cli) instead.

<Accordion title="When to use Playwright CLI">
  **CLI + SKILLS** is better suited for modern **coding agents** because:

  * CLI invocations are more token-efficient
  * Avoids loading large tool schemas and verbose accessibility trees
  * Allows agents to act through concise, purpose-built commands
  * Better for high-throughput agents balancing browser automation with large codebases

  [Learn more about Playwright CLI with SKILLS](https://github.com/microsoft/playwright-cli)
</Accordion>

<Accordion title="When to use Playwright MCP">
  **MCP** remains relevant for specialized agentic loops that benefit from:

  * Persistent state and continuous browser context
  * Rich introspection and iterative reasoning over page structure
  * Exploratory automation and self-healing tests
  * Long-running autonomous workflows where maintaining context outweighs token costs
</Accordion>

## System Requirements

<Note>
  Ensure your system meets these requirements before installing Playwright MCP.
</Note>

* **Node.js**: Version 18 or newer
* **MCP Client**: VS Code, Cursor, Windsurf, Claude Desktop, Goose, or any other MCP-compatible client
* **Operating System**: Windows, macOS, or Linux

## How It Works

Playwright MCP provides a suite of tools that allow LLMs to:

1. **Navigate** to web pages
2. **Capture** accessibility snapshots of page content
3. **Interact** with elements through structured references
4. **Execute** JavaScript and Playwright code
5. **Monitor** network requests and console messages

All interactions are based on the accessibility tree, making them fast, reliable, and LLM-friendly.

## Next Steps

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get up and running with your first automation in minutes
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Complete installation guide for all MCP clients
  </Card>
</CardGroup>