Cloudflare Playwright MCP

Пример Cloudflare Playwright MCP

Обзор

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

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

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

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

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

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

npm ci

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

npx wrangler deploy

Использование с 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», «Сделать снимок экрана».

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

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

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

1. Откройте файл конфигурации для Claude Desktop.

2. Добавьте следующий фрагмент JSON в раздел mcpServers :

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

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

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

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

Настроить в VSCode

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

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

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