Tháng 4 năm 2025, Microsoft lặng lẽ ngừng hoạt độngPlaywright MCP, một máy chủ mới kết nối đại lý AI của bạn (thông qua MCP) trực tiếp với API trình duyệt Playwright.
Điều đó có nghĩa là gì trong tiếng Anh đơn giản?Your AI agent can now interact with real web pages using nothing but simple text instructions(và miễn phí!) »Click vào đây," "Lấy một screenshot“— Tất cả mà không viết một dòng mã tự động hóa trình duyệt duy nhất.
Vâng, đó là rất lớn màPlaywright MCP has already become one of the most-starred MCP servers on GitHubVà nó chỉ mới bắt đầu. 🔥
Trong hướng dẫn từng bước này, bạn sẽ thấy chính xác những gì máy chủ này có thể làm và làm thế nào để kết nối nó vào một dòng công việc AI dựa trên Python bằng cách sử dụng OpenAI Agents SDK.
Tại sao mọi người đều nói về máy chủ MCP của Playwright
Tác giả MCPlà một máy chủ MCP (Model Context Protocol) cung cấp cho các đại lý AI của bạn siêu quyền lực nghiêm trọng về tự động hóa trình duyệt thông qua API Playwright.
Tác giả MCPĐằng sau hậu trường, thay vì dựa vào ảnh chụp màn hình hoặc các mô hình phù hợp với tầm nhìn, nó cho phép LLM tương tác với các trang web bằng cách sử dụngstructured accessibility snapshotsĐiều đó có nghĩa là tương tác nhanh hơn, sạch hơn và thân thiện với LLM nhiều hơn.
Trong thế giới củaagentic AI and agentic RAG workflows- Nơi ai cầnĐọc,click vàovàNavigatorNhư một con người - đây là một trò chơi thay đổi hoàn toàn!
Và nhận được điều này: mặc dù Microsoft đã không tung ra nó với rất nhiều fanfare (không có keynote nhấp nháy, không có blog post blitz), thư viện khóa thấp này đã ngồi trên12K+ ⭐ on GitHub...và leo lên
Vì nó chỉ làm việc, và dưới đây là những gì làm cho nó đặc biệt:
- Blazing nhanh và nhẹ: Sử dụng cây truy cập của trình duyệt, không phải là đầu vào dựa trên pixel chậm.
- Thiết kế LLM đầu tiên: Không cần mô hình tầm nhìn. Nó được xây dựng cho giao diện văn bản có cấu trúc.
- ️ Sử dụng công cụ xác định: Không đoán, không mơ hồ - chỉ cần hành động rõ ràng, đáng tin cậy thông qua một số công cụ.
Thêm vào đó, nó đi kèm với một CLI vững chắc và cờ tùy chỉnh hữu ích để điều khiển trình duyệt được điều chỉnh tốt.
Công nghệ này cho phép bạn xây dựng các tác nhân nghiêm túc không chỉ ảo giác, mà thực sựLàm đồ vậtWEB
Làm thế nào để sử dụng Playwright MCP Server: Bước-by-Bước hướng dẫn
Bạn đã sẵn sàng để đưa máy chủ MCP của Playwright vào hoạt động chưa? Hãy làm theo các bước dưới đây để kết nối nó với kịch bản Python của bạn bằng cách sử dụng OpenAI Agents SDK!
Điều kiện
Để làm theo cùng với hướng dẫn này, hãy chắc chắn rằng bạn có thiết lập dev của bạn sẵn sàng để cuộn:
- Python 3.10+ được cài đặt cục bộ
- Node.js cài đặt và làm việc (phiên bản LTS mới nhất là bạn của bạn) ️
- Một khóa API từ một nhà cung cấp LLM được hỗ trợ (OpenAI Agents SDK cần nó, và chúng tôi khuyên bạn nên Gemini vì nó miễn phí để sử dụng)
Bước #1: Thiết lập và cấu hình dự án
Sự tích hợp Playwright + MCP này xây dựng trên những gì chúng tôi đã bao gồm trongMCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽ.Vì vậy, nếu bạn chưa kiểm tra nó ra, đi trượt nó thực sự nhanh chóng.
MCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽMCP + OpenAI Agent SDK: Làm thế nào để xây dựng một đại lý AI mạnh mẽ
Nhưng nếu bạn đang trong một vội vàng (chúng tôi nhận được nó),here’s the TL;DR version to get you rolling:
- Tạo một project folder.
- Bên trong nó, thêm một tệp tên là agent.py và thiết lập một môi trường ảo Python.
- Cài đặt các thư viện cần thiết với pip install openai-agents python-dotenv.
- Add a
.env
file to your project folder and, inside it, drop your Gemini API key like this:
GEMINI_API_KEY=<your-gemini-api-key>
Bây giờ bạn đã bị khóa, tải và sẵn sàng để bắt đầu xây dựng! 💥
Bước #2: Playwright MCP Server tích hợp
Lấy máy chủ Playwright MCP lên và chạy bên trong OpenAI Agents SDK với mã sau:
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 "./"
Nó quay lên máy chủ Playwright MCP bằng cách sử dụng Node.js.--output-dir "./"
bit cho biết nơi để thả các tập tin xuất khẩu như ảnh chụp màn hình và PDF.
️Note: Nếu đại lý của bạn không cần phải xuất bất kỳ tệp nào, bạn có thể bỏ qua--output-dir
Cụ thể là lá cờ, đó là tùy chọn!
Bước #3: Điền mã đầy đủ
Đây là những gì của bạnagent.py
tập tin nên trông giống như một khi mọi thứ đã được kết nối và sập.Đây là đại lý AI toàn diện của bạn được xây dựng bởi Open AI Agents SDK, được cung cấp bởi Gemini, tích hợp với Playwright, sẵn sàng hành động thông qua 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())
Tương tự như vậy, bạn đã xây dựng một đại lý AI đầy đủ chức năng trong ~75 dòng Python.think through Gemini and act through Playwright️️
Bước #4: Kiểm tra Playwright-Powered AI Agent của bạn
Đã đến lúc kiểm tra đại lý của bạn bằng cách chạy:
python agent.py
Đây là những gì bạn sẽ thấy trên Startup:
Bây giờ đánh nó với một nhanh như thế này:
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"
Kết quả này?
Yup ơiit nailed it!
Nhưng đó là nhanh, vì vậy hãy chia sẻ những gì đã xảy ra:
- Agent khởi động một phiên bản Chrome Playwright-powered.
- Ghé thăm hackernoon.com
- Click vào link “Trending Stories”. ️
- Chờ cho trang tải đầy đủ.
- Xuất trang sang tệp PDF có tên hackernoon-trending-stories.pdf, xuất hiện trong thư mục dự án.
Lưu ý rằng trình duyệtVẫn mởĐó là hoàn hảo nếu bạn muốn gửi một lời nhắc khác và giữ cho phiên hiện tại còn sống!
Bạn không thích điều đó và muốn kết thúc phiên và đóng trình duyệt? chỉ cần nhập một cái gì đó như:
Now, close the browser.
Đại lý sẽ tắt trình duyệt cho bạn. ✅
Bây giờ, đi kiểm tra các tập tin PDF được tạo rahackernoon-trending-stories.pdf
trong thư mục dự án của bạn. cuộn qua nó, và bạn sẽ thấy:
Tuyệt vời! aclean, full-page export of Hackernoon’s trending page, liên kết và tất cả, ở định dạng PDF sắc nét. đó là tự động hóa trình duyệt thực sự, được cung cấp bởi đại lý AI của riêng bạn.
Và điều đó, thưa quý vị, làhow you build an AI agent with Playwright + MCPCái này có sức mạnh nghiêm túc. - Hãy để nó nấu ăn.
Các hạn chế ẩn của Playwright MCP (Và làm thế nào để vượt qua chúng)
Bạn có thể đang suy nghĩ:
“Được rồi, tôi có các công cụ... một LLM có thể suy nghĩ, một máy chủ MCP có thể cạo, và Playwright để điều khiển trình duyệt.
“Được rồi, tôi có các công cụ... một LLM có thể suy nghĩ, một máy chủ MCP có thể cạo, và Playwright để điều khiển trình duyệt.
Không quá nhanh 😍😍😍
Chắc chắn, chỉ cótwo core things AI agents need to thrive:
- Truy cập dữ liệu web thời gian thực (✅ được xử lý bởi tích hợp MCP có khả năng cạo)
- Khả năng tương tác với một trình duyệt (✅ nhập Playwright MCP)
Nhưng đây là nơi mọi thứ trở nên thú vị...
Hãy thử hỏi đại lý AI Playwright của bạn một cái gì đó như:
Visit g2.com, wait for the page to load, and take a screenshot
Chuyện gì sẽ xảy ra? - Điều này!
Nó điều hướng đến G2. ✅ Waits. ✅ Take a screenshot. ✅ Nhưng có một bắt:the page is blocked behind a verification wall.
Và đại lý thậm chí còn đủ lịch sự để nói với bạn:
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 Game OverĐối với thedefault Playwright browser setup
Vậy điều gì đã sai?Đây là vấn đề:Vanilla Chrome!♂️
Trình duyệt Playwright điều khiển ra khỏi hộp không được thiết kế để tránh các khối. Nó rò rỉ tín hiệu khắp nơi, chẳng hạn như cờ tự động, cấu hình kỳ lạ, và như vậy....To the point that most websites—jsut like G2 —instantly know it’s a bot. 🤖 🚫
Vậy giải pháp là gì? a.Playwright-compatible infrastructureĐược xây dựng để hỗ trợ các dòng công việc đại lý trênremote browsers that Đừng get blockedChúng ta đang nói chuyện:
Đừng- Infinitely Scalable ️
- Làm việc không có đầu hoặc đầu 👁️ thêm nữa ››
- Được cung cấp bởi một mạng proxy với 100M+ địa chỉ IP dân cư
- Được thiết kế để pha trộn như một người dùng thực sự ️ ♂️
Bạn đang băn khoăn về công cụ kỳ diệu này là gì? chào hỏiTrình duyệt Bright Data’s Agent– stealthy, scalable, AI-friendly trình duyệt stack của bạn:
Trình duyệt Bright Data’s Agent
Nếu bạn đang tự hỏi làm thế nào để cắm nó vào thiết lập Playwright MCP của bạn, nó đơn giản như thông qua một điểm cuối 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...
vàjust like that, no more blocks! No more bot walls. No more sad Gru memes.
Sẵn sàng để xây dựng các dòng công việc đại lý màThực tếLàm việc trên web trực tiếp?Bright Data’s Agent Browser has your back!
Xem nó trong hành động trong một hội nhập khác ở đây:
Suy nghĩ cuối cùng
Bây giờ bạn biết làm thế nào để quá tải bất kỳ đại lý AI được xây dựng với OpenAI Agents SDK - cho dù nó đang chạy trên GPT, Gemini, hoặc bất cứ điều gì sắp tới - bằng cách kết nối nó vào máy chủ Playwright MCP để kiểm soát trình duyệt thực sự.
Chúng tôi cũng chỉ ra cách nâng cấp thêm bằng cách vượt qua các khối trình duyệt bằng cách sử dụng Bright Data.Agent Browser, chỉ là một phần của cơ sở hạ tầng AI mạnh mẽchúng tôi đã được xây dựng để hỗ trợ các dòng công việc AI thực tế trên quy mô lớn.
Tại Bright Data, sứ mệnh của chúng tôi rất đơn giản: làm cho AI có thể tiếp cận được với mọi người, ở khắp mọi nơi.Vì vậy, cho đến lần sau – hãy tò mò, can đảm và tiếp tục xây dựng tương lai của AI.