Cloudflare Playwright MCP

Пример Cloudflare Playwright MCP

Обзор

В этом проекте демонстрируется, как использовать Playwright с Cloudflare Workers в качестве сервера протокола управления моделью (MCP) с использованием Cloudflare Playwright MCP .

Он позволяет помощникам на базе искусственного интеллекта управлять браузером с помощью набора инструментов, что позволяет им выполнять задачи веб-автоматизации, такие как навигация, ввод текста, нажатие клавиш и создание снимков экрана.

Сервер можно использовать с различными платформами ИИ, включая Cloudflare AI Playground, Claude Desktop и GitHub Copilot в VS Code.

Развертывать

Для настройки и развертывания проекта выполните следующие действия:

1. Установить зависимости:

2. Развертывание в Cloudflare Workers:

Использование с Cloudflare AI Playground

Cloudflare Playground AI — отличный способ протестировать серверы MCP с использованием моделей LLM, доступных в Workers AI.

• Перейдите по адресу https://playground.ai.cloudflare.com/
• Убедитесь, что модель установлена на llama-3.3-70b-instruct-fp8-fast
• В разделе «Серверы MCP» установите URL -адрес https://[my-mcp-url].workers.dev/sse
• Нажмите «Подключиться».
• Статус должен обновиться до «Подключено» , и должно быть указано 14 доступных инструментов.

Теперь вы можете начать взаимодействовать с моделью, и она запустит необходимые инструменты для выполнения запрошенного.

[!СОВЕТ] Для достижения наилучших результатов давайте простые инструкции, состоящие из одного действия, например, «Создать новую запись в списке дел», «Перейти на сайт Cloudflare», «Сделать снимок экрана».

Пример разговора:

Роль	Сообщение
Пользователь	Перейти на demo.playwright.dev/todomvc
Помощник	запускает инструмент browser_navigate Страница перенаправлена на https://demo.playwright.dev/todomvc/ . Заголовок страницы — «React • TodoMVC». Снимок страницы показывает ее содержимое, включая заголовок, текстовое поле и несколько ссылок.
Пользователь	Создайте запись в списке дел
Помощник	запускает инструмент browser_type Создана новая запись todo "Купить продукты". Снимок страницы показывает обновленное содержимое страницы, включая новую запись todo.
Пользователь	Отлично. Теперь создай todo в стиле попугая
Помощник	запускает инструмент browser_type. Новая запись todo "Polly wants a cracker" была создана в стиле попугая. Снимок страницы показывает обновленное содержимое страницы, включая новую запись todo.
Пользователь	И создай еще одну задачу в стиле Йоды
Помощник	запускает инструмент browser_type. Создана новая запись todo "A walk, I must take" в стиле Йоды. Снимок страницы показывает обновленное содержимое страницы, включая новую запись todo.
Пользователь	Сделать снимок экрана
Помощник	запускает инструмент браузера_сделать_скриншот Сделан снимок экрана текущей страницы. Снимок экрана в формате PNG и имеет размер 56 КБ.
Пользователь	Теперь установите флажок рядом с записью Parrot todo.
Помощник	запускает инструмент browser_clickt Был нажат флажок записи Parrot todo "Polly wants a cracker". Снимок страницы показывает обновленное содержимое страницы, с установленным флажком.
Пользователь	Сделать снимок экрана
Помощник	запускает инструмент браузера_сделать_скриншот Сделан снимок экрана текущей страницы. Снимок экрана в формате PNG и имеет размер 58 КБ.
Пользователь	Удалить выполненные записи дел
Помощник	запускает инструмент browser_clickt . Была нажата кнопка «Очистить выполненное». Снимок страницы показывает обновленное содержимое страницы, при этом выполненная запись todo «Полли хочет крекера» удалена.
Пользователь	Сделайте последний снимок экрана
Помощник	запускает инструмент браузера_сделать_скриншот Сделан последний снимок экрана текущей страницы. Снимок экрана в формате PNG и имеет размер 50 КБ.

Использовать с Claude Desktop

На данный момент Claude Desktop поддерживает только локальные серверы MCP. Для использования playground-mcp с Claude Desktop мы используем mcp-remote — инструмент, который проксирует удаленные серверы MCP и предоставляет их локально. Используйте следующую конфигурацию:

1. Откройте файл конфигурации для Claude Desktop.
2. Добавьте следующий фрагмент JSON в раздел mcpServers :

3. Сохраните файл конфигурации и перезапустите Claude Desktop, чтобы изменения вступили в силу.

Такая настройка гарантирует, что Claude Desktop сможет взаимодействовать с сервером Cloudflare Playwright MCP.

Вот пример сеанса открытия демонстрационного приложения TODO, добавления «купить лимоны» и создания снимка экрана с использованием инструментов playwright-mcp и рендеринга в браузере:

Настроить в VSCode

Вы можете установить сервер Playwright MCP с помощью VS Code CLI :

После установки сервер Playwright MCP будет доступен для использования с вашим агентом GitHub Copilot в VS Code.