Cloudflare Browser Rendering

Fornece contexto web para LLMs usando a API de Renderização de Navegador da Cloudflare.

Documentação

Servidor MCP Cloudflare Browser Rendering

Este servidor MCP (Model Context Protocol) fornece ferramentas para buscar e processar conteúdo web usando o Cloudflare Browser Rendering para uso como contexto em LLMs. Ele foi projetado para funcionar com os ambientes de cliente Claude e Cline.

cloudflare-browser-rendering-mcp MCP server

Funcionalidades

Busca de Conteúdo Web: Busca e processa páginas web para contexto de LLM
Pesquisa de Documentação: Pesquisa a documentação do Cloudflare e retorna conteúdo relevante
Extração de Conteúdo Estruturado: Extrai conteúdo estruturado de páginas web usando seletores CSS
Resumo de Conteúdo: Resume conteúdo web para um contexto de LLM mais conciso
Captura de Screenshots: Captura screenshots de páginas web

Pré-requisitos

Node.js v18 ou superior
Uma conta Cloudflare com acesso à API do Browser Rendering
Um Cloudflare Worker implantado usando o arquivo puppeteer-worker.js fornecido

Instalação

Instalação via Smithery

Para instalar o Cloudflare Browser Rendering para Claude Desktop automaticamente via Smithery:

npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude

Clone este repositório:

git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering

Instale as dependências:
```
npm install
```
Compile o projeto:
```
npm run build
```

Configuração do Cloudflare Worker

Implante o arquivo puppeteer-worker.js no Cloudflare Workers usando Wrangler:
```
npx wrangler deploy
```
Certifique-se de configurar os seguintes bindings no seu Cloudflare Worker:
- Binding do Browser Rendering chamado browser
- Binding do namespace KV chamado SCREENSHOTS
Anote a URL do seu worker implantado (por exemplo, https://browser-rendering-api.yourusername.workers.dev)

Configuração

Para Claude Desktop

Abra o arquivo de configuração do Claude Desktop:

# macOS
code ~/Library/Application\ Support/Claude/claude_desktop_config.json

# Windows
code %APPDATA%\Claude\claude_desktop_config.json

Adicione a configuração do servidor MCP:

{
  "mcpServers": {
    "cloudflare-browser-rendering": {
      "command": "node",
      "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
      "env": {
        "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

Reinicie o Claude Desktop

Para Cline

Abra o arquivo de configurações MCP do Cline:

# macOS
code ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

# Windows
code %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

Adicione a configuração do servidor MCP:

{
  "mcpServers": {
    "cloudflare-browser-rendering": {
      "command": "node",
      "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"],
      "env": {
        "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev"
      },
      "disabled": false,
      "autoApprove": []
    }
  }
}

Uso

Uma vez configurado, o servidor MCP estará disponível tanto para Claude Desktop quanto para Cline. Você pode usar as seguintes ferramentas:

fetch_page

Busca e processa uma página web para contexto de LLM.

Parâmetros:

url (obrigatório): URL a ser buscada
maxContentLength (opcional): Comprimento máximo do conteúdo a retornar

Exemplo:

Can you fetch and summarize the content from https://developers.cloudflare.com/browser-rendering/?

search_documentation

Pesquisa a documentação do Cloudflare e retorna conteúdo relevante.

Parâmetros:

query (obrigatório): Consulta de pesquisa
maxResults (opcional): Número máximo de resultados a retornar

Exemplo:

Search the Cloudflare documentation for information about "browser rendering API".

extract_structured_content

Extrai conteúdo estruturado de uma página web usando seletores CSS.

Parâmetros:

url (obrigatório): URL da qual extrair conteúdo
selectors (obrigatório): Seletores CSS para extrair conteúdo

Exemplo:

Extract the main heading and first paragraph from https://developers.cloudflare.com/browser-rendering/ using the selectors h1 and p.

summarize_content

Resume o conteúdo web para um contexto de LLM mais conciso.

Parâmetros:

url (obrigatório): URL a ser resumida
maxLength (opcional): Comprimento máximo do resumo

Exemplo:

Summarize the content from https://developers.cloudflare.com/browser-rendering/ in 300 words or less.

take_screenshot

Captura uma screenshot de uma página web.

Parâmetros:

url (obrigatório): URL da qual capturar uma screenshot
width (opcional): Largura do viewport em pixels (padrão: 1280)
height (opcional): Altura do viewport em pixels (padrão: 800)
fullPage (opcional): Se deve capturar uma screenshot da página inteira ou apenas do viewport (padrão: false)

Exemplo:

Take a screenshot of https://developers.cloudflare.com/browser-rendering/ with a width of 1024 pixels.

Solução de Problemas

Registro de Logs

O servidor MCP usa registro de logs abrangente com os seguintes prefixos:

[Setup]: Inicialização e configuração
[API]: Requisições e respostas da API
[Error]: Tratamento de erros e depuração

Para visualizar os logs:

Claude Desktop: Verifique os logs em ~/Library/Logs/Claude/mcp*.log (macOS) ou %APPDATA%\Claude\Logs\mcp*.log (Windows)
Cline: Os logs aparecem no console de saída da extensão VSCode

Problemas Comuns

"A variável de ambiente BROWSER_RENDERING_API não está definida"
- Certifique-se de ter definido a URL correta para o seu Cloudflare Worker na configuração do servidor MCP
"A API do Cloudflare Worker está indisponível ou não configurada"
- Verifique se o seu Cloudflare Worker está implantado e em execução
- Verifique se a URL está correta e acessível
"O binding do Browser não está disponível"
- Certifique-se de ter configurado o binding do Browser Rendering no seu Cloudflare Worker
"O binding KV de SCREENSHOTS não está disponível"
- Certifique-se de ter configurado o binding do namespace KV no seu Cloudflare Worker

Desenvolvimento

Estrutura do Projeto

src/index.ts: Ponto de entrada principal
src/server.ts: Implementação do servidor MCP
src/browser-client.ts: Cliente para interagir com o Cloudflare Browser Rendering
src/content-processor.ts: Processa conteúdo web para contexto de LLM
puppeteer-worker.js: Implementação do Cloudflare Worker

Compilação

npm run build

Testes

O projeto inclui um script de teste abrangente que verifica se todas as ferramentas MCP estão funcionando corretamente:

npm test

Isso irá:

Iniciar o servidor MCP
Testar cada ferramenta com requisições de exemplo
Verificar as respostas
Fornecer um resumo dos resultados dos testes

Você também pode executar testes individuais para componentes específicos:

# Test the Puppeteer integration
npm run test:puppeteer

Para que os testes funcionem corretamente, certifique-se de ter:

Compilado o projeto com npm run build
Definido a variável de ambiente BROWSER_RENDERING_API para a URL do seu Cloudflare Worker
Implantado o Cloudflare Worker com os bindings necessários

Licença

MIT