Skip to main content
Glama
deenesjakoruzh
juilanharkless

cloudflare-playwright-mcp

by juilanharkless
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

Cloudflare Playwright MCP Example

Deploy to Cloudflare

Resumen

Este proyecto demuestra cómo usar Playwright con Cloudflare Workers como un 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, lo que les permite 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:

  1. Instala las dependencias:

npm ci

  1. 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 Conectar

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

Ahora puedes empezar a interactuar con el modelo, y ejecutará las herramientas necesarias para lograr lo que se solicitó.

[!TIP] Para obtener los mejores resultados, da instrucciones simples que consistan en una sola acción, por ejemplo, "Crea una nueva entrada de tarea", "Ve al sitio de Cloudflare", "Toma 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 comestibles". 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 al estilo loro

Asistente

ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Polly quiere una galleta" al 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 al estilo Yoda

Asistente

ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Un paseo, debo dar" al 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 alt text 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 alt text 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 alt text 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, hacemos uso de mcp-remote, una herramienta que actúa como proxy de servidores MCP remotos y los expone localmente. Usa la siguiente configuración:

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

  2. Agrega el siguiente fragmento JSON bajo la sección mcpServers:

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

  1. 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 de GitHub Copilot en VS Code.

This server cannot be installed

F
license - not found
Not graded
quality - not tested
C
maintenance

How are these scores calculated?

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • Cloudflare Playwright MCP

    AI24K
    F
    license
    Not graded
    quality
    C
    maintenance
    Enables AI assistants to control a browser through a set of tools, allowing them to perform web automation tasks like navigation, typing, clicking, and taking screenshots.

  • Cloudflare Playwright MCP

    q275212
    F
    license
    Not graded
    quality
    C
    maintenance
    Enables AI assistants to control a browser through a set of tools, allowing them to perform web automation tasks like navigation, typing, clicking, and taking screenshots.

View all related MCP servers

Related MCP Connectors

  • Skyvern

    AI-powered browser automation — navigate, click, fill forms, and extract data from any website.

  • browserbasehq-mcp-browserbase

    Provides cloud browser automation capabilities using Stagehand and Browserbase, enabling LLMs to i…

  • mcp

    Reliable web access for AI agents: smart HTTP, rotating proxies, and full-browser rendering.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/juilanharkless/playwright-mcp-agent37'

If you have feedback or need assistance with the MCP directory API, please join our Discord server