Playwright CLI vs MCP - a new tool for your coding agent
Video

Playwright CLI vs MCP - a new tool for your coding agent

2026.02.09
·YouTube·by 이호민
#CLI#Coding Agent#LLM#MCP#Playwright

Key Points

  • 1Playwright CLI is introduced as a new tool offering significant token efficiency by saving data to disk, allowing a coding agent to decide what to send to the LLM, unlike Playwright MCP which sends everything to the LLM's context.
  • 2Optimized for use with coding agents like Claude Code or GitHub Copilot, CLI excels in coding and testing scenarios due to its superior context management and broader default capability exposure.
  • 3In contrast, Playwright MCP, while potentially consuming more tokens, is better suited for generic agents or authoring agentic loops where the LLM directly handles all output and interaction.

This paper introduces Playwright CLI, a novel tool within the Playwright ecosystem, designed to enhance token efficiency when interacting with Large Language Models (LLMs) for browser automation tasks, particularly in the context of coding agents. It primarily contrasts Playwright CLI with Playwright MTP (Multi-Tool Protocol), highlighting their distinct methodologies, capabilities, and target use cases.

The core problem addressed is the significant consumption of LLM context window tokens by browser automation operations, especially when dealing with large web pages or binary data like screenshots.

Playwright CLI (Command Line Interface):
Playwright CLI adopts a token-efficient methodology by offloading data storage and retrieval to the local file system, rather than directly pushing all generated data into the LLM's context window. When a command, such as navigating to a page or taking a screenshot, generates data (e.g., accessibility snapshots, image bytes), Playwright CLI saves this information to disk. A separate "coding agent" (e.g., Claude Code, GitHub Copilot), which has access to the local workspace, then makes a deliberate decision on whether to load specific data from the disk into the LLM's context. This means the LLM only consumes tokens for data it explicitly requests and needs to process, thereby preventing unnecessary context consumption. For example, when a screenshot is taken, its bytes are saved to disk, not immediately sent to the LLM, unless the coding agent later decides to read it. This approach significantly reduces token usage; a demonstrated task involving navigation, searching, and screenshotting consumed only 26.8k tokens. Playwright CLI is designed to expose the full spectrum of Playwright's capabilities without the context limitations faced by MTP, as the data management is externalized. It is skill-based, interoperable with other skill-based tools, and is headless by default, suitable for background agent execution.

Playwright MTP (Multi-Tool Protocol):
In contrast, Playwright MTP operates by immediately pushing all generated output and responses directly into the LLM's context window. When MTP navigates to a page, it generates an accessibility snapshot of the entire page's Document Object Model (DOM), which, for complex pages (e.g., playwright.dev), can be very large and consume substantial tokens, often exceeding the maximum context window. Similarly, when taking a screenshot, the raw image bytes are directly transmitted to the LLM's context. This "everything to LLM" approach leads to high token consumption; the same task that Playwright CLI performed in 26.8k tokens consumed 114k tokens with MTP. While Playwright MTP possesses similar underlying capabilities, many commands are often disabled by default to mitigate context overflow. MTP is a stricter standard, designed to work with any generic agent, where the LLM directly handles all responses. It supports multiple browser instances and its efficiency can be manually configured. Historically, MTP has been the default.

Key Distinction and Use Cases:
The fundamental difference lies in how data from browser interactions is managed and exposed to the LLM. Playwright CLI externalizes this data management to a coding agent, enabling significant token efficiency. Playwright MTP internalizes all data within the LLM's context, leading to higher token consumption.

  • Use Playwright CLI: When working with a "coding agent" (e.g., Claude Code, GitHub Copilot) that can interact with the file system and manage its workspace, especially for tasks involving coding, testing, and other scenarios where token efficiency is paramount.
  • Use Playwright MTP: When authoring an agentic loop with a "generic agent" that expects a standard tool interface and where the LLM is expected to directly process all responses and contextual information.