Playwright MCP sèvè se isit la: Nou entegre li!

Nan mwa avril 2025, Microsoft silentman retirePlaywright MCP, yon nouvo sèvè ki konekte ajan AI ou (via MCP) dirèkteman nan Playwright navigatè API.

Ki sa ki vle di nan lang pwòp?Your AI agent can now interact with real web pages using nothing but simple text instructions(Epitou pou gratis!) »Klike sou sa»»»Jwenn yon screenshot"—tou san yo pa ekri yon sèl liy nan kòd otomatik navigatè.

Yeah, sa a se gwo kePlaywright MCP has already become one of the most-starred MCP servers on GitHubEpi li se sèlman kòmanse. 🔥

Nan sa a etap-pa-etap gid, ou pral wè eksactman sa ki sèvè sa a ka fè, ak ki jan yo konekte li nan yon pwosesis travay AI ki baze sou Python lè l sèvi avèk OpenAI Agents SDK.

Poukisa tout moun pale sou Playwright MCP sèvè

Playwriters nan MCPse yon MCP (Model Context Protocol) sèvè ki bay ajan AI ou seri navigatè automatisation superpowers atravè Playwright API a.

Nan dèyè scè, olye de depann sou screenshots oswa modèl vizyon-ajou, li pèmèt LLMs interaksyon ak paj entènèt lè l sèvi avèkstructured accessibility snapshotsLi vle di pi vit, pi limyè, ak anpil plis interaksyon LLM-friendly.

Nan mond lan nanAgents AI ak Agents RAG Workflows- Ki kote ou bezwenLi nannanKlike souENavigasyonkòm yon moun - sa a se yon total jwèt-chanjman!

Epi jwenn sa a: malgre ke Microsoft pa te rale li ak anpil fanfare (pa gen okenn klavye flashy, pa gen okenn blitz pòs blog), sa a low-key bibliyotèk la se deja moute nan12K+ ⭐ on GitHub... ak monte.

Se poutèt sa li jis travay, ak anba a se sa ki fè li espesyal:

• ⚠ Blasting vit ak limyè: Sèvi ak fwi a aksè navigatè a, pa lente, piksèl ki baze sou entwodiksyon.
• LLM-first konsepsyon: Pa bezwen pou modèl vizyon. Li te bati pou entèfas tèks estrikti.
• ️ Deterministic zouti itilize: Pa enkyetid, pa ambiguïté - jis klè, konfyans aksyon atravè plizyè zouti.

Plis, li vini ak yon CLI solide ak flè Customization itil pou kontwole navigatè fin-tune.

Teknoloji sa a pèmèt ou bati ajan seri ki pa sèlman hallucinate, men reyèlmanPou bagaySou entènèt la.

Ki jan yo sèvi ak Playwright MCP sèvè: Etap-pa-etap Tutorial

Ready pou mete Playwright MCP sèvè nan aksyon? Sèvi ak etap yo anba a yo fil li nan script Python ou lè l sèvi avèk OpenAI Agents SDK!

Kondisyon

Pou swiv ansanm ak tutorial sa a, asire w ke ou gen dev ou konfigirasyon pare yo rale:

• Python 3.10+ enstale lokalman
• Node.js enstale ak travay (LTS vèsyon an dènye se zanmi ou a) ️
• Yon kle API soti nan yon founisè LLM sipòte (OpenAI Agents SDK bezwen li, epi nou rekòmande Gemini paske li se gratis yo sèvi ak)

Etap #1: Pwojè Konfigirasyon & Konfigirasyon

Sa a Playwright + MCP entegre bati sou sa nou kouvri nanMCP + OpenAI ajan SDK: Ki jan yo bati yon ajan AI pouvwa.Se konsa, si ou pa te tcheke sa a ankò, ale skim li reyèlman vit. Nou pral espere.

Men, si ou se nan yon apresye ( nou jwenn li),here’s the TL;DR version to get you rolling:

1. Kreye yon dosye pwojè.
2. Nan l ', ajoute yon dosye rele agent.py ak mete yon anviwònman vityèl Python.
3. Enstale library yo mande ak pip enstale openai-agents python-dotenv.
4. Ajoute yon dosye .env nan dosye pwojè ou a, epi, nan l ', kite kle API Gemini ou tankou sa a:

GEMINI_API_KEY=<your-gemini-api-key>

Ou se kounye a kouvri, chaje, ak pare yo kòmanse konstriksyon! 💥

Etap #2: Playwright MCP sèvè Entegre

Jwenn Playwright MCP sèvè a ak kouri nan OpenAI Agents SDK ak kòd sa a:

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 "./"

In plain English? It spins up the Playwright MCP server using Node.js. The --output-dir "./"bit di li kote yo dump ekspòte dosye tankou Ekran ak PDFs.

EseyeNote: Si ajan ou pa bezwen ekspòte nenpòt dosye, ou ka pase--output-dirflè tout antye. Sa a se opsyonèl!

Etap #3: Kòd konplè

Isit la se sa ouagent.pydosye a ta dwe sanble tankou yon fwa tout te konekte ak humming. Sa a se konplè ou Open AI Agents SDK-ki bati, Gemini-powered, Playwright-entegre ajan AI pare yo pran aksyon atravè 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. Dapre sa, ou te bati yon ajan AI plen fonksyonèl nan ~75 liy nan Python. Li kathink through Gemini and act through Playwright️

Etap #4: Teste Playwright-powered ou Ajan AI

Li nan tan yo teste ajan ou pa kouri:

python agent.py

Sa a se sa ou pral wè nan start-up:

Jwenn li ak yon rapò tankou sa a:

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"

Rezilta a se?

Pwoteksyonit nailed it!Jwenn

Men, li te vit, se konsa, nou ta dwe ranpli sa ki te pase:

1. Agent la lanse yon instans Chrome ki gen pouvwa Playwright.
2. Li vizit hackernoon.com.
3. Klike sou lyen la “Trending Stories”. ️
4. Tcheke pou paj la yo konplètman chaje.
5. Ekspòte paj la nan yon dosye PDF rele hackernoon-trending-stories.pdf, ki te parèt nan dosye pwojè a.

Remake ke navigatè aReste louvrinan background la sou paj final la. Sa a se pafè si ou vle voye yon lòt prompt ak kenbe sesyon aktyèl la viv!

Pa renmen sa a epi ou vle fini sesyon an ak fèmen navigatè a? jis enskri yon bagay tankou:

Now, close the browser.

Agent la pral ranpli navigatè a pou ou. ✅

Koulye a, ale tcheke dosye a PDF ki te kreyehackernoon-trending-stories.pdfnan dosye pwojè ou. Scroll nan li, epi ou pral wè:

Fantasyèl! aclean, full-page export of Hackernoon’s trending page, lyen ak tout, nan fòma crisp PDF. Sa a se reyèl otomatik navigatè, pouvwa pa pwòp ajan AI ou.

Epi sa a, moun, sehow you build an AI agent with Playwright + MCPYon bagay sa a se seri-potansyèl. Kite li.

Limite ki kache nan Playwright MCP (ak ki jan yo Outsmart yo)

Cool! Ou ta ka panse:

"Alright, I've got the tools… an LLM that can think, an MCP server that can scrape, and Playwright to control the browser. Game over, right? Time to automate the entire internet!”

"Oke, mwen gen zouti yo ... yon LLM ki ka panse, yon serveur MCP ki ka scrape, ak Playwright yo kontwole navigatè a. Jwèt la fini, dwa? Li te tan nan automatisation tout entènèt la! "

Men... pa tèlman vit.

Natirèlman, gen sèlmantwo core things AI agents need to thrive:

1. Aksè nan done sou entènèt nan tan reyèl (✅ manipile pa entegre MCP ki kapab rasin)
2. Kapasite yo interaksyon ak yon navigatè (✅ antre Playwright MCP)

Men, isit la se kote bagay yo vin enteresan ...

Try asking your Playwright-powered AI agent something like:

Visit g2.com, wait for the page to load, and take a screenshot

Men, ki sa ki te rive? Sa a!

Li navige nan G2. ✅ Wait. ✅ Li pran yon Ekran. ✅ Men, gen yon kouch:the page is blocked behind a verification wall.Pwensipal

Epi agent la se menm amizman ase yo di:

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, it’s not “game over” for us as human beings. But maybe... it's Jwèt nanPou nandefault Playwright browser setupEseye

Se konsa, ki sa ki te mal?Isit la se pwoblèm la:Vanilla Chrome!♂️

Navigatè a Playwright kontwole soti nan bwat la pa fèt pou evite blòk. Li rale sinyal nan tout kote, tankou flè otomatik, bizarre konfig, ak sou sa.To the point that most websites—jsut like G2 —instantly know it’s a botEseye

Se konsa, ki se solisyon an? 👉 APlaywright-compatible infrastructurebati yo sipòte flux travay ajan souremote browsers that don’t get blockedNou ap pale:

• Infinity Scalable ️
• Kòmanse tèt oswa tèt 👁️
• Pwoteje pa yon rezo proxy ak 100M + rezidansyèl IP
• Ki fèt yo blende nan tankou yon itilizatè reyèl ️ ♂️

Wondering what this magical tool is? Say hello to Bright Data’s Agent Browser—stylish ou, skalab, AI-friendly navigatè stack:

Si ou se kesyon sou ki jan yo konekte li nan Playwright MCP enstalasyon ou, li se senp tankou pase yon 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...

akjust like that,Pa gen plis blòk! Pa gen plis bot mòn. Pa gen plis grès Gru memes.

Ready to build agentic workflows that Reyèlmantravay sou entènèt la viv?Bright Data’s Agent Browser has your back!

Li nan aksyon nan yon lòt entegre isit la:

Final idantite

Koulye a, ou konnen ki jan yo supercharge nenpòt ajan AI bati ak OpenAI Agents SDK - si li kouri sou GPT, Gemini, oswa sa ki vini apre - pa konekte li nan Playwright MCP sèvè a pou kontwole navigatè reyèl.

Nou te tou montre ki jan yo nivo pi plis pa depase blòk navigatè lè l sèvi avèk Bright DataAgent Browser, jis yon pati nan enfrastrikti a AI pwisannou te bati pou sipòte pwosesis travay AI nan mond reyèl nan mas.

Nan Bright Data, misyon nou an se senp: fè AI aksè a tout moun, tout kote. Se konsa, jiska tan pwochen - rete enkyetid, rete fò, ak kontinye bati lavni a nan AI. ✨