DEV Community

Cover image for Connecting an LLM Agent to a Real Browser With Playwright MCP
Basavaraj SH
Basavaraj SH

Posted on

Connecting an LLM Agent to a Real Browser With Playwright MCP

Browser-capable agents have gone from research demos to something you can wire up in an afternoon. If you've wanted an AI agent that actually clicks, reads, and navigates - not just simulates it - Playwright MCP is the practical path right now.

The Setup: Playwright MCP as the Agent's Eyes and Hands

MCP (Model Context Protocol) is a standardized interface that enables LLM agents to call external tools like file access, APIs, or in this case, a live browser. Playwright is a well-established browser automation library; the Playwright MCP server wraps it so an agent can send natural-language-style instructions that get translated into real browser actions: navigate, click, fill a form, extract text.

The agent operates a real Chromium (or Firefox) instance, reading rendered pages and handling JavaScript-heavy sites, and can adapt mid-task if a page changes - because it's reading the live DOM, not a static response.

Real Example: Wiring It Up With OpenAI Agents SDK

Here's a minimal working scaffold using the OpenAI Agents SDK and the Playwright MCP server:

from agents import Agent, Runner
from agents.mcp import MCPServerStdio

async def main():
 playwright_server = MCPServerStdio(
 command="npx",
 args=["@playwright/mcp@latest", "--headless"]
 )
 async with playwright_server as browser_tool:
 agent = Agent(
 name="BrowserAgent",
 instructions="You are a web research assistant. Navigate pages and extract information accurately.",
 mcp_servers=[browser_tool],
 model="gpt-4o"
 )
 result = await Runner.run(
 agent,
 input="Go to news.ycombinator.com and return the top 3 post titles."
 )
 print(result.final_output)
Enter fullscreen mode Exit fullscreen mode

The MCPServerStdio call spins up the Playwright server as a subprocess. The agent receives browser-control tools automatically - no manual tool definitions needed. The --headless flag keeps it serverless-friendly. Swap in any task via the input string: form filling, data extraction, multi-step navigation.

One practical note: run this in an environment where npx and Node.js are available alongside your Python runtime. A Docker image works cleanly here.

Key Takeaways

  • Playwright MCP gives an LLM agent a fully rendered browser session, not just HTTP responses - making it capable on JavaScript-heavy and auth-gated pages.
  • MCP as a protocol separates the agent logic from the tool implementation, so you can swap browser backends or add other MCP servers (filesystem, database) without rewriting agent code.
  • The OpenAI Agents SDK handles tool registration automatically when you pass mcp_servers - the surface area to learn is smaller than it looks.

Have you hit a case where browser-capable agents broke down on a specific site type (single-page apps, captchas, login flows) - and what was your workaround?


Sources referenced: Towards Data Science - "How to Give an LLM Agent a Browser", OpenAI Agents SDK documentation, Playwright MCP GitHub

Top comments (2)

Collapse
 
julianneagu profile image
Julian Neagu

I’ve found browser agents become much more useful once they can see the real page state. Static HTML tools hit a wall pretty fast with modern apps.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.