de en es ja ko ru zh

cloudflare-playwright-mcp

Name: cloudflare-playwright-mcp
Author: juilanharkless

by juilanharkless

Overview Schema Source Related Servers Discussions Admin

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:

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

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

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 deployed

Let your AI agent see the webWeb-to-screenshot MCP for Claude, Cursor and Codex. No cookie banners. Free to start.snap-render.comAd

Resources

Related MCP Connectors

BrowserHereOAuth
app.1ts.browserhere
Control a real browser from AI agents: navigate, click, type, screenshot, read the page.
Browser Automation Agent Orchestration
1
https://browserhere.1ts.app/mcp
SkyvernOAuth
io.github.Skyvern-AI
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
Browser Automation Web Scraping App Automation
223,286
https://api.skyvern.com/mcp/
ActionbookOAuth
app.actionbook
Let your AI agent operate any website through a real, logged-in browser session.
Browser Automation Agent Orchestration
11,619
https://edge.actionbook.app/mcp
RunHarvester
com.runharvester
Web data extraction and browser workflows for AI assistants.
Web Scraping Browser Automation
1
https://api.runharvester.com/mcp

Related MCP Servers

Cloudflare Playwright MCP
Browser Automation App Automation
AI24K
A
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.
Updated a year ago (2025-05-30 01:41 UTC)
Apache 2.0
Cloudflare Playwright MCP
Browser Automation Web Scraping
xvv6u577
A
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.
Updated a year ago (2025-06-14 01:08 UTC)
Apache 2.0
Cloudflare Playwright MCP
q275212
A
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.
Updated a year ago (2025-07-21 02:22 UTC)
Apache 2.0
Cloudflare Playwright MCP
Browser Automation Web Scraping
marlonsena
A
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.
Updated 9 months ago (2026-01-28 23:37 UTC)
Apache 2.0