Claude Code Browser Setup: OpenAI SDK + Playwright MCP

Adding a live browser to an LLM agent usually involves a messy mix of custom drivers and brittle API calls, but using the Model Context Protocol (MCP) with Playwright simplifies the architecture significantly. I've been trying to get an agent to handle actual web navigation—not just scraping static HTML—using the OpenAI Agents SDK.

The core issue is that LLMs can't "see" the DOM unless you feed it to them in a way that doesn't blow through the token window. By integrating the Playwright MCP server, the agent gets a set of tools to interact with the browser (clicking, typing, navigating) without me having to write a custom wrapper for every single action.

Here is the basic setup for the deployment:

1. Install the Playwright MCP server to handle the browser instance.
2. Configure the OpenAI Agents SDK to recognize the MCP tools.
3. Define the agent's system prompt to ensure it understands how to interpret the browser's state.

For those trying to implement this from scratch, the logic follows this flow:

# Install the MCP server for Playwright
npm install -g @modelcontextprotocol/server-playwright

# Example logic for connecting the agent to the MCP toolset
from openai_agents import Agent

# The agent is initialized with tools provided by the Playwright MCP
browser_agent = Agent(
    name="WebExplorer",
    instructions="You have access to a browser. Navigate to pages and extract data accurately.",
    tools=["playwright_navigate", "playwright_click", "playwright_screenshot"]
)

One thing I noticed during my deep dive: the agent occasionally gets stuck in a loop if a page has a complex overlay or a cookie consent banner that blocks the target element. I had to refine the prompt engineering to tell the agent to specifically look for "close" buttons or "accept" modals before attempting the primary task.

It's a much more robust AI workflow than simple requests/BeautifulSoup setups because the agent can actually handle JavaScript-heavy SPAs.