Cloudflare Playwright

Controle um navegador para tarefas de automação web como navegação, digitação, cliques e captura de telas usando Playwright no Cloudflare Workers.

GitHub

Documentação

Exemplo de Cloudflare Playwright MCP

Visão geral

Este projeto demonstra como usar Playwright com Cloudflare Workers como um servidor Model Control Protocol (MCP) usando Cloudflare Playwright MCP.

Ele permite que assistentes de IA controlem um navegador por meio de um conjunto de ferramentas, permitindo que realizem tarefas de automação web como navegação, digitação, cliques e capturas de tela.

O servidor pode ser usado com várias plataformas de IA, incluindo Cloudflare AI Playground, Claude Desktop e GitHub Copilot no VS Code.

Implantação

Siga estas etapas para configurar e implantar o projeto:

Instale as dependências:

npm ci

Implante no Cloudflare Workers:

npx wrangler deploy

Uso com o Cloudflare AI Playground

alt text

Cloudflare playground AI é uma ótima maneira de testar servidores MCP usando modelos LLM disponíveis no Workers AI.

Navegue até https://playground.ai.cloudflare.com/
Certifique-se de que o modelo esteja definido como llama-3.3-70b-instruct-fp8-fast
Em MCP Servers, defina URL para https://[my-mcp-url].workers.dev/sse
Clique em Conectar
O status deve ser atualizado para Conectado e deve listar 14 ferramentas disponíveis

Agora você pode começar a interagir com o modelo, e ele executará as ferramentas necessárias para realizar o que foi solicitado.

[!TIP] Para obter melhores resultados, dê instruções simples que consistam em uma única ação, por exemplo, "Criar uma nova entrada de tarefa", "Ir para o site da Cloudflare", "Tirar uma captura de tela"

Exemplo de uma conversa:

Papel	Mensagem
Usuário	Vá para demo.playwright.dev/todomvc
Assistente	executa a ferramenta browser_navigate A página foi navegada para https://demo.playwright.dev/todomvc/. O título da página é "React • TodoMVC". O instantâneo da página mostra o conteúdo da página, incluindo um cabeçalho, uma caixa de texto e vários links.
Usuário	Crie alguma entrada de tarefa
Assistente	executa a ferramenta browser_type Uma nova entrada de tarefa "Comprar mantimentos" foi criada. O instantâneo da página mostra o conteúdo atualizado da página, incluindo a nova entrada de tarefa.
Usuário	Legal. Agora crie uma tarefa no estilo papagaio
Assistente	executa a ferramenta browser_type Uma nova entrada de tarefa "Polly quer um biscoito" foi criada no estilo papagaio. O instantâneo da página mostra o conteúdo atualizado da página, incluindo a nova entrada de tarefa.
Usuário	E crie outra tarefa no estilo Yoda
Assistente	executa a ferramenta browser_type Uma nova entrada de tarefa "Uma caminhada, devo dar" foi criada no estilo Yoda. O instantâneo da página mostra o conteúdo atualizado da página, incluindo a nova entrada de tarefa.
Usuário	Tire uma captura de tela
Assistente	executa a ferramenta browser_take_screenshot Uma captura de tela da página atual foi tirada. A captura de tela está no formato PNG e tem 56KB de tamanho.
Usuário	Agora clique na caixa de seleção da entrada de tarefa do papagaio
Assistente	executa a ferramenta browser_clickt A caixa de seleção da entrada de tarefa do papagaio "Polly quer um biscoito" foi clicada. O instantâneo da página mostra o conteúdo atualizado da página, com a caixa de seleção agora marcada.
Usuário	Tire uma captura de tela
Assistente	executa a ferramenta browser_take_screenshot Uma captura de tela da página atual foi tirada. A captura de tela está no formato PNG e tem 58KB de tamanho.
Usuário	Remova as entradas de tarefa concluídas
Assistente	executa a ferramenta browser_clickt O botão "Limpar concluídas" foi clicado. O instantâneo da página mostra o conteúdo atualizado da página, com a entrada de tarefa concluída "Polly quer um biscoito" removida.
Usuário	Tire uma captura de tela final
Assistente	executa a ferramenta browser_take_screenshot Uma captura de tela final da página atual foi tirada. A captura de tela está no formato PNG e tem 50KB de tamanho.

Uso com Claude Desktop

Atualmente, o Claude Desktop suporta apenas servidores MCP locais. Para usar o playground-mcp com o Claude Desktop, utilizamos o mcp-remote, uma ferramenta que faz proxy de servidores MCP remotos e os expõe localmente. Use a seguinte configuração:

Abra o arquivo de configuração do Claude Desktop.
Adicione o seguinte trecho JSON na seção mcpServers:

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

Salve o arquivo de configuração e reinicie o Claude Desktop para aplicar as alterações.

Essa configuração garante que o Claude Desktop possa se comunicar com o servidor Cloudflare Playwright MCP.

Aqui está um exemplo de uma sessão abrindo o aplicativo de demonstração TODO, adicionando "comprar limões" e tirando uma captura de tela, aproveitando as ferramentas playwright-mcp e o Browser Rendering:

alt text

Configurar no VSCode

Você pode instalar o servidor Playwright MCP usando a CLI do 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"}'

Após a instalação, o servidor Playwright MCP estará disponível para uso com seu agente GitHub Copilot no VS Code.