cloudflare-playwright-mcp

Cloudflare Playwright MCP Beispiel

Überblick

Dieses Projekt zeigt, wie man Playwright mit Cloudflare Workers als Model Control Protocol (MCP)-Server mithilfe von Cloudflare Playwright MCP verwendet.

Es ermöglicht KI-Assistenten, einen Browser über eine Reihe von Werkzeugen zu steuern, sodass sie Webautomatisierungsaufgaben wie Navigation, Tippen, Klicken und das Aufnehmen von Screenshots ausführen können.

Der Server kann mit verschiedenen KI-Plattformen verwendet werden, darunter Cloudflare AI Playground, Claude Desktop und GitHub Copilot in VS Code.

Bereitstellen

Befolgen Sie diese Schritte, um das Projekt einzurichten und bereitzustellen:

1. Abhängigkeiten installieren:

npm ci

2. In Cloudflare Workers bereitstellen:

npx wrangler deploy

Verwendung mit Cloudflare AI Playground

Cloudflare playground AI ist eine großartige Möglichkeit, MCP-Server mit LLM-Modellen zu testen, die in Workers AI verfügbar sind.

• Navigieren Sie zu https://playground.ai.cloudflare.com/

• Stellen Sie sicher, dass das Modell auf llama-3.3-70b-instruct-fp8-fast gesetzt ist

• Setzen Sie unter MCP-Server die URL auf https://[my-mcp-url].workers.dev/sse

• Klicken Sie auf Verbinden

• Der Status sollte sich auf Verbunden aktualisieren und es sollten 14 verfügbare Werkzeuge aufgelistet werden.

Sie können nun beginnen, mit dem Modell zu interagieren, und es wird die erforderlichen Werkzeuge ausführen, um das Gewünschte zu erreichen.

[!TIP] Für beste Ergebnisse geben Sie einfache Anweisungen, die aus einer einzigen Aktion bestehen, z. B. „Neuen Todo-Eintrag erstellen“, „Zur Cloudflare-Seite gehen“, „Screenshot aufnehmen“

Beispiel einer Unterhaltung:

Verwendung mit Claude Desktop

Derzeit unterstützt Claude Desktop nur lokale MCP-Server. Um playground-mcp mit Claude Desktop zu verwenden, nutzen wir mcp-remote, ein Tool, das entfernte MCP-Server als Proxy bereitstellt und sie lokal verfügbar macht. Verwenden Sie die folgende Konfiguration:

1. Öffnen Sie die Konfigurationsdatei für Claude Desktop.

2. Fügen Sie den folgenden JSON-Ausschnitt unter dem Abschnitt mcpServers hinzu:

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

3. Speichern Sie die Konfigurationsdatei und starten Sie Claude Desktop neu, um die Änderungen zu übernehmen.

Dieses Setup stellt sicher, dass Claude Desktop mit dem Cloudflare Playwright MCP-Server kommunizieren kann.

Hier ist ein Beispiel einer Sitzung, die die TODO-Demo-App öffnet, „Zitronen kaufen“ hinzufügt und einen Screenshot macht, wobei die playwright-mcp-Tools und das Browser-Rendering genutzt werden:

Konfiguration in VSCode

Sie können den Playwright MCP-Server mithilfe der VS Code CLI installieren:

# 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"}'

Nach der Installation ist der Playwright MCP-Server für die Verwendung mit Ihrem GitHub Copilot-Agenten in VS Code verfügbar.