I april 2025 dropper Microsoft stillePlaywright MCP, en ny server, der forbinder din AI agent (via MCP) direkte til Playwright browser API.
Hvad betyder det på ren engelsk?Your AI agent can now interact with real web pages using nothing but simple text instructions(Og det er gratis!)Klik på dette»« »Tag et screenshotAlt sammen uden at skrive en enkelt linje af browserautomationskode.
Ja, det er så stort, atPlaywright MCP has already become one of the most-starred MCP servers on GitHubOg det er kun lige begyndt. 🔥
I denne trinvise vejledning vil du se præcis, hvad denne server kan gøre, og hvordan du tilslutter den til en Python-baseret AI-arbejdsproces ved hjælp af OpenAI Agents SDK.
Hvorfor alle taler om Playwright MCP Server
Playwright af MCPer en MCP (Model Context Protocol) server, der giver dine AI-agenter alvorlige browser automation superkræfter via Playwright API.
Playwright af MCPBag kulisserne, i stedet for at stole på screenshots eller vision-tilpassede modeller, giver det LLM'er mulighed for at interagere med websider ved hjælp afstructured accessibility snapshotsDet betyder hurtigere, renere og langt mere LLM-venlige interaktioner.
I verden afAgentisk AI og Agentisk RAG arbejdsprocesserHvor man har brug forLæs, derKlik påogNavigererSom et menneske – det er en total game-change!
Og få dette: Selvom Microsoft ikke rullede det ud med meget fanfare (ingen flashy keynote, ingen blogpost blitz), er dette lavt nøglebibliotek allerede siddende på12K+ ⭐ on GitHub... og klatre.
Fordi det bare virker, og nedenfor er hvad der gør det specielt:
- Blazing hurtig og let: Bruger browserens tilgængelighedstræ, ikke langsom, klumpet pixel-baseret input.
- LLM-første design: Ingen brug for vision model. Det er bygget til strukturerede tekstgrænseflader.
- Deterministisk brug af værktøjer: Ingen gætværk, ingen tvetydighed - kun klare, pålidelige handlinger via flere værktøjer.
Plus, det kommer med en solid CLI og nyttige tilpasning flag for finjusteret browser kontrol.
Denne teknologi giver dig mulighed for at opbygge alvorlige agenter, der ikke kun hallucinerer, men faktiskdo stuffHjemmesiden
Hvordan man bruger Playwright MCP Server: Trin for trin Tutorial
Er du klar til at sætte Playwright MCP-serveren i gang? Følg nedenstående trin for at tråd det op i dit Python-script ved hjælp af OpenAI Agents SDK!
Forudsætninger
To follow along with this tutorial, make sure you’ve got your dev setup ready to roll:
- Python 3.10+ er installeret lokalt
- Node.js installeret og arbejder (den nyeste LTS-version er din ven) ️
- En API-nøgle fra en understøttet LLM-udbyder (OpenAI Agents SDK har brug for det, og vi anbefaler Gemini, fordi det er gratis at bruge)
Trin #1: Projektoprettelse og konfiguration
Denne Playwright + MCP integration bygger på, hvad vi dækker iMCP + OpenAI Agents SDK: Sådan opbygges en kraftfuld AI-agent.Så hvis du ikke har tjekket det ud endnu, gå skim det virkelig hurtigt.
MCP + OpenAI Agents SDK: Sådan opbygges en kraftfuld AI-agentMCP + OpenAI Agents SDK: Sådan opbygges en kraftfuld AI-agent
Men hvis du har travlt (vi får det),here’s the TL;DR version to get you rolling:
- Opret en projektmappe.
- Inside it, add a file named
agent.py
and set up a Python virtual environment. - Installer de nødvendige biblioteker med pip install openai-agents python-dotenv.
- Tilføj en .env-fil til din projektmappe og drop din Gemini API-nøgle inde i den på denne måde:
GEMINI_API_KEY=<your-gemini-api-key>
Du er nu låst, indlæst og klar til at begynde at bygge! 💥
Trin #2: Playwright MCP Server Integration
Få Playwright MCP-serveren op og køre inde i OpenAI Agents SDK med følgende kode:
async with MCPServerStdio(
name="Playwright MCP server",
params={
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
},
) as server:
# Create and initialize the AI agent with the running MCP server
agent = await create_mcp_ai_agent(server)
# Agent request-response cycle...
```python
This chunk of code basically runs the following shell command under the hood:
```bash
npx -y @playwright/mcp@latest --output-dir "./"
Det spinner op Playwright MCP-serveren ved hjælp af Node.js.--output-dir "./"
bit fortæller det, hvor man skal dumppe eksportfiler som skærmbilleder og PDF'er.
I️NoteHvis din agent ikke behøver at eksportere nogen filer, kan du hoppe over--output-dir
Flag fuldt ud. Det er valgfrit!
Trin #3: Komplet kode
Her er hvad dinagent.py
Dette er din fulde Open AI Agents SDK-bygget, Gemini-drevet, Playwright-integreret AI agent klar til at tage handling gennem MCP:
import asyncio
from dotenv import load_dotenv
import os
from agents import (
Runner,
Agent,
OpenAIChatCompletionsModel,
set_default_openai_client,
set_tracing_disabled
)
from openai import AsyncOpenAI
from agents.mcp import MCPServerStdio
# Load environment variables from the .env file
load_dotenv()
# Read the required secrets envs from environment variables
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
async def create_mcp_ai_agent(mcp_server):
# Initialize Gemini client using its OpenAI-compatible interface
gemini_client = AsyncOpenAI(
api_key=GEMINI_API_KEY,
base_url="https://generativelanguage.googleapis.com/v1beta/openai/"
)
# Set the default OpenAI client to Gemini
set_default_openai_client(gemini_client)
# Disable tracing to avoid tracing errors being logged in the terminal
set_tracing_disabled(True)
# Create an agent configured to use the MCP server and Gemini model
agent = Agent(
name="Assistant",
instructions="You are a helpful assistant",
model=OpenAIChatCompletionsModel(
model="gemini-2.0-flash",
openai_client=gemini_client,
),
mcp_servers=[mcp_server]
)
return agent
async def run():
# Start the Playwright MCP server via npx
async with MCPServerStdio(
name="Playwright MCP server",
params={
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--output-dir", "./"],
},
) as server:
# Create and initialize the AI agent with the running MCP server
agent = await create_mcp_ai_agent(server)
# Main REPL loop to process user requests
while True:
# Read the user's request
request = input("Your request -> ")
# Exit condition
if request.lower() == "exit":
print("Exiting the agent...")
break
# Run the request through the agent
output = await Runner.run(agent, input=request)
# Print the result to the user
print(f"Output -> \n{output.final_output}\n\n")
if __name__ == "__main__":
asyncio.run(run())
Boom. På samme måde har du bygget en fuldt funktionel AI-agent i ~75 linjer af Python.think through Gemini and act through Playwright️️
Trin #4: Test din Playwright-Powered AI Agent
Det er på tide at teste din agent ved at køre:
python agent.py
Her er hvad du kan se på startups:
Og så skyndte vi os med et sådant:
Visit hackernoon.com, click on "Trending Stories", wait for the page to fully load, and then export it as a PDF file named "hackernoon-trending-stories.pdf"
Resultatet af det?
af Yup,it nailed it!
Men det var hurtigt, så lad os nedbryde, hvad der skete:
- Agent lancerer en Playwright-drevet Chrome-instans.
- Det besøger hackernoon.com.
- Klik på linket “Trending Stories”. ️
- Venter på, at siden er fuldt indlæst.
- Eksporterer siden til en PDF-fil med navnet hackernoon-trending-stories.pdf, som blev vist i projektmappen.
Bemærk, at browserenHold åbentDet er perfekt, hvis du vil sende en anden opfordring og holde den aktuelle session levende!
Kan du ikke lide det og ønsker at afslutte sessionen og lukke browseren?
Now, close the browser.
Agent vil lukke browseren for dig.
Gå nu og tjek den genererede PDF-filhackernoon-trending-stories.pdf
Rul gennem din projektmappe, og du vil se:
Det er fantastisk! aclean, full-page export of Hackernoon’s trending page, links og alt, i skarpt PDF-format. Det er ægte browserautomation, drevet af din egen AI-agent.
Og det, folkens, erhow you build an AI agent with Playwright + MCPDenne ting er seriøst kraftfuld. lad det koge.
De skjulte begrænsninger af playwright MCP (og hvordan man outsmart dem)
Cool! du måske tænker:
"Okay, jeg har værktøjerne ... en LLM, der kan tænke, en MCP-server, der kan skrabe, og Playwright til at styre browseren.
"Okay, jeg har værktøjerne ... en LLM, der kan tænke, en MCP-server, der kan skrabe, og Playwright til at styre browseren.
Nej, ikke så hurtigt 🙂
Det er klart, at der kun ertwo core things AI agents need to thrive:
- Adgang til webdata i realtid (✅ håndteres af scraping-aktiverede MCP-integrationer)
- Evnen til at interagere med en browser (✅ indtaste Playwright MCP)
Men det er her, tingene bliver interessante...
Prøv at spørge din Playwright-drevet AI-agent noget som:
Visit g2.com, wait for the page to load, and take a screenshot
Og hvad sker der? det her!
Det navigerer til G2. ✅ venter. ✅ tager et skærmbillede. ✅ Men der er en fangst:the page is blocked behind a verification wall.
Og agent er endda høflig nok til at fortælle dig:
Your request -> Visit g2.com, wait for the page to load, and take a screenshot
Output ->
Okay, I navigated to g2.com, waited for 5 seconds, took a snapshot of the page, and then took a screenshot. However, the page is showing a verification requirement. I am unable to complete the request.
Nope, det er ikke "game over" for os som mennesker. men måske ... det erSpillet overFor dendefault Playwright browser setup
Så hvad gik galt?Her er emnet:Vanilla Chrome!♂️
Den browser Playwright kontrollerer ud af boksen er ikke designet til at undgå blokeringer. Det lækker signaler overalt, såsom automatisering flag, mærkelige konfigurationer, og så videre....To the point that most websites—jsut like G2 —instantly know it’s a bot
Hvad er løsningen? a.Playwright-compatible infrastructureOpbygget til at understøtte agentiske arbejdsprocesser påremote browsers that Don ikke get blockedVi taler om:
Don ikke- Uendeligt omfattende ️
- Arbejder hovedløst eller hovedløst 👁️ mere
- Drives af et proxy-netværk med 100M+ bolig-IP'er
- Designet til at blande sig ind som en rigtig bruger ️ ♂️
Er du nysgerrig efter, hvad dette magiske værktøj er?Bright Data’s Agent Browserdin skjulte, skalerbare, AI-venlige browser stack:
Brug af Bright Data’s Agent Browser
Hvis du spekulerer på, hvordan du tilslutter det til din Playwright MCP-installation, er det lige så simpelt som at passere et CDP-endpoint:
async with MCPServerStdio(
name="Playwright MCP server",
params={
"command": "npx",
"args": [
"-y", "@playwright/mcp@latest",
# other arguments...
"--cdp-endpoint", "<YOUR_BRIGHT_DATA_AGENT_BROWSER_CDP_URL>"
],
},
) as server:
# Your agent logic here...
ogjust like that,Ingen flere blokke! ingen flere botvægge. ingen mere triste Gru memes.
klar til at opbygge agentiske arbejdsprocesser, derFaktiskArbejde på live web?Bright Data’s Agent Browser has your back!
Se det i aktion i en anden integration her:
Afsluttende tanker
Nu ved du, hvordan du overoplader enhver AI-agent bygget med OpenAI Agents SDK - uanset om det kører på GPT, Gemini eller hvad der kommer næste - ved at tilslutte det til Playwright MCP-serveren for reel browserkontrol.
Vi viste også, hvordan man kan niveauere endnu mere ved at overvinde browserblokke ved hjælp af Bright Data'sAgent Browserkun et stykke af den kraftfulde AI-infrastrukturvi er bygget til at understøtte virkelige AI-arbejdsprocesser i stor skala.
Hos Bright Data er vores mission enkel: Gør AI tilgængelig for alle, overalt. Så indtil næste gang – bliv nysgerrig, bliv modig og fortsæt med at bygge fremtiden for AI.