A l'abril de 2025, Microsoft va cessar silenciosamentPlaywright MCP, un nou servidor que connecta el vostre agent d'IA (via MCP) directament a l'API del navegador Playwright.
Què vol dir això en anglès clar?Your AI agent can now interact with real web pages using nothing but simple text instructions(i de forma gratuïta!)Clica això“””Feu una captura de pantallaTot això sense escriure una sola línia de codi d'automatització del navegador.
Això és tan gran quePlaywright MCP has already become one of the most-starred MCP servers on GitHubI només acaba de començar.
En aquesta guia pas a pas, veureu exactament què pot fer aquest servidor i com connectar-lo a un flux de treball d'IA basat en Python utilitzant l'OpenAI Agents SDK.
Per què tothom parla del servidor MCP de Playwright
Dissenyador MCPés un servidor MCP (Model Context Protocol) que dóna als seus agents d'IA seriosos superpoders d'automatització del navegador a través de l'API de Playwright.
Dissenyador MCPDarrere dels escenaris, en lloc de dependre de captures de pantalla o models ajustats a la visió, permet als LLM interactuar amb pàgines web utilitzantstructured accessibility snapshotsAixò significa interaccions més ràpides, més netes i molt més amigables amb LLM.
En el món deFluxos de treball d'AI agent i RAG agentAllà on necessitaLlegir,Clica, iNavegacióCom un humà, això és un canvi total de joc!
I aconsegueix això: tot i que Microsoft no l'ha llançat amb molta fanfare (sense clau brillant, sense blitz de publicació de bloc), aquesta biblioteca de baixa clau ja està asseguda12K+ ⭐ on GitHub...i l’escalada
Perquè només funciona, i a continuació hi ha el que el fa especial:
- Blazing ràpid i lleuger: Utilitza l'arbre d'accessibilitat del navegador, no l'entrada lenta i basada en píxels.
- Disseny LLM primer: No hi ha necessitat de model de visió. Està construït per a interfícies de text estructurades.
- Utilització d’eines deterministes: No hi ha endevinalla, no hi ha ambigüitat, només accions clares i fiables a través de diverses eines.
A més, ve amb un CLI sòlid i banderes de personalització útils per al control del navegador ajustat.
Aquesta tecnologia permet construir agents seriosos que no només al·lucinen, sinó que en realitatFes cosesA la xarxa.
Com utilitzar el servidor MCP de Playwright: tutorial pas a pas
Preparat per posar en acció el servidor MCP de Playwright? Segueix els passos a continuació per filfer-lo al teu script de Python utilitzant l'OpenAI Agents SDK!
Prerequisits
Per seguir amb aquest tutorial, assegureu-vos que teniu la vostra configuració de desenvolupador llesta per rodar:
- Python 3.10+ instal·lat localment
- Node.js instal·lat i funcionant (l'última versió LTS és el teu amic) ️
- Una clau d'API d'un proveïdor LLM recolzat (l'OpenAI Agents SDK ho necessita, i recomanem Gemini perquè és gratuït d'utilitzar)
Pas #1: Configuració i configuració del projecte
Aquesta integració Playwright + MCP es basa en el que hem cobert enMCP + OpenAI Agents SDK: Com construir un potent agent d'IA.Així que si encara no ho heu comprovat, aneu a escombrar-ho realment ràpid.
MCP + OpenAI Agents SDK: Com construir un potent agent d'IAMCP + OpenAI Agents SDK: Com construir un potent agent d'IA
Però si estàs en una pressa (ho aconseguim),here’s the TL;DR version to get you rolling:
- Crear una carpeta de projecte.
- A l'interior, afegeix un arxiu anomenat agent.py i configura un entorn virtual de Python.
- Instal·lar les biblioteques necessàries amb pip instal·lar openai-agents python-dotenv.
- Afegiu un arxiu .env a la carpeta del projecte i, dins d'ella, deixeu caure la clau de l'API Gemini així:
GEMINI_API_KEY=<your-gemini-api-key>
Ara estàs tancat, carregat i a punt per començar a construir! 💥
Pas #2: Integració de Playwright MCP Server
Obteniu el servidor MCP de Playwright i executeu-lo dins de l'OpenAI Agents SDK amb el codi següent:
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 "./"
Es gira al servidor MCP de Playwright utilitzant Node.js.--output-dir "./"
bit li diu on descarregar els arxius d'exportació, com ara captures de pantalla i PDF.
El diaNoteSi l'agent no necessita exportar cap arxiu, pot saltar el--output-dir
És una opció, és una opció!
Pas #3: El codi complet
Aquí teniu el vostreagent.py
file should look like once everything’s wired up and humming. This is your full Open AI Agents SDK-built, Gemini-powered, Playwright-integrated AI agent ready to take action through 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())
Així mateix, heu construït un agent d'IA completament funcional en ~75 línies de Python.think through Gemini and act through Playwright️
Pas #4: Testeu el vostre agent d'IA impulsat per Playwright
És hora de provar el seu agent executant:
python agent.py
Això és el que veureu a Startup:
I ara ho fa amb una promptura com aquesta:
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"
I el resultat?
I és que,it nailed it!
Però això va ser ràpid, així que anem a trencar el que va passar:
- L'agent llança una instància de Chrome amb Playwright.
- Visita a hackernoon.com
- Feu clic a l’enllaç “Tendències” ️
- Espera que la pàgina es carregui completament.
- Exporta la pàgina a un arxiu PDF anomenat hackernoon-trending-stories.pdf, que va aparèixer a la carpeta del projecte.
Cal tenir en compte que el navegadorQueda obertaAixò és perfecte si voleu enviar un altre prompt i mantenir viva la sessió actual!
No t'agrada i vols acabar la sessió i tancar el navegador?
Now, close the browser.
L'agent tancarà el navegador per a vostè.
Ara, aneu a comprovar el fitxer PDF generathackernoon-trending-stories.pdf
Descarregueu-lo a través de la carpeta del vostre projecte i veureu:
És fantàstic! aclean, full-page export of Hackernoon’s trending page, enllaços i tot, en format PDF crisp. Això és una autèntica automatització del navegador, alimentat pel seu propi agent d'IA.
I això, senyors, éshow you build an AI agent with Playwright + MCPAquesta cosa és seriosament poderosa.Deixeu-la cuinar.
Les limitacions ocultes de Playwright MCP (i com superar-les)
Curiós! potser estàs pensant:
"Bé, tinc les eines... un LLM que pot pensar, un servidor MCP que pot raspar, i Playwright per controlar el navegador.
"Bé, tinc les eines... un LLM que pot pensar, un servidor MCP que pot raspar, i Playwright per controlar el navegador.
No és tan ràpid.
Per descomptat, només hi hatwo core things AI agents need to thrive:
- Accés a dades web en temps real (✅ gestionat per integracions MCP amb capacitat de raspat)
- La capacitat d'interactuar amb un navegador (✅ introduir Playwright MCP)
Però aquí és on les coses es fan interessants...
Intenta preguntar-li al teu agent d'IA alimentat per Playwright alguna cosa com:
Visit g2.com, wait for the page to load, and take a screenshot
I què passa? i això!
Navega a G2. ✅ Espera. ✅ Pren una captura de pantalla. ✅ Però hi ha una captura:the page is blocked behind a verification wall.
I l'agent és fins i tot prou amable per dir-te:
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.
No, no és un “joc acabat” per a nosaltres com a éssers humans.Joc sobrePer a ladefault Playwright browser setup
I què va anar malament?Aquí està el tema:Vanilla Chrome!♂️
El navegador Playwright controla fora de la caixa no està dissenyat per evitar els blocs. Fuga senyals a tot arreu, com ara banderes d'automatització, config estranys, i així successivament.To the point that most websites—jsut like G2 —instantly know it’s a bot
Quina és la solució? a.Playwright-compatible infrastructureConstruït per donar suport als fluxos de treball d'agentsremote browsers that don’t get blockedEstem parlant:
No es- Infinitament escalable ️
- Funciona sense cap o amb cap 👁️ més >>
- Propietat d'una xarxa de proxy amb més de 100 milions d'IPs residencials
- Dissenyat per barrejar-se com un usuari real ️ ♂️
Què és aquesta eina màgica?SalutacióBright Data’s Agent Browser—la teva pila de navegadors amagada, escalable i amigable amb AI:
El navegador d'agents de dades brillants
Si estàs preguntant-te com connectar-lo a la configuració de Playwright MCP, és tan simple com passar un punt final de CDP:
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...
ijust like that,No hi ha més blocs! No hi ha més parets de bot. No hi ha més memes de Gru.
Preparats per a crear fluxos de treball queDe fetTreballar a la web en viu?Bright Data’s Agent Browser has your back!
Veure-ho en acció en una altra integració aquí:
Pensaments finals
Ara sabeu com sobrecarregar qualsevol agent d'IA construït amb l'OpenAI Agents SDK, ja sigui que estigui executant en GPT, Gemini o el que vingui després, connectant-lo al servidor MCP de Playwright per al control real del navegador.
També vam mostrar com millorar encara més superant els blocs del navegador utilitzant Bright Data.Agent Browser, només una peça de la potent infraestructura d'IAhem construït per donar suport als fluxos de treball de la IA en el món real a escala.
A Bright Data, la nostra missió és simple: fer que la IA sigui accessible per a tothom, a tot arreu.