A CyberAgent, uma empresa de TI líder no Japão, oferece uma ampla variedade de serviços on-line, incluindo a plataforma de blogs Ameba, que é muito conhecida. A equipe enfrentou um desafio significativo com erros de execução difíceis de detectar por testes automatizados, exigindo uma intervenção manual demorada.
Este documento mostra como a CyberAgent usou o servidor do protocolo de contexto do modelo (MCP, na sigla em inglês) do Chrome DevTools para migrar de um processo manual para um fluxo de trabalho automatizado, economizando tempo dos desenvolvedores e melhorando a confiabilidade do fluxo de teste.
O desafio: um fluxo de trabalho manual e limitado
O sistema de design Ameba, Spindle, é uma coleção de componentes de IU reutilizáveis usados para criar a interface da plataforma de blogs. Ele depende do Storybook para desenvolvimento e teste de componentes de interface.
Antes, o fluxo de trabalho da CyberAgent para resolver erros de execução era um ciclo repetitivo e manual. Um desenvolvedor verificaria cada componente em um navegador, aplicaria uma correção e verificaria novamente. Com um grande número de páginas e componentes, essa dependência da confirmação visual tinha limites, o que dificultava a detecção de todos os bugs.
A solução: depurar o agente usando o MCP do Chrome DevTools
Para superar esse desafio, a equipe recorreu ao servidor MCP do Chrome DevTools. Depois de uma configuração simples usando o guia oficial de integração, eles puderam instruir imediatamente um agente de IA (Claude) para automatizar todo o fluxo de trabalho de depuração.
Com um único comando, o agente pode interagir com o DevTools processando informações sobre o estado do navegador capturadas pelo MCP do Chrome DevTools, acessar o contexto do sistema de arquivos e ler os registros do console. Em seguida, ele identificou erros de forma autônoma e implementou correções sem intervenção manual.
O comando inicial usado foi o seguinte:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
O agente de IA auditou a instância do Storybook, navegando por histórias inteiras para ler erros, aplicar correções de código e confirmar o sucesso de cada correção.
O impacto: de verificações manuais a correções automatizadas
Os resultados foram rápidos. Em aproximadamente uma hora, o agente de IA auditou de forma autônoma todos os 32 componentes e 236 histórias no sistema de design Spindle.
Embora o agente tenha identificado e corrigido um erro de tempo de execução e dois avisos, o verdadeiro valor do experimento estava na garantia do negativo: confirmar que a grande maioria da biblioteca estava livre de erros sem exigir que um desenvolvedor clicasse manualmente em centenas de estados.
Antes, esse tipo de auditoria abrangente era visualmente exaustivo e propenso a supervisão humana. Ao transferir esse trabalho para o MCP do Chrome DevTools, a CyberAgent conseguiu o seguinte:
- Cobertura de auditoria de 100%: o agente verificou mecanicamente todas as histórias, garantindo que os componentes "limpos" estavam realmente limpos, um nível de diligência difícil de manter manualmente.
- Zero falsos negativos: ao contrário dos conjuntos de testes automatizados que podem perder anomalias visuais de tempo de execução, o servidor MCP permitiu que o agente validasse o estado real do navegador, garantindo alta confiabilidade.
- Descarga cognitiva: os desenvolvedores podem confiar no sistema para lidar com o trabalho repetitivo e focar em lógicas complexas em vez de verificações de rotina.
Como observou o desenvolvedor da Web Kota Yanagi, o benefício foi a mudança na responsabilidade:
"Foi muito conveniente transferir os erros de execução e as verificações de aviso que eu fazia manualmente no navegador. Também gosto de poder descrever operações complexas em linguagem natural e fazer com que a ferramenta leia os registros de erros e corrija o problema."
O sucesso desse fluxo de trabalho automatizado levou a CyberAgent a atualizar o guia de agentes do Spindle (link em japonês) interno para os agentes de IA. Este guia agora estabelece o MCP do Chrome DevTools como o servidor de depuração padrão do agente de IA, Claude, formalizando o uso como uma prática recomendada e mostrando a confiança nesse novo processo com tecnologia de IA.
As correções concretas foram implementadas em duas solicitações de pull, que podem ser revisadas no GitHub:
A CyberAgent avançou ainda mais o comando e publicou este resultado final.
Feedback e planos futuros
A CyberAgent ficou satisfeita com a flexibilidade e o número de opções disponíveis no MCP do Chrome DevTools. Eles também deram feedback valioso para melhorias futuras, observando que, embora a ferramenta seja poderosa, o uso dos recursos mais avançados exige um certo nível de conhecimento do usuário.
No futuro, a equipe quer uma integração mais profunda com o painel de desempenho dos DevTools. Eles imaginam um fluxo de trabalho em que um agente pode validar as Principais métricas da Web e, em seguida, fazer uma análise de desempenho mais detalhada usando o painel "Performance" para analisar e sugerir melhorias.
O Developer Expert da CyberAgent, Kazunari Hara, compartilhou o espanto dele, destacando a eficiência e o potencial da ferramenta para aplicações futuras:
"Fiquei impressionado quando vi o navegador corrigindo erros automaticamente direto dos registros. Tarefas que antes eram perdidas ou demoravam muito agora podem ser automatizadas de forma confiável, o que melhora a eficiência do desenvolvimento. Como o MCP do Chrome DevTools oferece tantos recursos em um ambiente de execução real, acredito que ele será útil em muitas situações diferentes daqui para frente."
Conclusão
Ao integrar o MCP do Chrome DevTools ao fluxo de trabalho, a CyberAgent automatizou com sucesso uma tarefa de depuração complexa e demorada. A experiência deles demonstra o imenso potencial das ferramentas com tecnologia de IA para aumentar a produtividade dos desenvolvedores.
O processo alcançou automação completa, eliminando a necessidade de verificações manuais e garantindo que nenhum erro fosse perdido. Embora a implementação atual já tenha comprovado seu valor, o feedback da CyberAgent destaca um futuro interessante em que o MCP das Ferramentas para desenvolvedores do Chrome pode permitir análises e tarefas de otimização de desempenho ainda mais sofisticadas diretamente no navegador.