2025年4月、マイクロソフトは静かに退場する。Playwright MCPあなたのAIエージェント(MCPを通じて)をPlaywrightブラウザAPIに直接接続する新しいサーバー。
純粋な英語で何を意味するのか。Your AI agent can now interact with real web pages using nothing but simple text instructions(無料で!) »click this「」スクリーンショットを撮影"—all without writing a single line of browser automation code.
はい、それはそれほど大きいPlaywright MCP has already become one of the most-starred MCP servers on GitHubしかも、まだ始まっているばかりです。
このステップごとのガイドでは、このサーバーが何ができるのか、そしてOpenAI Agents SDKを使用してPythonベースのAIワークフローに接続する方法を確認します。
なぜ誰もがPlaywright MCPサーバについて話しているのか
PLAYWRIGHT MCPMCP(モデルコンテキストプロトコル)サーバーは、Playwright APIを通じてAIエージェントに深刻なブラウザ自動化スーパーパワーを提供します。
PLAYWRIGHT MCP舞台裏では、スクリーンショットやビジョン調整モデルに頼る代わりに、LLMはウェブページと相互作用させます。structured accessibility snapshotsそれは、より速く、よりクリーンで、より多くのLLMフレンドリーな相互作用を意味します。
IN THE WORLD OFAgentic AI および Agentic RAG ワークフローAIが必要な場所読書で、クリックそして、航海まるで人間のようで、これは完全なゲーム変革だ!
そして、これを受け取る: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サーバをスピンアップします。--output-dir "./"bit は、スクリーンショットや PDF などのエクスポートファイルをどこに捨てるかを示します。
i️Note: エージェントがファイルをエクスポートする必要がない場合は、--output-dirフラッグ!オプションです!
ステップ3:完全なコード
こちらはあなたの何agent.pyファイルは、すべてがワイヤレスに接続されるときのように見えるはずです. これがあなたの完全なオープンAIエージェントのSDK構築、ジェミニーパワー、Playwright統合AIエージェントで、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. 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ファイルをチェックhackernoon-trending-stories.pdfあなたのプロジェクト フォルダで. Scroll through it, and you will see:
素晴らしい!Aclean, full-page export of Hackernoon’s trending page, リンクおよびすべて、クロス PDF形式で. それはあなたの独自のAIエージェントによって動作する本当のブラウザ自動化です。
それは、皆さん、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ゲーム Overfor thedefault Playwright browser setup↓↓↓
では、何が間違ったのか。こちらが問題:Vanilla Chrome!♂️
ブラウザPlaywrightは、ブロックを回避するように設計されていないボックスからコントロールします。それは自動化の旗、奇妙なコンフィギングなど、あらゆる場所で信号を漏らします。To the point that most websites—jsut like G2 —instantly know it’s a bot↓↓↓
では、何が解決策なのでしょうか? APlaywright-compatible infrastructureエージェントワークフローをサポートするために構築されたremote browsers that ダン get blockedわたしたちは話している:
ダン- 無限に伸びる️
- 頭もないし、頭もないし。
- 100M+ 住宅 IP を備えたプロキシネットワークによって動作します。
- リアルなユーザーのように混ぜ合わせるように設計されています ️ ♂️
この魔法の道具は何ですか? こんにちは。Bright Dataのエージェントブラウザ—your stealthy, scalable, AI-friendly browser stack: あなたの隠れた、スケーラブルな、AIフレンドリーなブラウザスタック:
Bright Dataのエージェントブラウザ
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...
そしてjust like that,No more blocks! No more bot walls. No more sad Gru memes. もうブロックはない! もうボットの壁はない。
エージェントワークフローを構築するための準備実際ライブウェブで働く?Bright Data’s Agent Browser has your back!
ここで別の統合でアクションでそれを見る:
最終思考
現在では、OpenAI Agents SDKで構築されたAIエージェントを超過充電する方法を知っています - GPT、Gemini、または次に何が起こるかに関係なく - 実際のブラウザ制御のためにPlaywright MCPサーバーに接続することによって。
また、Bright Data のブロックを克服することでさらにレベルアップする方法も示しました。Agent Browser強力なAIインフラストラクチャのほんの一部私たちは、実世界のAIワークフローを規模でサポートするように構築されています。.
Bright Dataでは、私たちの使命はシンプルです:誰にでも、どこにでも、AIにアクセスできるようにしますので、次回まで、好奇心を持って、勇気を持って、AIの未来を築き続けましょう。
