Cloudflare Playwright MCP

Ejemplo de MCP de Playwright de Cloudflare

Descripción general

Este proyecto demuestra cómo utilizar Playwright con Cloudflare Workers como un servidor de Protocolo de control de modelos (MCP) utilizando Cloudflare Playwright MCP .

Permite a los asistentes de IA controlar un navegador a través de un conjunto de herramientas, lo que les permite realizar tareas de automatización web como navegar, escribir, hacer clic y tomar capturas de pantalla.

El servidor se puede utilizar con varias plataformas de IA, incluidas Cloudflare AI Playground, Claude Desktop y GitHub Copilot en VS Code.

Desplegar

Siga estos pasos para configurar e implementar el proyecto:

1. Instalar dependencias:

npm ci

2. Implementar en Cloudflare Workers:

npx wrangler deploy

Úselo con Cloudflare AI Playground

Cloudflare Playground AI es una excelente manera de probar servidores MCP utilizando modelos LLM disponibles en Workers AI.

• Vaya a https://playground.ai.cloudflare.com/

• Asegúrese de que el modelo esté configurado en llama-3.3-70b-instruct-fp8-fast

• En Servidores MCP , configure la URL en https://[my-mcp-url].workers.dev/sse

• Haga clic en Conectar

• El estado debería actualizarse a Conectado y debería enumerar 14 herramientas disponibles

Ahora puede comenzar a interactuar con el modelo y ejecutará las herramientas necesarias para lograr lo solicitado.

[!TIP] Para obtener mejores resultados, dé instrucciones simples que consten de una sola acción, por ejemplo, "Crear una nueva entrada de tarea pendiente", "Ir al sitio de Cloudflare", "Tomar una captura de pantalla".

Ejemplo de conversación:

Usar con Claude Desktop

Actualmente, Claude Desktop solo admite servidores MCP locales. Para usar playground-mcp con Claude Desktop, utilizamos mcp-remote , una herramienta que redirige servidores MCP remotos y los expone localmente. Utilice la siguiente configuración:

1. Abra el archivo de configuración de Claude Desktop.

2. Agregue el siguiente fragmento JSON en la sección mcpServers :

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

3. Guarde el archivo de configuración y reinicie Claude Desktop para aplicar los cambios.

Esta configuración garantiza que Claude Desktop pueda comunicarse con el servidor Cloudflare Playwright MCP.

A continuación, se muestra un ejemplo de una sesión que abre la aplicación de demostración TODO, agrega "comprar limones" y realiza una captura de pantalla, aprovechando las herramientas de playwright-mcp y la representación del navegador:

Configurar en VSCode

Puede instalar el servidor Playwright MCP usando la CLI de VS Code :

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

Después de la instalación, el servidor Playwright MCP estará disponible para su uso con su agente GitHub Copilot en VS Code.