Cloudflare Playwright MCP

Cloudflare Playwright MCP-Beispiel

Überblick

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

Es ermöglicht KI-Assistenten, einen Browser über eine Reihe von Tools zu steuern und so Web-Automatisierungsaufgaben wie Navigation, Tippen, Klicken und Aufnehmen von Screenshots auszuführen.

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

Einsetzen

Führen Sie die folgenden Schritte aus, um das Projekt einzurichten und bereitzustellen:

Installieren Sie Abhängigkeiten:

npm ci

Bereitstellung für Cloudflare Workers:

npx wrangler deploy

Verwendung mit Cloudflare AI Playground

Alternativtext

Cloudflare Playground AI ist eine großartige Möglichkeit, MCP-Server mithilfe der in Workers AI verfügbaren LLM-Modelle zu testen.

Navigieren Sie zu https://playground.ai.cloudflare.com/
Stellen Sie sicher, dass das Modell auf llama-3.3-70b-instruct-fp8-fast eingestellt ist
Legen Sie in MCP-Servern die URL auf https://[my-mcp-url].workers.dev/sse
Klicken Sie auf Verbinden
Der Status sollte auf „Verbunden“ aktualisiert werden und es sollten 14 verfügbare Tools aufgelistet sein.

Sie können jetzt mit der Interaktion mit dem Modell beginnen und es führt die erforderlichen Tools aus, um die gewünschten Aufgaben zu erledigen.

[!TIP] Um optimale Ergebnisse zu erzielen, geben Sie einfache Anweisungen, die aus einer einzigen Aktion bestehen, z. B. „Erstellen Sie einen neuen To-do-Eintrag“, „Gehen Sie zur Cloudflare-Site“, „Machen Sie einen Screenshot“.

Beispiel für ein Gespräch:

Rolle	Nachricht
Benutzer	Gehen Sie zu demo.playwright.dev/todomvc
Assistent	Führt das Tool „browser_navigate“ aus . Die Seite wurde zu https://demo.playwright.dev/todomvc/ navigiert. Der Seitentitel lautet „React • TodoMVC“. Der Seiten-Snapshot zeigt den Inhalt der Seite, einschließlich einer Überschrift, eines Textfelds und mehrerer Links.
Benutzer	Erstellen Sie einen To-Do-Eintrag
Assistent	Läuft browser_type tool . Ein neuer To-do-Eintrag „Lebensmittel kaufen“ wurde erstellt. Der Seiten-Snapshot zeigt den aktualisierten Inhalt der Seite, einschließlich des neuen To-do-Eintrags.
Benutzer	Schön. Erstelle jetzt ein Todo im Papageienstil
Assistent	Führt das Tool „Browsertyp“ aus . Ein neuer To-do-Eintrag „Polly will einen Cracker“ wurde im Papageienstil erstellt. Der Seiten-Snapshot zeigt den aktualisierten Inhalt der Seite, einschließlich des neuen To-do-Eintrags.
Benutzer	Und erstelle ein weiteres Todo im Yoda-Stil
Assistent	Läuft browser_type tool. Ein neuer To-do-Eintrag „Ein Spaziergang, den ich machen muss“ wurde im Yoda-Stil erstellt. Der Seiten-Snapshot zeigt den aktualisierten Inhalt der Seite, einschließlich des neuen To-do-Eintrags.
Benutzer	Machen Sie einen Screenshot
Assistent	führt das Tool „browser_take_screenshot“ aus Es wurde ein Screenshot der aktuellen Seite erstellt. Der Screenshot liegt im PNG-Format vor und ist 56 KB groß.
Benutzer	Klicken Sie nun auf das Kontrollkästchen des Papageien-To-Do-Eintrags
Assistent	Das Tool „browser_clickt“ wird ausgeführt. Das Kontrollkästchen des Papageien-Aufgabeneintrags „Polly will einen Cracker“ wurde angeklickt. Der Seiten-Schnappschuss zeigt den aktualisierten Inhalt der Seite mit aktiviertem Kontrollkästchen.
Benutzer	Machen Sie einen Screenshot
Assistent	führt das Tool „browser_take_screenshot“ aus Es wurde ein Screenshot der aktuellen Seite erstellt. Der Screenshot liegt im PNG-Format vor und ist 58 KB groß.
Benutzer	Erledigte To-do-Einträge entfernen
Assistent	Das Tool „Browser_Clickt“ wird ausgeführt . Die Schaltfläche „Abgeschlossene Aufgaben löschen“ wurde angeklickt. Der Seiten-Snapshot zeigt den aktualisierten Inhalt der Seite, wobei der abgeschlossene Aufgabeneintrag „Polly will einen Cracker“ entfernt wurde.
Benutzer	Machen Sie einen letzten Screenshot
Assistent	führt das Tool „browser_take_screenshot“ aus Ein letzter Screenshot der aktuellen Seite wurde erstellt. Der Screenshot liegt im PNG-Format vor und ist 50 KB groß.

Verwendung mit Claude Desktop

Claude Desktop unterstützt derzeit nur lokale MCP-Server. Um playground-mcp mit Claude Desktop zu verwenden, verwenden wir mcp-remote , ein Tool, das Remote-MCP-Server proxisiert und lokal verfügbar macht. Verwenden Sie die folgende Konfiguration:

Öffnen Sie die Konfigurationsdatei für Claude Desktop.
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"
      ]
    }
  }
}

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 für eine Sitzung, in der die TODO-Demo-App geöffnet, „Zitronen kaufen“ hinzugefügt und ein Screenshot erstellt wird, wobei die Playwright-MCP-Tools und das Browser-Rendering genutzt werden:

Alternativtext

In VSCode konfigurieren

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 steht der Playwright MCP-Server zur Verwendung mit Ihrem GitHub Copilot-Agent in VS Code zur Verfügung.

Cloudflare Playwright MCP