En abril de 2025, Microsoft cedió silenciosamente , un nuevo servidor que conecta su agente de IA (a través de MCP) directamente a la API del navegador Playwright. Playwright MCP ¿Qué significa esto en inglés simple? (Y de forma gratuita!) » “”” Todo sin escribir una sola línea de código de automatización del navegador. Your AI agent can now interact with real web pages using nothing but simple text instructions Clica en esto Tome una captura de pantalla Sí, eso es tan grande que Y sólo está empezando. 🔥 Playwright MCP has already become one of the most-starred MCP servers on GitHub En esta guía paso a paso, verá exactamente lo que este servidor puede hacer, y cómo conectarlo a un flujo de trabajo de IA basado en Python usando el SDK de Agentes de OpenAI. Por qué todo el mundo habla sobre el servidor MCP de Playwright es un servidor MCP (Model Context Protocol) que da a sus agentes de IA serios superpoderes de automatización de navegadores a través de la API de Playwright. Playwright en MCP Playwright en MCP Detrás de las escenas, en lugar de depender de capturas de pantalla o modelos ajustados a la visión, permite a los LLM interactuar con páginas web utilizando Esto significa interacciones más rápidas, más limpias y mucho más amigables con LLM. structured accessibility snapshots En el mundo de Donde el hombre necesita , de , y como un ser humano, ¡este es un cambio total de juego! Flujos de trabajo de agente AI y agente RAG Leer clic Navegación Y obtienes esto: aunque Microsoft no lo rodó con mucha fanfare (no flashy keynote, no blog post blitz), esta biblioteca de baja clave ya está sentada en ... y la escalada. 12K+ ⭐ on GitHub Porque sólo funciona, y a continuación está lo que lo hace especial: 
 
 
 
 Rápido y ligero: utiliza el árbol de accesibilidad del navegador, no la entrada lenta y basada en píxeles. Diseño LLM-primero: No hay necesidad de modelo de visión. Está construido para interfaces de texto estructuradas. ️ Uso de herramientas deterministas: Sin adivinación, sin ambigüedad, sólo acciones claras y fiables a través de varias herramientas. Además, viene con un CLI sólido y banderas de personalización útiles para el control del navegador ajustado. Esta tecnología te permite construir agentes serios que no solo alucinan, sino que realmente En la web. de las cosas Cómo usar el servidor MCP de Playwright: Tutorial paso a paso ¿Estás listo para poner en marcha el servidor MCP de Playwright? Sigue los pasos a continuación para conectarlo a tu script de Python utilizando el SDK de Agentes de OpenAI! Precondiciones Para seguir este tutorial, asegúrese de que tenga su configuración de desarrollador listo para rodar: 
 
 
 
 Python 3.10+ instalado localmente Node.js instalado y funcionando (la última versión LTS es tu amigo) ️ Una clave de API de un proveedor de LLM compatible (el SDK de Agentes de OpenAI lo necesita, y recomendamos Gemini porque es libre de usar) Paso #1: Configuración y configuración del proyecto Esta integración Playwright + MCP se basa en lo que cubrimos en Así que si aún no lo has comprobado, hazlo realmente rápido. . MCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IA MCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IA MCP + OpenAI Agents SDK: Cómo construir un poderoso agente de IA Pero si tienes prisa (lo conseguimos), : here’s the TL;DR version to get you rolling 
 
 
 
 
 Crear una carpeta de proyecto. Dentro de él, añade un archivo llamado agent.py y configura un entorno virtual de Python. Instalar las bibliotecas necesarias con pip instalar openai-agents python-dotenv. Agregue un archivo .env a su carpeta de proyecto y, en su interior, descargue su clave de API Gemini de esta manera: GEMINI_API_KEY=<your-gemini-api-key>
 ¡Ahora está cerrado, cargado y listo para empezar a construir! 💥 Paso #2: Integración con el servidor MCP de Playwright Obtener el servidor MCP de Playwright y ejecutarlo dentro del SDK de Agentes de OpenAI con el siguiente código: 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 "./"
 En inglés simple? Es girar el servidor MCP de Playwright usando Node.js. Bit le dice dónde descargar archivos de exportación como capturas de pantalla y PDF. --output-dir "./" El año : Si su agente no necesita exportar ningún archivo, puede saltar el ¡Es una bandera, es opcional! Note --output-dir Paso #3: El código completo Aquí está lo que tu Este es tu agente de inteligencia artificial abierto completo construido por Open AI Agents SDK, alimentado por Gemini, integrado por Playwright, listo para tomar medidas a través de 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())
 Boom. Al igual que eso, has construido un agente de IA totalmente funcional en ~75 líneas de Python. ️ ️ think through Gemini and act through Playwright Paso #4: Pruebe a su agente de IA impulsado por Playwright Es hora de probar a su agente corriendo: python agent.py
 Esto es lo que verás en Startup: Ahora lo golpeo con una prompt como ésta: 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"
 ¿El resultado ? yup , it nailed it! Pero eso fue rápido, así que vamos a descomponer lo que pasó: 
 
 
 
 
 
 El agente lanza una instancia de Chrome alimentada por Playwright. Visita hackernoon.com Haz clic en el enlace de “Trending Stories”. ️ Espera que la página se cargue por completo. Exporta la página a un archivo PDF llamado hackernoon-trending-stories.pdf, que apareció en la carpeta del proyecto. Recuerde que el navegador en el fondo en la página final. ¡Eso es perfecto si desea enviar otra prompt y mantener viva la sesión actual! Quédate abierto ¿No te gusta eso y quieres terminar la sesión y cerrar el navegador? Now, close the browser.
 El agente cerrará el navegador por usted. Ahora, vea el archivo PDF generado En la carpeta de tu proyecto, desplaza por ella y verás: hackernoon-trending-stories.pdf ¡Fantástico! a , enlaces y todo, en formato PDF crisp. Eso es una auténtica automatización de navegador, alimentada por su propio agente de IA. clean, full-page export of Hackernoon’s trending page Y eso, gente, es Esta cosa es seriamente poderosa. deje cocinar. how you build an AI agent with Playwright + MCP Las limitaciones ocultas del MCP de Playwright (y cómo superarlas) ¡Qué bonito! podrías estar pensando: 
 
 “Bueno, tengo las herramientas... un LLM que puede pensar, un servidor MCP que puede raspar, y Playwright para controlar el navegador. “Bueno, tengo las herramientas... un LLM que puede pensar, un servidor MCP que puede raspar, y Playwright para controlar el navegador. Bueno... no tan rápido. Por supuesto, sólo hay : two core things AI agents need to thrive 
 
 
 Acceso a datos web en tiempo real (✅ manejado por integraciones MCP capaces de raspar) La capacidad de interactuar con un navegador (✅ entrar Playwright MCP) Pero aquí es donde las cosas se hacen interesantes... Trate de preguntar a su agente de IA impulsado por Playwright algo como: Visit g2.com, wait for the page to load, and take a screenshot
 ¿Y qué sucede? ¡Esto! Navega a G2. ✅ Espera. ✅ Toma una captura de pantalla. ✅ Pero hay una captura:  😬 the page is blocked behind a verification wall. Y el agente es incluso lo suficientemente educado como para decirle: 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 es un “juego terminado” para nosotros como seres humanos. pero tal vez... es Para el . Juego sobre default Playwright browser setup Aquí está el tema: ♂️ Entonces, ¿qué pasó mal? Vanilla Chrome! El navegador Playwright controla fuera de la caja no está diseñado para evitar bloques. Se levanta señales por todo el lugar, como banderas de automatización, configuras extrañas, y así sucesivamente. . To the point that most websites—jsut like G2 —instantly know it’s a bot ¿Cuál es la solución? a. construido para apoyar los flujos de trabajo de agentes en Nosotros estamos hablando: Playwright-compatible infrastructure remote browsers that   get blocked don’t No se 
 
 
 
 
 Infinitamente escalable ️ Trabajo sin cabeza o con cabeza 👁️ más › Powered by a proxy network with 100M+ IPs residenciales Diseñado para mezclarse como un usuario real ️ ♂️ ¿Qué es esta herramienta mágica?Dile saludos a — tu pila de navegador escondida, escalable y amigable con la IA: El navegador de agentes de datos brillantes El navegador de agentes de datos brillantes https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true Si te estás preguntando cómo conectarlo a tu configuración de MCP de Playwright, es tan simple como pasar un punto 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...
 y No más bloques! No más bot muros. No más triste Gru memes. just like that, Preparado para crear flujos de trabajo que ¿Trabajar en la web en vivo? En realidad Bright Data’s Agent Browser has your back! Verla en acción en otra integración aquí: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true Pensamientos finales Ahora sabes cómo sobrecargar cualquier agente de IA construido con el SDK de Agentes de OpenAI, ya sea que se ejecute en GPT, Gemini o cualquier cosa que venga a continuación, conectándolo al servidor MCP de Playwright para el control real del navegador. También mostramos cómo nivelar aún más superando los bloques de navegador usando Bright Data. , sólo una pieza de la poderosa infraestructura de IA . Agent Browser hemos construido para soportar flujos de trabajo de IA en el mundo real a escala En Bright Data, nuestra misión es simple: hacer que la IA sea accesible para todos, en cualquier lugar. Así que hasta la próxima vez, mantente curioso, mantente atrevido y continúe construyendo el futuro de la IA.

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í: ¡Integrémoslo!

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps