Playwright MCP Server здесь: давайте интегрируем его!
25 июня 2025 г.В апреле 2025 года Microsoft тихо упалаДраматург MCP, новый сервер, который подключает ваш агент AI (через MCP) непосредственно к API браузера Playwright.
Что это значит на простом английском?Ваш агент ИИ теперь может взаимодействовать с реальными веб -страницами, используя только простые текстовые инструкции(и бесплатно!)Нажмите на это, ""Сделайте скриншот"Все, не написав ни одной строки кода автоматизации браузера.
Да, это так велика, чтоPlaywright MCP уже стал одним из самых известных серверов MCP на GitHubПолем И это только начинается. 🔥
В этом пошаговом руководстве вы точно увидите, что может сделать этот сервер, и как подключить его к рабочему процессу искусственного интеллекта на основе Python, используя SDK Agents OpenAI.
Почему все говорят о сервере Playwright MCP
Драматург MCPявляется сервером MCP (протокол контекста модели), который дает вашим агентам AI -агентам серьезные суперспособности автоматизации браузеров через Playwright API.
За кулисами, вместо того, чтобы полагаться на снимки экрана или настройку, настраиваемые на видСтруктурированные снимки доступностиПолем Это означает быстрее, чище и гораздо более благоприятных LLM взаимодействия.
В миреАгентство ИИ и агентские рабочие процессы тряпки- Где ИИ нужночитатьВнажимать, инавигацияКак человек-это полное изменение игры! 🤯
И получите это: хотя Microsoft не выпустила его с большим количеством фанфар (без роскошной основной доклады, без сообщения в блоге), эта сдержанная библиотека уже сидит в12K+ ⭐ на GitHub… И лазание.
Так почему же шумиха? Потому что это просто работает, и ниже это делает его особенным:
- ⚡ Пылающий быстро и легкий: Использует дерево доступности браузера, а не медленный, неуклюжий вход на основе пикселей.
- 🧠 LLM-первый дизайн: Нет необходимости в модели зрения. Он построен для структурированных текстовых интерфейсов.
- 🛠Детерминированное использование инструмента: Нет догадок, нет двусмысленности - просто ясные, надежные действия с помощью нескольких инструментов.
Кроме того, он поставляется с твердым CLI и полезными флагами настройки для тонкого настраиваемого управления браузером.
Эта технология позволяет вам создавать серьезные агенты, которые не просто галлюцинируют, но на самом деледелать вещив Интернете. 💪 🌐
Как использовать сервер Playwright MCP: пошаговый учебник
Готовы ввести в действие сервер Playwright MCP? Следуйте по приведенным ниже шагам, чтобы подключить его в сценарии Python, используя Agent Agents SDK!
Предварительные условия
Чтобы следовать этим учебному пособию, убедитесь, что вы подготовили свою настройку Dev для катания:
- Python 3.10+Установлен локально 🐍
- Node.jsУстановлен и работа (последняя версия LTS - ваш друг) ⚙ ⚙
- Ключ API от поддерживаемого поставщика LLM(Агенты OpenAI нуждаются в этом, и мы рекомендуемБлизнецыпотому что это бесплатно) 🔑
Шаг № 1: Настройка проекта и конфигурация
Эта интеграция с драматургом + MCP основана на том, что мы рассмотрелиMCP + Openai Agents SDK: Как построить мощного агента ИИПолемТак что, если вы еще не проверили это, идите очень быстро. Мы подождем. 🕒
Но если вы в спешке (мы поняли),Вот версия TL; DR, чтобы заставить вас катиться:
- Создайте папку проекта.
- Внутри добавьте файл с именем
agent.pyи установить виртуальную среду Python. - Установить необходимые библиотеки с
pip install openai-agents python-dotenvПолем - Добавить
.envФайл в папку проекта и внутри нее оставьте ключ API Gemini, как это:
GEMINI_API_KEY=<your-gemini-api-key>
Вот и все! Теперь вы заперты, загружены и готовы начать строительство! 💥
Шаг № 2: Интеграция сервера Playwright MCP
Получите Playwright MCP Server и работает внутри агентов OpenAI 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 "./"
На простом английском? Он разворачивает сервер Playwright MCP с помощью node.js. А--output-dir "./"Бит сообщает ему, куда сбросить экспортные файлы, такие как скриншоты и PDF.
ℹПримечание: Если вашему агенту не нужно экспортировать какие -либо файлы, вы можете пропустить--output-dirФлаг полностью. Это необязательно!
Шаг № 3: Полный код
Вот что тыagent.pyФайл должен выглядеть так, как только все будет подключено и напевает. Это ваш полный открытый AI-агент SDK-построенный, драматург-агент, интегрированный 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())
🚨 Бум. Точно так же вы создали полностью функциональный агент AI в ~ 75 линиях Python. Он можетпродумывать Близнецы и действовать через драматургаПолем 🧠 🛠
Шаг № 4: Проверьте свой агент по искусственному животу с пищевым стимулом
Пришло время проверить ваш агент, работая:
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"
🎯 Результат?
Ага,Это прибило это! 🎉
Но это было быстро, так что давайте разберем то, что случилось:
- Агент запускает хромированный экземпляр драматурга. 🧭
- Это посещаетHackernoon.comПолем 🌐
- Нажимает ссылку «Трендовые истории». 🖱
- Ждет, пока страница будет полной загрузкой. ⏳
- Экспортирует страницу в файл PDF с именем
hackernoon-trending-stories.pdf, который появился в папке проекта. 📄
Обратите внимание, что браузеростается открытымВ фоновом режиме на последней странице. Это прекрасно, если вы хотите отправить еще одну подсказку и сохранить текущую сессию!
Не нравится это и хотите закончить сеанс и закрыть браузер? Просто введите что -то вроде:
Now, close the browser.
Агент отключит для вас браузер. ✅
Теперь перейдите, проверьте сгенерированный файл PDFhackernoon-trending-stories.pdfв папке проекта. Прокрутите это, и вы увидите:
Фантастика! АЧистый, полностраничный экспорт страницы трендования Hackernoon, ссылки и все, в формате Crisp PDF. Это настоящая автоматизация браузеров, питаемое на вашем собственном агенте искусственного интеллекта.
И это, ребята,Как вы строите агент ИИ с Playwright + MCPПолем Эта вещь серьезно мощная. Пусть готовить. 👨🍳
Скрытые ограничения драматурга MCP (и как их перехитрить)
Прохладный! Вы можете думать:
«Хорошо, у меня есть инструменты… LLM, который может подумать, сервер MCP, который может очистить, и драматург для управления браузером. Игра, верно? Время для автоматизации всего Интернета!»
Ну ... не так быстро. 🛑
Конечно, есть толькоДве основные вещи, которые агенты ИИ должны процветать:
- Доступ к веб-данным в реальном времени (✅ обрабатываетсяИнтеграции MCP с царапином MCP)
- Способность взаимодействовать с браузером (✅ Введите Playwright MCP)
Но вот где все становится интересным ...
Попробуйте спросить своего агента ИИ с драматургом что-то вроде:
Visit g2.com, wait for the page to load, and take a screenshot
А что происходит? Этот! 👇
Он перемещается в G2. ✅ ожидает. ✅ делает скриншот. ✅ Но есть улов:Страница заблокирована за стеной проверки. 😬
И агент даже достаточно вежлив, чтобы сказать вам:
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.
Нет, это не «игра» для нас, как людей. Но, может быть, ... этоигра законченадляНастройка браузера по умолчаниюПолем 😵 💻
🧩 Так что пошло не так?Вот проблема:Ванильный хром! 🙅♂️
Управление для пилялизатора браузера из коробки не предназначено для избежания блоков. Он протекает сигналы повсюду, такие как флаги автоматизации, странные конфигурации и т. Д.До такой степени, что большинство веб -сайтов - JSUT, как G2 - вплоть знают, что это ботПолем 🤖 🚫
Так в чем решение? 👉 aСовместимая на драматург инфраструктурасоздан для поддержки агентских рабочих процессов наОтдаленные браузеры, этонезаблокироватьПолем Мы говорим:
- Бесконечно масштабируемый ⚙
- Работает без головы или головы 👁
- Основано прокси -сетью с 100 м+ жилой IPS 🌍
- Спроектирован, чтобы смешать, как настоящий пользователь 🕵 🕵чего
Хотите знать, что это за волшебный инструмент? Передай приветБраузер агента 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...
ИТочно так же,Нет больше блоков! Нет больше стен бота. Нет больше грустных мемов Гру.
Готов построить агентские рабочие процессы, которыена самом делеработать в живой сети?Bright Data Agent Browser имеет вашу спину!
Смотрите в действии в другой интеграции здесь:
https://www.youtube.com/watch?v=jg_indktgsk&embedable=true
Последние мысли
Теперь вы знаете, как перегружать любого агента искусственного интеллекта, построенного с агентами OpenAI SDK - независимо от того, работает ли он на GPT, Gemini или других, что будет дальше, - подключив его к серверу Playwright MCP для реального управления браузером.
Мы также показали, как повысить уровень, преодолев блоки браузеров, используя яркие данныеАгент браузер, только одна часть мощной инфраструктуры ИИМы создали для поддержки реальных рабочих процессов ИИ в масштабеПолем
В ярких данных наша миссия проста: сделать ИИ доступным для всех, везде. Поэтому до следующего раза - будьте любопытны, оставайтесь смелыми и продолжайте строить будущее ИИ. ✨
Оригинал