Como conectar Gemini CLI ao Chrome DevTools MCP

O Gemini CLI consegue operar uma página no Chrome?

Sim, se o projeto disponibilizar as ferramentas e a conta e as regras permitirem chamadas. O Gemini CLI é o cliente MCP. O Chrome DevTools MCP inicia ou conecta o navegador e oferece ações como abrir uma URL e capturar um snapshot de acessibilidade. A autenticação do modelo e a conexão do navegador são verificações distintas. Depois de ver Connected, confira uma página conhecida. Um usuário relatou que uma versão antiga do Gemini CLI não conseguia conectar ao servidor, embora outro cliente conseguisse. Comece descobrindo em qual etapa a conexão falha. GitHub #178

O catálogo de extensões do Gemini CLI também inclui Chrome DevTools MCP. Aqui, o servidor aparece de forma explícita no projeto, com versões e parâmetros visíveis. Guia de MCP do Gemini CLI Configuração de Chrome DevTools Gemini no navegador

Pontos principais

• Registre o Chrome DevTools MCP no projeto e comece com um perfil isolado.

• Use gemini mcp list para ver a conexão e /mcp desc para inspecionar as ferramentas.

• Compare a URL final e o título com o resultado da ferramenta.

• Verifique separadamente a autenticação, a confiança no projeto e as aprovações.

O que a busca e o navegador conseguem provar

A busca pode localizar um anúncio. Ela não informa a conta da aba nem o estado após um clique. Um snapshot confirma o conteúdo atual sem decidir se a fonte é a publicação oficial mais recente. Escolha a ferramenta que fornece o resultado observável de que você precisa. Busca e controle de navegador O que faz um agente

Fixe as versões em um projeto pequeno

Este exemplo segue a documentação e fixa o Gemini CLI 0.67.0 e o Chrome DevTools MCP 1.12.0. Confira os requisitos de Node.js e Chrome e guarde o arquivo de bloqueio. Chrome DevTools MCP v1.12.0

mkdir browser-mcp-check
cd browser-mcp-check
npm init -y
npm install --save-exact @google/gemini-cli@0.67.0 chrome-devtools-mcp@1.12.0
./node_modules/.bin/gemini --version
./node_modules/.bin/chrome-devtools-mcp --version

Adicione a entrada em .gemini/settings.json. Use o caminho absoluto do executável local. Se o projeto já tem outros ajustes, acrescente só a entrada do servidor.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/absolute/path/browser-mcp-check/node_modules/.bin/chrome-devtools-mcp",
      "args": ["--headless", "--isolated", "--no-usage-statistics"],
      "includeTools": ["new_page", "take_snapshot", "list_pages", "close_page"],
      "trust": false
    }
  }
}

includeTools limita o que o Gemini CLI oferece ao modelo. Ele não restringe domínios. --isolated cria um perfil temporário. Comece com uma página sua ou com acesso permitido. Para conectar uma sessão existente, configure e confira a conta separadamente. O Codelab do Google usa um aplicativo inteiro. Para verificar a inicialização, use uma página com título e link conhecidos. Conectar um navegador existente Codelab do Google

A confiança no diretório permite que o Gemini carregue a configuração do projeto. Com trust: false, as chamadas continuam sujeitas à política ativa. Comece no modo interativo e confira o servidor, a ação e a URL se houver um pedido de aprovação. Uma regra ask_user nega a chamada no modo não interativo. Para restringir URLs, configure o Chrome DevTools MCP separadamente. A opção --allowed-url-pattern exige Chrome 149 ou mais recente. Política do Gemini CLI Configuração do Chrome DevTools MCP

Confirme a conexão e depois a página

No diretório do projeto, execute ./node_modules/.bin/gemini mcp list. A configuração local pode ser carregada se o diretório for confiável. Na sessão do Gemini CLI, use /mcp desc para consultar ferramentas e argumentos. Configure o acesso ao modelo separadamente. Autenticação

Para repetir a verificação, abra outro terminal no projeto e sirva uma página local. O título esperado é “MCP browser check” e o link aponta para #details. Confira os dois no resultado da ferramenta.

mkdir -p fixture
cat > fixture/index.html <<'HTML'
<!doctype html>
<meta charset="utf-8">
<title>MCP browser check</title>
<h1>MCP browser check</h1>
<a href="#details">Details</a>
<p id="details">Local fixture</p>
HTML
python3 -m http.server 8765 --bind 127.0.0.1 --directory fixture

Na versão fixada, passe o ID de new_page como pageId para take_snapshot. A URL pode mudar após um redirecionamento. Confira o endereço e o título retornados. Referência v1.12.0

Use o servidor MCP chrome-devtools para abrir http://127.0.0.1:8765/. Retorne ID, URL final, título principal e o link esperado. Use o ID retornado para o snapshot. Se o acesso falhar, informe o erro. Não digite credenciais, envie formulários nem mude dados.

Identifique a camada que falhou

Se o registro falhar, confira escopo, versão e transporte. Uma pessoa relatou que uma versão antiga do Gemini CLI não conectava, embora outro cliente conectasse. Em Apple Silicon, outra pessoa encontrou Node para Intel no PATH do processo MCP e corrigiu o problema no próprio ambiente. Confira executável e arquitetura antes de mudar configurações. Issue original Relato no Reddit

Se abrir a página funcionar mas o snapshot falhar, leia o esquema e use o ID recebido. Se aparecer uma tela de login, pare e registre a intervenção necessária. Conferir uma sessão autenticada

Guarde um recibo fácil de reproduzir

Anote versões do cliente, servidor e navegador, escopo, modo, ferramentas, URL final, ID e resultado esperado. Registre a etapa de aprovação ou falha. Primeira tarefa de navegador Escolher uma conexão O que é um navegador agêntico

Para ler o estado do Chrome no Gemini CLI, registre o servidor no projeto e comece com uma página conhecida. Para cada nova ferramenta, defina um resultado que possa conferir.

Secholar.L

Crescimento e conteúdo na Tabbit

Secholar.L escreve guias práticos sobre navegadores com IA e fluxos de trabalho com agentes, comparando ferramentas com pesquisa real e fontes verificáveis.