Cloudflare Playwright

Controle um navegador para tarefas de automação web usando Playwright em Cloudflare Workers.

Documentação

Exemplo de MCP do Cloudflare Playwright

Visão geral

Este projeto demonstra como usar o Playwright com Cloudflare Workers como um servidor de Protocolo de Controle de Modelo (MCP) usando o Cloudflare Playwright MCP.

Ele permite que assistentes de IA controlem um navegador por meio de um conjunto de ferramentas, permitindo que eles executem tarefas de automação web, como navegação, digitação, cliques e captura de telas.

O servidor pode ser usado com várias plataformas de IA, incluindo o Cloudflare AI Playground, o Claude Desktop e o 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

O Cloudflare playground AI é uma ótima maneira de testar servidores MCP usando modelos de 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 a URL como https://[my-mcp-url].workers.dev/sse
Clique em Connect
O status deve ser atualizado para Connected 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	Ir 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	Criar uma 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 uma bolacha" 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	Tirar 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 uma bolacha" 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	Tirar 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	Remover 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 uma bolacha" removida.
Usuário	Tirar 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 o Claude Desktop

Atualmente, o Claude Desktop só suporta 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 MCP do Cloudflare Playwright.

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 do playwright-mcp e a Renderização do Navegador:

alt text

Configuração no VSCode

Você pode instalar o servidor MCP do Playwright 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 MCP do Playwright estará disponível para uso com seu agente do GitHub Copilot no VS Code.