I april 2025 dropper Microsoft stille , en ny server, der forbinder din AI agent (via MCP) direkte til Playwright browser API. Playwright MCP Hvad betyder det på ren engelsk? (Og det er gratis!) »« » Alt sammen uden at skrive en enkelt linje af browserautomationskode. Your AI agent can now interact with real web pages using nothing but simple text instructions Klik på dette Tag et screenshot Ja, det er så stort, at Og det er kun lige begyndt. 🔥 Playwright MCP has already become one of the most-starred MCP servers on GitHub 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 er en MCP (Model Context Protocol) server, der giver dine AI-agenter alvorlige browser automation superkræfter via Playwright API. Playwright af MCP Playwright af MCP Bag 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 af Det betyder hurtigere, renere og langt mere LLM-venlige interaktioner. structured accessibility snapshots I verden af Hvor man har brug for , der og Som et menneske – det er en total game-change! Agentisk AI og Agentisk RAG arbejdsprocesser Læs Klik på Navigerer 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å ... og klatre. 12K+ ⭐ on GitHub 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 faktisk Hjemmesiden do stuff 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 i Så hvis du ikke har tjekket det ud endnu, gå skim det virkelig hurtigt. . MCP + OpenAI Agents SDK: Sådan opbygges en kraftfuld AI-agent MCP + OpenAI Agents SDK: Sådan opbygges en kraftfuld AI-agent MCP + 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   and set up a Python virtual environment. agent.py 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. bit fortæller det, hvor man skal dumppe eksportfiler som skærmbilleder og PDF'er. --output-dir "./" I️ Hvis din agent ikke behøver at eksportere nogen filer, kan du hoppe over Flag fuldt ud. Det er valgfrit! Note --output-dir Trin #3: Komplet kode Her er hvad din Dette er din fulde Open AI Agents SDK-bygget, Gemini-drevet, Playwright-integreret AI agent klar til at tage handling gennem 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. 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 browseren Det er perfekt, hvis du vil sende en anden opfordring og holde den aktuelle session levende! Hold åbent 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-fil Rul gennem din projektmappe, og du vil se: hackernoon-trending-stories.pdf Det er fantastisk! a , links og alt, i skarpt PDF-format. Det er ægte browserautomation, drevet af din egen AI-agent. clean, full-page export of Hackernoon’s trending page Og det, folkens, er Denne ting er seriøst kraftfuld. lad det koge. how you build an AI agent with Playwright + MCP 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 er : two 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 er For den Spillet over default Playwright browser setup Her er emnet: ♂️ Så hvad gik galt? 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. Opbygget til at understøtte agentiske arbejdsprocesser på Vi taler om: Playwright-compatible infrastructure remote browsers that   get blocked Don ikke 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? din skjulte, skalerbare, AI-venlige browser stack: Bright Data’s Agent Browser Brug af Bright Data’s Agent Browser https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true 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...
 og Ingen flere blokke! ingen flere botvægge. ingen mere triste Gru memes. just like that, klar til at opbygge agentiske arbejdsprocesser, der Arbejde på live web? Faktisk Bright Data’s Agent Browser has your back! Se det i aktion i en anden integration her: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true 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's kun et stykke af den kraftfulde AI-infrastruktur . Agent Browser vi 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.

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 er her: Lad os integrere det!

About Author

KOMMENTARER

HÆNG TAGS

DENNE ARTIKEL BLEV PRÆsenterET I

Related Stories

Meet Tailscale: HackerNoon Company of the Week

Meet Bybit: HackerNoon Company of the Week

Meet Brave: HackerNoon Company of the Week

Meet Sentry: HackerNoon Company of the Week

Meet Tailscale: HackerNoon Company of the Week

Meet Bybit: HackerNoon Company of the Week

Meet Brave: HackerNoon Company of the Week

Meet Sentry: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps