Isso foi uma das coisas mais legais que comecei a usar nessa nova vida de proto-vibecoder. Ao invés de ficar descrevendo o que tá acontecendo no browser, simplesmente digo, “olha o mcpbrowser tá ativado, dá um visu lá”.

Seguem os passos que executei para poder ter essa facilidade.

Pré-requisitos

  • Node.js instalado (node --version)
  • OpenCode instalado
  • Google Chrome

Arquivo de configuração

Primeira coisa é garantir/verificar se o arquivo de configuração existe. O OpenCode lê a configuração de ~/.config/opencode/opencode.json (global) garanta a existência do doretório:

./opencode.json (por projeto).

mkdir -p ~/.config/opencode

Então crie ou edite o arquivo:

~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "plugin": ["opencode-browser"],
  "mcp": {
    "browsermcp": {
      "type": "local",
      "command": ["npx", "-y", "@browsermcp/mcp@0.1.3"],
      "enabled": true
    }
  }
}

Os campos são para:

CampoDescrição
plugin: ["opencode-browser"]Carrega o plugin que adiciona guias de performance e otimiza o uso das ferramentas de browser
mcp.browsermcpDefine o servidor MCP do Browser MCP
type: "local"Executa o servidor localmente
command: ["npx", "-y", "@browsermcp/mcp@0.1.3"]Usa npx para baixar e executar o pacote automaticamente. O -y pula confirmação, e a versão @0.1.3 é fixa para reprodutibilidade
enabled: trueAtiva o servidor MCP

Ou então, gerando tudo automagicamente:

npx opencode-browser init --global

Instalar a extensão do navegador

  1. Acesse browsermcp.io/install
  2. Instale a extensão Browser MCP no Chrome
  3. Fixe o ícone da extensão na barra de ferramentas para acesso rápido

Conectar a extensão ao servidor MCP

Conectar ao MCP

  1. Abra uma aba no Chrome/Edge na página que deseja automatizar
  2. Clique no ícone da extensão Browser MCP na barra de ferramentas
  3. Clique no botão “Connect”

A extensão conecta a aba atual ao servidor MCP. Todas as ações do browser serão executadas nesta aba especificamente.

Conectar ao MCP

Comportamento da conexão

  • A conexão é por aba, não por navegador. Se você mudar para outra aba, ela não estará conectada.
  • A conexão se perde ao fechar/reiniciar o navegador. É necessário clicar em “Connect” novamente.
  • Não há opção de auto-conexão permanente. Isso é intencional, por segurança: exige que você autorize explicitamente antes de uma IA controlar seu navegador.

Na prática, o fluxo é rápido: abrir o Chrome → clicar no ícone da extensão → “Connect” (2 segundos).

Funciona mesmo?

Reinicie o OpenCode. As ferramentas do browser devem aparecer disponíveis:

  • browsermcp_browser_navigate — navegar para uma URL
  • browsermcp_browser_click — clicar em elementos
  • browsermcp_browser_type — digitar em campos
  • browsermcp_browser_snapshot — capturar a árvore de acessibilidade
  • browsermcp_browser_screenshot — capturar screenshot
  • browsermcp_browser_wait — aguardar
  • browsermcp_browser_go_back / browsermcp_browser_go_forward — navegação histórica
  • browsermcp_browser_press_key — pressionar teclas
  • browsermcp_browser_hover — hover sobre elementos
  • browsermcp_browser_select_option — selecionar em dropdowns
  • browsermcp_browser_get_console_logs — logs do console

Para testar, peça ao OpenCode algo como “tire um screenshot da página atual”.

Estrutura final de arquivos

~/.config/opencode/
├── opencode.json          # Configuração principal
├── opencode.jsonc         # Opcional (comentários), pode ficar vazio
├── package.json           # Dependências: @opencode-ai/plugin
├── plugins/
│   └── rtk.ts             # (opcional) Outros plugins
└── node_modules/          # Gerenciado automaticamente

Troubleshooting

“No connection to browser extension”

A extensão do Chrome não está conectada. Abra o Chrome, clique no ícone da extensão Browser MCP e clique em “Connect”.

Ferramentas não aparecem

  • Verifique se o Node.js está instalado: node --version
  • Confirme que o arquivo opencode.json está no local correto
  • Reinicie o OpenCode após adicionar a configuração

Debug

opencode --verbose

Quem sabe faz ao vivo!

Demonstração do Browser MCP controlando o navegador por meio do OpenCode.

Referências