dev-browser (Claude Skill) — Instalar & Demo ao vivo

Por que usar

Principais recursos

Navegador CDP como skill — sem configuração separada de MCP
Screenshots entre etapas para ancoragem visual
Snapshots do DOM otimizados para consumo por LLM (com controle de tamanho)
Funciona com Chromium; local ou em container
Licenciado MIT

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "dev-browser-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ],
      "_inferred": true
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "dev-browser-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/SawyerHood/dev-browser",
        "~/.claude/skills/dev-browser"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "dev-browser-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/SawyerHood/dev-browser",
          "~/.claude/skills/dev-browser"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add dev-browser-skill -- git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: dev-browser

Fazer pesquisa rápida na web sem configurar um MCP

👤 Devs que não querem o Playwright na configuração do MCP ⏱ ~15 min beginner

Quando usar: Você quer que sua sessão do Claude Code navegue em algo pontualmente sem se comprometer com um servidor de navegador persistente.

Pré-requisitos

Skill instalado — git clone https://github.com/SawyerHood/dev-browser ~/.claude/skills/dev-browser
Chromium disponível — npx playwright install chromium baixa o binário

Fluxo

Inicializar

Use dev-browser. Abra https://vercel.com/docs/functions. Liste as seções da barra lateral.✓ Copiado

→ Títulos extraídos com URLs de âncora
Aprofundar

Navegue para "Runtime" — leia a página e resuma as três opções de runtime em um parágrafo cada.✓ Copiado

→ Três parágrafos com citações para fragmentos de URL
Capturar

Faça screenshot da seção de preços para minhas notas.✓ Copiado

→ Screenshot salvo localmente

Resultado: Pesquisa feita com um navegador quando você precisava de um, sem infraestrutura contínua.

Armadilhas

Binário do Chromium ausente — Execute npx playwright install chromium uma vez

Combine com: filesystem

Verificação rápida de um fluxo de login em ambiente de staging

👤 Devs com mentalidade de QA antes do deploy ⏱ ~5 min beginner

Quando usar: Antes de fazer deploy, você quer clicar pelo caminho feliz crítico uma vez.

Fluxo

Abrir

Use dev-browser. Abra https://staging.myapp.com, tire um screenshot.✓ Copiado

→ Screenshot da landing page
Entrar

Clique em "Entrar", insira [email protected] / Test1234, envie.✓ Copiado

→ Dashboard pós-login capturado
Confirmar

A string "Bem-vindo, qa" está visível na página?✓ Copiado

→ Sim/não + screenshot

Resultado: Um smoke test de 60 segundos antes de clicar em Deploy.

Armadilhas

CAPTCHA no login — Adicione um bypass exclusivo para testes no staging; o dev-browser não quebra captchas

Combinações

Combine com outros MCPs para 10× de alavancagem

dev-browser-skill + filesystem

Salvar screenshots junto com as notas

Após cada etapa, salve o screenshot em /notes/web-research/.✓ Copiado

dev-browser-skill + chrome-devtools

Quando precisar de profundidade no nível de devtools, escale para o chrome-devtools MCP

dev-browser me deu a página — agora use chrome-devtools para verificar o waterfall de rede.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
open_url	url	Navegar
click	selector\|text	Interagir
type	selector, text	Inserir texto
snapshot	none	Ancorar no estado atual

Custo e limites

O que custa rodar

Cota de API: N/A
Tokens por chamada: Snapshots DOM com limite de tamanho; screenshots em base64
Monetário: Gratuito
Dica: Pule snapshots quando não precisar — o screenshot isolado geralmente é suficiente

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum

Saída de dados: Direto para os sites que você navega

Não insira credenciais reais em sites durante sessões controladas por agente — use contas de teste

Solução de problemas

Erros comuns e correções

Error: Executable doesn't exist at chromium path

npx playwright install chromium — o skill assume os binários do Playwright

Seletor não encontrado

Execute snapshot primeiro; escolha o seletor do DOM real, não adivinhado

Página bloqueia automação

O site detectou headless — tente executar com headless=false na configuração do skill

Alternativas

dev-browser vs. outros

Alternativa	Quando usar	Troca
playwright MCP	Você quer um navegador persistente registrado no MCP	Mais configuração; o skill é mais leve
mcp-chrome	Você precisa do seu Chrome real já logado	Não é um navegador de teste headless

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills