Пример Cloudflare Playwright MCP
Обзор
В этом проекте демонстрируется, как использовать Playwright с Cloudflare Workers в качестве сервера протокола управления моделью (MCP) с использованием Cloudflare Playwright MCP .
Он позволяет помощникам на базе искусственного интеллекта управлять браузером с помощью набора инструментов, что позволяет им выполнять задачи веб-автоматизации, такие как навигация, ввод текста, нажатие клавиш и создание снимков экрана.
Сервер можно использовать с различными платформами ИИ, включая Cloudflare AI Playground, Claude Desktop и GitHub Copilot в VS Code.
Развертывать
Для настройки и развертывания проекта выполните следующие действия:
Установить зависимости:
Развертывание в 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 и предоставляет их локально. Используйте следующую конфигурацию:
Откройте файл конфигурации для Claude Desktop.
Добавьте следующий фрагмент JSON в раздел
mcpServers:
Сохраните файл конфигурации и перезапустите Claude Desktop, чтобы изменения вступили в силу.
Такая настройка гарантирует, что Claude Desktop сможет взаимодействовать с сервером Cloudflare Playwright MCP.
Вот пример сеанса открытия демонстрационного приложения TODO, добавления «купить лимоны» и создания снимка экрана с использованием инструментов playwright-mcp и рендеринга в браузере:
Настроить в VSCode
Вы можете установить сервер Playwright MCP с помощью VS Code CLI :
После установки сервер Playwright MCP будет доступен для использования с вашим агентом GitHub Copilot в VS Code.