Connecting an LLM Agent to a Real Browser With Playwright MCP
DEV Community

Connecting an LLM Agent to a Real Browser With Playwright MCP

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)

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

Comments

No comments yet. Start the discussion.