A l'abril de 2025, Microsoft va cessar silenciosament , un nou servidor que connecta el vostre agent d'IA (via MCP) directament a l'API del navegador Playwright. Playwright MCP Què vol dir això en anglès clar? (i de forma gratuïta!) “”” Tot això sense escriure una sola línia de codi d'automatització del navegador. Your AI agent can now interact with real web pages using nothing but simple text instructions Clica això Feu una captura de pantalla Això és tan gran que I només acaba de començar. Playwright MCP has already become one of the most-starred MCP servers on GitHub 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 é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 MCP Dissenyador MCP Darrere dels escenaris, en lloc de dependre de captures de pantalla o models ajustats a la visió, permet als LLM interactuar amb pàgines web utilitzant Això significa interaccions més ràpides, més netes i molt més amigables amb LLM. structured accessibility snapshots En el món de Allà on necessita , , i Com un humà, això és un canvi total de joc! Fluxos de treball d'AI agent i RAG agent Llegir Clica Navegació 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à asseguda ...i l’escalada 12K+ ⭐ on GitHub 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 realitat A la xarxa. Fes coses 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 en 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'IA MCP + OpenAI Agents SDK: Com construir un potent agent d'IA MCP + 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. bit li diu on descarregar els arxius d'exportació, com ara captures de pantalla i PDF. --output-dir "./" El dia Si l'agent no necessita exportar cap arxiu, pot saltar el És una opció, és una opció! Note --output-dir Pas #3: El codi complet Aquí teniu el vostre  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: agent.py 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 navegador Això és perfecte si voleu enviar un altre prompt i mantenir viva la sessió actual! Queda oberta 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 generat Descarregueu-lo a través de la carpeta del vostre projecte i veureu: hackernoon-trending-stories.pdf És fantàstic! a , enllaços i tot, en format PDF crisp. Això és una autèntica automatització del navegador, alimentat pel seu propi agent d'IA. clean, full-page export of Hackernoon’s trending page I això, senyors, és Aquesta cosa és seriosament poderosa.Deixeu-la cuinar. how you build an AI agent with Playwright + MCP 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 ha : two 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. Per a la Joc sobre default Playwright browser setup Aquí està el tema: ♂️ I què va anar malament? 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. Construït per donar suport als fluxos de treball d'agents Estem parlant: Playwright-compatible infrastructure remote browsers that   get blocked don’t 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ó —la teva pila de navegadors amagada, escalable i amigable amb AI: Bright Data’s Agent Browser El navegador d'agents de dades brillants https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true 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...
 i No hi ha més blocs! No hi ha més parets de bot. No hi ha més memes de Gru. just like that, Preparats per a crear fluxos de treball que Treballar a la web en viu? De fet Bright Data’s Agent Browser has your back! Veure-ho en acció en una altra integració aquí: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true 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. , només una peça de la potent infraestructura d'IA . Agent Browser hem 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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Playwright MCP Server està aquí: Anem a integrar-ho!

About Author

COMENTARIS

Etiquetes penjant

AQUEST ARTICLE VA SER PRESENTAT A

Related Stories

Startups of The Year: Meet the Engineering Industry

On Taxes

Startups of The Year: Meet the Commerce Industry

Generar líders de qualitat ASAP: HackerNoon's Content-Relevant Niche Ads FTW

Startups of The Year: Meet the Engineering Industry

On Taxes

Startups of The Year: Meet the Commerce Industry

Generar líders de qualitat ASAP: HackerNoon's Content-Relevant Niche Ads FTW

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps