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:

2. Implementar en Cloudflare Workers:

Ú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:

Role	Mensaje
Usuario	Vaya a demo.playwright.dev/todomvc
Asistente	Se ejecuta la herramienta browser_navigate. Se ha accedido a la página https://demo.playwright.dev/todomvc/ . El título de la página es "React • TodoMVC". La captura de pantalla muestra su contenido, incluyendo un encabezado, un cuadro de texto y varios enlaces.
Usuario	Crear alguna entrada de tareas pendientes
Asistente	Se ejecuta la herramienta browser_type. Se ha creado una nueva entrada de tarea "Comprar comestibles". La captura de pantalla muestra el contenido actualizado, incluyendo la nueva entrada de tarea.
Usuario	Bien. Ahora crea una tarea en estilo loro.
Asistente	Se ejecuta la herramienta browser_type. Se ha creado una nueva entrada de tarea "Polly quiere una galleta" en estilo Parrot. La captura de pantalla muestra el contenido actualizado, incluyendo la nueva entrada de tarea.
Usuario	Y crea otra tarea pendiente al estilo Yoda
Asistente	Se ejecuta la herramienta browser_type. Se ha creado una nueva entrada de tarea "Un paseo, debo dar" al estilo Yoda. La captura de pantalla muestra el contenido actualizado, incluyendo la nueva entrada de tarea.
Usuario	Tomar una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. Está en formato PNG y ocupa 56 KB.
Usuario	Ahora haga clic en la casilla de verificación de la entrada de tareas pendientes del loro
Asistente	Se ejecuta la herramienta browser_clickt. Se ha marcado la casilla de verificación de la entrada de tareas pendientes de Parrot "Polly quiere una galleta". La captura de pantalla muestra el contenido actualizado, con la casilla marcada.
Usuario	Tomar una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. Está en formato PNG y ocupa 58 KB.
Usuario	Eliminar entradas de tareas completadas
Asistente	Ejecuta la herramienta browser_clickt . Se ha hecho clic en el botón "Borrar completado". La captura de pantalla muestra el contenido actualizado, con la entrada de tarea completada "Polly quiere una galleta" eliminada.
Usuario	Tomar 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. Está en formato PNG y ocupa 50 KB.

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 :

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 :

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