cloudflare-playwright-mcp

Пример Cloudflare Playwright MCP

Обзор

Этот проект демонстрирует, как использовать Playwright with Cloudflare Workers в качестве сервера Model Control Protocol (MCP) с помощью Cloudflare Playwright MCP.

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

Сервер можно использовать с различными AI-платформами, включая 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 Servers установите URL на https://[my-mcp-url].workers.dev/sse

• Нажмите Подключиться

• Статус должен обновиться на Подключено, и в списке должно появиться 14 доступных инструментов

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

[!TIP] Для достижения наилучших результатов давайте простые инструкции, состоящие из одного действия, например: «Создать новую запись в списке дел», «Перейти на сайт 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 и Browser Rendering:

Настройка в 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.