2025年4月、マイクロソフトは静かに退場する。 あなたのAIエージェント(MCPを通じて)をPlaywrightブラウザAPIに直接接続する新しいサーバー。 Playwright MCP 純粋な英語で何を意味するのか。 (無料で!) » 「」 "—all without writing a single line of browser automation code. Your AI agent can now interact with real web pages using nothing but simple text instructions click this スクリーンショットを撮影 はい、それはそれほど大きい しかも、まだ始まっているばかりです。 Playwright MCP has already become one of the most-starred MCP servers on GitHub このステップごとのガイドでは、このサーバーが何ができるのか、そしてOpenAI Agents SDKを使用してPythonベースのAIワークフローに接続する方法を確認します。 なぜ誰もがPlaywright MCPサーバについて話しているのか MCP(モデルコンテキストプロトコル)サーバーは、Playwright APIを通じてAIエージェントに深刻なブラウザ自動化スーパーパワーを提供します。 PLAYWRIGHT MCP PLAYWRIGHT MCP 舞台裏では、スクリーンショットやビジョン調整モデルに頼る代わりに、LLMはウェブページと相互作用させます。 それは、より速く、よりクリーンで、より多くのLLMフレンドリーな相互作用を意味します。 structured accessibility snapshots IN THE WORLD OF AIが必要な場所 で、 そして、 まるで人間のようで、これは完全なゲーム変革だ! Agentic AI および Agentic RAG ワークフロー 読書 クリック 航海 そして、これを受け取る:Microsoftは多くのファンファー(フラッシュなキーノートなし、ブログ投稿のブリッツなし)でそれをリリースしなかったにもかかわらず、この低キーライブラリはすでに座っています。 ...そして登る。 12K+ ⭐ on GitHub なぜヒープなのか? それは単に機能しているため、以下は何がそれを特別にします: 
 
 
 
 Blazing fast and lightweight: ゆっくりとしたピクセルベースの入力ではなく、ブラウザのアクセシビリティツリーを使用します。 LLMファーストデザイン:ビジョンモデルは必要ありません。構造化されたテキストインターフェイスのために構築されています。 ️決定主義的なツールの使用:推測はなく、曖昧さはなく、いくつかのツールを通じて明確で信頼性の高いアクションのみです。 さらに、堅固なCLIと有用なカスタマイズフラッグを搭載し、精巧なブラウザ制御を提供しています。 このテクノロジーにより、幻覚を起こすだけでなく、実際に作る真剣なエージェントを構築することができます。 WEB ↓↓↓ トップ > Playwright MCP Server を使用する方法: Step-by-Step Tutorial Playwright MCP サーバを動かす準備ができていますか? 以下の手順に従って、OpenAI Agents SDK を使用して Python スクリプトにワイヤーアップします! 前提条件 このチュートリアルに従うには、あなたがあなたのデヴのセットアップをロールする準備ができていることを確認してください: 
 
 
 
 Python 3.10+ ローカルにインストール Node.js がインストールされ、動作します(最新の LTS バージョンはあなたの友人です) ️ サポートされているLLMプロバイダーからのAPIキー(OpenAI Agents SDKはそれを必要とし、使用が無料であるため Geminiをお勧めします) Step #1: Project Setup & Configuration このPlaywright + MCP統合は、我々がカバーしたものに基づいています。 まだチェックしてないのなら、早めにチェックしてみて下さいね(笑) . MCP+OpenAIエージェントSDK:強力なAIエージェントを構築する方法 MCP+OpenAIエージェントSDK:強力なAIエージェントを構築する方法 MCP+OpenAIエージェントSDK:強力なAIエージェントを構築する方法 しかし、あなたが急いでいるなら(私たちはそれを得る)、 : here’s the TL;DR version to get you rolling 
 
 
 
 
 プロジェクトフォルダーを作成します。 内部には agent.py というファイルを追加し、Python 仮想環境を設定します。 pip install openai-agents python-dotenv で必要なライブラリをインストールします。 プロジェクト フォルダに .env ファイルを追加し、その中に Gemini API キーをこのように落とします。 GEMINI_API_KEY=<your-gemini-api-key>
 あなたは今、ロックされ、充電され、建設を開始する準備ができています! 💥 Step #2: Playwright MCP Server 統合 Playwright MCP サーバをアップして、OpenAI Agents SDK 内で次のコードで実行してください。 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 "./"
 単純な英語で? それはNode.jsを使用してPlaywrightのMCPサーバをスピンアップします。 bit は、スクリーンショットや PDF などのエクスポートファイルをどこに捨てるかを示します。 --output-dir "./" i️ : エージェントがファイルをエクスポートする必要がない場合は、 フラッグ!オプションです! Note --output-dir ステップ3:完全なコード こちらはあなたの何 ファイルは、すべてがワイヤレスに接続されるときのように見えるはずです. これがあなたの完全なオープンAIエージェントのSDK構築、ジェミニーパワー、Playwright統合AIエージェントで、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. Just like that, you’ve built a fully functional AI agent in ~75 lines of Python. あなたはPythonの75行で完全に機能するAIエージェントを作成しました。 ️ think through Gemini and act through Playwright Step #4: Playwright-Powered AI Agent をテストする あなたのエージェントを実行することによってテストする時間です: python agent.py
 ↓こちらは、スタートアップで見るもの: 今日は、こんなスピードで叩いてみました: 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"
 結果は? ヨブ、 ↓↓ it nailed it! しかし、それは速かったので、起こったことを分解しましょう: 
 
 
 
 
 
 エージェントはPlaywrightで動作するChromeインスタンスを起動します。 hackernoon.com をご覧ください。 「トレンドストーリー」のリンクをクリックします️ ページが完全にロードされるのを待つ。 ページを、プロジェクト フォルダに表示された hackernoon-trending-stories.pdf という PDF ファイルにエクスポートします。 ブラウザの注意点 最後のページの背景で、別のプロンプトを送り、現在のセッションを生き残りたい場合に最適です! オープンステイ それが気に入らないで、セッションを終了してブラウザを閉じたいですか? たったこれのようなものを入力してください: Now, close the browser.
 エージェントはあなたのためにブラウザを閉じます。 現在、生成されたPDFファイルをチェック あなたのプロジェクト フォルダで. Scroll through it, and you will see: hackernoon-trending-stories.pdf 素晴らしい!A , リンクおよびすべて、クロス PDF形式で. それはあなたの独自のAIエージェントによって動作する本当のブラウザ自動化です。 clean, full-page export of Hackernoon’s trending page それは、皆さん、 やっぱり、これがすごいですね! ↓↓↓↓↓ how you build an AI agent with Playwright + MCP The Hidden Limits of Playwright MCP (And How to Outsmart Them) トップページ キレイ! あなたは考えているかもしれません: 
 
 「大丈夫、私はツールを持っています...思考できるLLM、スクラップできるMCPサーバー、ブラウザを制御するPlaywright。 「大丈夫、私はツールを持っています...思考できるLLM、スクラップできるMCPサーバー、ブラウザを制御するPlaywright。 ・・・そんなに速くない・・・。 確かに、そこにはただ : two core things AI agents need to thrive 
 
 
 リアルタイムのウェブデータへのアクセス (✅ scraping-capable MCP integrations によって処理) ブラウザと相互作用する能力(✅ enter Playwright MCP) しかし、ここは、物事が興味深くなる場所です... Playwright で動作する AI エージェントに以下のような質問をしてみてください。 Visit g2.com, wait for the page to load, and take a screenshot
 何が起こるの?これ! G2 にナビゲートします ✅ Waits. ✅ Take a screenshot. ✅ But there’s a catch: ↓↓↓ the page is blocked behind a verification wall. そして、エージェントはあなたに言えるほど礼儀正しいです: 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 for the ↓↓↓ ゲーム Over default Playwright browser setup こちらが問題: ♂️ では、何が間違ったのか。 Vanilla Chrome! ブラウザPlaywrightは、ブロックを回避するように設計されていないボックスからコントロールします。それは自動化の旗、奇妙なコンフィギングなど、あらゆる場所で信号を漏らします。 ↓↓↓ To the point that most websites—jsut like G2 —instantly know it’s a bot では、何が解決策なのでしょうか? A エージェントワークフローをサポートするために構築された わたしたちは話している: Playwright-compatible infrastructure remote browsers that   get blocked ダン ダン 
 
 
 
 
 無限に伸びる️ 頭もないし、頭もないし。 100M+ 住宅 IP を備えたプロキシネットワークによって動作します。 リアルなユーザーのように混ぜ合わせるように設計されています ️ ♂️ この魔法の道具は何ですか? こんにちは。 —your stealthy, scalable, AI-friendly browser stack: あなたの隠れた、スケーラブルな、AIフレンドリーなブラウザスタック: Bright Dataのエージェントブラウザ Bright Dataのエージェントブラウザ https://www.youtube.com/watch?v=T59GCkpk5zY&embedable=true Playwright MCP セットアップに接続する方法を考えている場合は、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...
 そして No more blocks! No more bot walls. No more sad Gru memes. もうブロックはない! もうボットの壁はない。 just like that, エージェントワークフローを構築するための準備 ライブウェブで働く? 実際 Bright Data’s Agent Browser has your back! ここで別の統合でアクションでそれを見る: https://www.youtube.com/watch?v=JG_INdktGsk&embedable=true 最終思考 現在では、OpenAI Agents SDKで構築されたAIエージェントを超過充電する方法を知っています - GPT、Gemini、または次に何が起こるかに関係なく - 実際のブラウザ制御のためにPlaywright MCPサーバーに接続することによって。 また、Bright Data のブロックを克服することでさらにレベルアップする方法も示しました。 強力なAIインフラストラクチャのほんの一部 . Agent Browser 私たちは、実世界のAIワークフローを規模でサポートするように構築されています。 Bright Dataでは、私たちの使命はシンプルです:誰にでも、どこにでも、AIにアクセスできるようにしますので、次回まで、好奇心を持って、勇気を持って、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.

2022 - HackerNoon Contributor of the Year - Amazon

Request Your Own Data

Nominated for 2022 - HackerNoon Contributor of the Year - Amazon

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

Playwright MCP Server Is Here: Let's Integrate It!

About Author

コメント

ラベル

この記事は

Related Stories

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ワークフローを10倍に向上させる方法: 必須アプリ17選

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps