Já faz um tempo que quase todo código que eu escrevo passa pela IA. Isso tem um efeito colateral chato: o código cresce bem mais rápido do que eu consigo ler. Procurei por uma ferramenta que mostrasse o código de forma visual e rápida, mas não achei nada que me atendesse. Foi então que surgiu o 8n8.

8n8: Um Mapa Visual para Compreender Código Gerado por IA

Conceito e Funcionalidades

8n8 é uma extensão do Visual Studio Code, que também pode ser usado por CLI e PWA. É um pacote npm open source. Suporta Python e TypeScript, e pode ser usado com pastas mistas dessas duas linguagens.

Como Funciona

Ao usar 8n8, você seleciona uma pasta e ele cria um mapa visual dos arquivos e como eles se ligam. Por exemplo, um arquivo Python faz uma chamada POST para uma rota, e o 8n8 conecta isso ao arquivo TypeScript que atende essa rota.

Ao clicar em um nó, você entra nele. O 8n8 mostra o passo a passo da função, incluindo chamadas HTTP, condições if e o retorno. Você pode pedir um resumo e sugestões de melhoria para aquele trecho. Além disso, 8n8 usa o Tree-sitter para parsear o código e o LLM para gerar resumos e sugestões.

Melhorias Implementadas

Implementei as sugestões de Denis. Agora, a ligação que depende de configuração aparece como 'a conferir', e ao passar o mouse sobre ela, você vê a chave de configuração e o arquivo:linha da chamada. Também foi adicionado suporte para rota com prefixo de router, chamada ambígua e monorepo.

Conclusão

8n8 é uma ferramenta útil para entender fluxos de código gerados por IA, separando ligações provadas do código das que dependem de configurações. Com as melhorias implementadas, ele se torna ainda mais útil para o usuário.

CodigoCompreenderGeradoMapaVisual