What Is Playwright MCP and How Does It Work?

Playwright MCP connects an AI assistant to the Playwright browser engine, so a plain prompt in your editor can open sites, read pages, and fill forms automatically. This guide shows how to set it up in VS Code, use it with your logged-in Chrome session, and run the same workflow for free with local models.

What Is Playwright MCP and What Does It Do?

Playwright MCP is a Model Context Protocol (MCP) server that lets an AI assistant control a browser through Playwright, Microsoft's open-source browser automation engine. The MCP layer, defined by the Model Context Protocol specification, gives models such as ChatGPT, Gemini, or an editor agent a set of tools: navigate to a page, click, type, close a tab, and read page content.

The practical result is that a natural-language prompt can perform what used to require a test script. In the workflow demonstrated in this article, the speaker pointed the agent at a Google-style talk-submission form and at his own Sessionize speaker profile, and the assistant filled every repeated field automatically, only asking for data the source site did not contain, such as a phone number.

The video where this workflow is demonstrated was published by Erick Wendel on November 11, 2025, and shows the tool used from a user's perspective rather than as a testing framework. You do not need to be a programmer to run it; writing a good prompt matters more than writing code.

How the Setup Works in VS Code

The fastest way to start is inside an editor with an AI agent panel. In Visual Studio Code, open the agent view, click the tools icon, and add the Playwright MCP entry to the MCP configuration JSON, which you can copy from the microsoft/playwright-mcp repository. After saving, the server starts and lists its available tools: navigate, click, snapshot page state, and more.

Once the server is running, the model you select in the chat panel decides when to call the Playwright tools. In the demonstration, GPT-5 planned a sequence of navigation and click commands after receiving a single prompt. The editor asks for permission on the first runs; granting "always allow" for the workspace stops the per-command prompts.

The same MCP server configuration works in other AI-first editors and MCP-capable clients, because MCP is a protocol, not a feature of one editor. Any client that speaks MCP can load the same server definition.

Using Your Own Chrome Session With the Extension

By default, the MCP server drives a fresh browser instance with no cookies or logins. For pages behind authentication, the Playwright MCP documentation describes an extension mode: install the Playwright MCP Bridge extension in Chrome and add the --extension flag to the server configuration.

With extension mode enabled, the AI operates your actual browser, with your existing tabs and logged-in sessions. The demonstration showed the assistant opening ericwendel.com inside the user's own Chrome window and reading page after page to summarize the content.

This matters for real automation. Reading a LinkedIn inbox or a members-only dashboard normally means handling credentials in a script. With extension mode, you log in once yourself, and the agent simply uses the session that is already open.

Filling a Real Talk-Submission Form End to End

The core demonstration targets a common problem: event organizers send a form, and the speaker retypes the same name, biography, and links for every event, changing only the talk title. The agent was given two URLs and one instruction set: read the Sessionize profile, pick a talk in Portuguese, fill the form, and do not press submit.

The run showed the typical shape of an agent-driven session:

1. The agent opened the form and inventoried every required field.
2. It navigated to Sessionize, switched the profile to Portuguese, and extracted the biography, talk titles, and links.
3. It filled the target form, hit one error, recovered after a follow-up prompt, and reported what was missing: phone and email, which the source site did not list.
4. After the user supplied those two values in chat, it completed the form and, on a second pass, cleared it and refilled everything from a different talk in one command.

Two details stand out. First, the agent counted the speaker's prior talks from Sessionize to answer the "how many events have you spoken at?" question without being told. Second, when asked to produce a reusable artifact, the agent can generate a Node.js script that reproduces the fill without spending further tokens on every future submission. That is the bridge from a one-off demo to a durable automation.

Running the Same Workflow Free With Local Models

The Claude Code workflow consumes API tokens. The alternative shown in the video is fully local: Ollama, a tool for running open-weight models on your own machine, plus an open-source desktop MCP client that can load the same Playwright MCP server.

The hardware was a Mac with an M2 chip and 32 GB of RAM, running while screen recording and dozens of tabs were open. The local stack used OpenAI's open-weight gpt-oss 20B model, released in August 2025, alongside a 30-billion-parameter coding model for generating JavaScript without any token cost.

In the test, the local model connected through the same Chrome extension, browsed the site, and returned the requested summary of talks by country. The result was close to the cloud run but required more prompt refinement. A 20-billion-parameter model hallucinates more often than a frontier model, and the speaker said so directly. The trade is money and privacy versus accuracy and polish: local execution is free and keeps browsing on your machine, while a large Claude Code handles ambiguous pages with fewer corrections.

Limits and Practical Tips From the Demonstration

The demo was not flawless, and the failure mode is instructive. On the first fill attempt, the agent completed only the title field and then errored; it recovered after the user asked it to check what was missing, using the conversation history instead of re-crawling both sites. First-run success depended heavily on how granular the prompt was.

Practical guidance drawn from the run:

• Break the task into steps: inventory the fields, gather the source data, then fill.
• Explicitly forbid destructive actions, such as "do not press submit", until you have validated the result.
• Expect questions for any field your source site cannot answer, and answer them in chat; the agent keeps its memory across turns.
• After a successful session, ask for a generated script so the next repetition costs no tokens at all.

Permission handling is also a real consideration. Granting "always allow" in a workspace is convenient, but it means the agent executes browser commands without per-step review. Watch the browser window during a first run on any site you care about.

FAQ

• Do I need to know how to code to use Playwright MCP? No. The workflow shown runs entirely from prompts in an editor chat or an MCP desktop client. Code knowledge helps when you ask the agent to generate a reusable Node.js script at the end, but the browsing and filling themselves require no programming.

• Does Playwright MCP work with sites that require login? Yes, through extension mode. You install the Playwright MCP Bridge extension in Chrome and add the --extension flag to the server config, so the agent uses your real browser with your existing logged-in sessions instead of a clean profile.

• Can I run it without paying for API tokens? Yes. The video demonstrates the same MCP server driven by local models served with Ollama on a 32 GB Mac, including gpt-oss 20B. Expect more prompt refinement and more hallucination risk than with a frontier Claude Code.

• Is this only useful for automated testing? No. Playwright is best known as a testing engine, but via MCP it becomes a general browser agent. The demonstrated use cases were form filling, site summarization, and generating repeatable automation scripts, none of which are tests.

• Which editors support this setup? Any client that speaks the Model Context Protocol. The demonstration used VS Code's agent panel and a separate open-source MCP desktop app; AI-first editors that support MCP servers can load the same configuration.

Turn Your Own Video Walkthroughs Into Articles

A 25-minute screen recording like the one behind this walkthrough contains real, specific knowledge: setup steps, failure modes, and the judgment calls that only surface during a live demo. That knowledge usually stays locked inside the video, invisible to anyone searching for the answer in text.

If you publish tutorials, interviews, or technical demos on YouTube, Skala Blog turns that video into a written article: paste the URL, get a transcription, and generate a structured, publishable draft. The setup steps and prompt tips you demonstrated on screen become a page that readers and search engines can actually find.

Source video