Cloudflare Playwright

Controla un navegador para tareas de automatización web usando Playwright en Cloudflare Workers.

Documentación

Ejemplo de Cloudflare Playwright MCP

Resumen

Este proyecto demuestra cómo usar Playwright con Cloudflare Workers como servidor de Protocolo de Control de Modelos (MCP) usando Cloudflare Playwright MCP.

Permite a los asistentes de IA controlar un navegador mediante un conjunto de herramientas, permitiéndoles realizar tareas de automatización web como navegación, escritura, clics y capturas de pantalla.

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

Desplegar

Sigue estos pasos para configurar y desplegar el proyecto:

Instala las dependencias:

npm ci

Despliega en Cloudflare Workers:

npx wrangler deploy

Uso con Cloudflare AI Playground

alt text

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

Navega a https://playground.ai.cloudflare.com/
Asegúrate de que el modelo esté configurado en llama-3.3-70b-instruct-fp8-fast
En MCP Servers, establece URL a https://[my-mcp-url].workers.dev/sse
Haz clic en Connect
El estado debería actualizarse a Connected y debería listar 14 herramientas disponibles

Ahora puedes empezar a interactuar con el modelo, y ejecutará las herramientas necesarias para lograr lo solicitado.

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

Ejemplo de una conversación:

Rol	Mensaje
Usuario	Ve a demo.playwright.dev/todomvc
Asistente	ejecuta la herramienta browser_navigate La página ha sido navegada a https://demo.playwright.dev/todomvc/. El título de la página es "React • TodoMVC". La instantánea de la página muestra el contenido de la página, incluyendo un encabezado, un cuadro de texto y varios enlaces.
Usuario	Crea alguna entrada de tarea
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Comprar víveres". La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Bien. Ahora crea una tarea en estilo loro
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Polly quiere una galleta" en estilo loro. La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Y crea otra tarea en estilo Yoda
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Un paseo, debo dar" en estilo Yoda. La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Toma una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. La captura está en formato PNG y tiene un tamaño de 56KB.
Usuario	Ahora haz clic en la casilla de verificación de la entrada de tarea del loro
Asistente	ejecuta la herramienta browser_clickt Se ha hecho clic en la casilla de verificación de la entrada de tarea del loro "Polly quiere una galleta". La instantánea de la página muestra el contenido actualizado de la página, con la casilla ahora marcada.
Usuario	Toma una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. La captura está en formato PNG y tiene un tamaño de 58KB.
Usuario	Elimina las entradas de tarea completadas
Asistente	ejecuta la herramienta browser_clickt Se ha hecho clic en el botón "Borrar completadas". La instantánea de la página muestra el contenido actualizado de la página, con la entrada de tarea completada "Polly quiere una galleta" eliminada.
Usuario	Toma una captura de pantalla final
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla final de la página actual. La captura está en formato PNG y tiene un tamaño de 50KB.

Uso con Claude Desktop

Por ahora, Claude Desktop solo admite servidores MCP locales. Para usar playground-mcp con Claude Desktop, utilizamos mcp-remote, una herramienta que actúa como proxy de servidores MCP remotos y los expone localmente. Usa la siguiente configuración:

Abre el archivo de configuración de Claude Desktop.
Agrega 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"
      ]
    }
  }
}

Guarda el archivo de configuración y reinicia Claude Desktop para aplicar los cambios.

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

Aquí hay un ejemplo de una sesión que abre la aplicación de demostración TODO, agrega "comprar limones" y toma una captura de pantalla, aprovechando las herramientas de playwright-mcp y Browser Rendering:

alt text

Configurar en VSCode

Puedes 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 usarse con tu agente GitHub Copilot en VS Code.