Tutorial do AICode

O AICode é um editor de código completo que roda inteiramente no navegador — sem instalação, sem servidor, sem compilação. Ele combina o poder do Monaco Editor (o mesmo do VS Code) com modelos de IA de última geração para realizar edições inteligentes no seu código.

Principais Recursos

• Multi-Provider: Suporta Anthropic Claude, OpenAI ChatGPT e Google Gemini
• Edição Cirúrgica: A IA modifica apenas as partes necessárias, preservando o restante
• Editor Monaco: Syntax highlighting, autocompletion, minimap e mais
• Explorador de Arquivos: Carregue pastas inteiras do seu projeto
• Chat Multi-turno: Converse com a IA mantendo contexto entre mensagens
• Diff Visual: Veja exatamente o que vai mudar antes de aplicar
• Undo/Redo: Desfaça qualquer alteração aplicada pela IA
• Exportação: Salve diretamente na pasta original ou baixe como ZIP

A única coisa que você precisa para começar é uma API Key de pelo menos um dos provedores suportados. O AICode é um arquivo HTML estático — basta abrir no navegador.

O AICode suporta três provedores de IA. Cada um tem suas particularidades:

Onde obter as API Keys

O AICode pode carregar pastas inteiras do seu computador. Ele reconhece automaticamente arquivos de código e ignora pastas como node_modules, .git, dist, etc.

Extensões Suportadas

O AICode reconhece automaticamente mais de 40 tipos de arquivo:

.js .jsx .ts .tsx .py .php .java .cs .html .css .scss .json .xml .yaml .sql .go .rs .rb .swift .md .vue .svelte e mais.

Pastas Ignoradas Automaticamente

node_modules vendor .git __pycache__ .next dist build .cache

O editor é baseado no Monaco Editor, o mesmo motor do VS Code. Ele oferece uma experiência completa de edição de código.

Funcionalidades do Editor

• Syntax Highlighting: Coloração para mais de 10 linguagens
• Minimap: Visão geral do código à direita
• Bracket Matching: Colchetes e chaves coloridos por pares
• Word Wrap: Quebra automática de linhas longas
• Autocompletion: Sugestões inteligentes de código
• Seletor de Linguagem: Troque a linguagem a qualquer momento

Sem Projeto Aberto

Você pode usar o editor diretamente sem abrir uma pasta. Basta colar seu código no editor e enviar a instrução. Ideal para análises rápidas e snippets.

Na parte inferior da tela, há um campo de texto onde você descreve o que deseja que a IA faça. Quanto mais específico, melhor o resultado.

Exemplos de Instruções

Medidor de Contexto Dinâmico

Acima do campo de instrução, uma barra mostra a estimativa de tokens que serão enviados. O limite ajusta automaticamente conforme o provedor:

A cor da barra indica o status:

• Verde (0-60%): Contexto confortável
• Laranja (60-85%): Contexto grande, mas funcional
• Vermelho (85%+): Muito grande — selecione menos arquivos

O grande diferencial do AICode é a edição cirúrgica. Em vez de reescrever o arquivo inteiro, a IA retorna apenas os trechos que precisam mudar, usando o formato SEARCH/REPLACE.

Como Funciona

A IA retorna blocos no formato:

Vantagens da Edição Cirúrgica

• Preserva o código existente: Apenas o trecho alvo é alterado
• Múltiplas edições: Vários blocos SEARCH/REPLACE para diferentes partes do arquivo
• Diff visual: Veja exatamente o que mudou antes de aplicar
• Match inteligente: Três algoritmos de busca (exato, fuzzy-trim, fuzzy-indent)
• Undo: Cada edição pode ser desfeita individualmente

Depois que a IA responde, você tem várias formas de aplicar as mudanças:

Botão "Aplicar" (individual)

Cada bloco de código tem um botão "Aplicar". Ao clicar, um modal de diff mostra o antes e depois. Confirme para aplicar.

Botão "Aplicar Tudo" (em lote)

O botão verde "Aplicar" no cabeçalho do painel de resposta aplica todas as edições de uma vez, sem mostrar o diff de cada uma.

Status dos Blocos

Desfazendo Alterações

Após aplicar uma edição, um botão "Desfazer" aparece. Cada arquivo mantém um histórico de até 10 versões anteriores.

O AICode mantém um histórico de conversa, permitindo refinamentos iterativos.

Como o Chat Funciona

• Aba "Chat": Mostra o histórico visual da conversa com bolhas de mensagem
• Aba "Resultado": Mostra a última resposta da IA com blocos de código aplicáveis
• Badge numérico: Indica quantas trocas de mensagem já ocorreram
• Nova Conversa: O botão 🔄 limpa o histórico e inicia uma sessão zerada

Follow-ups Inteligentes

Após a primeira instrução, você pode enviar instruções de follow-up como:

• Agora adicione validação nos inputs
• Faltou o arquivo de testes
• Mude a cor do botão para azul
• Renomeie a variável X para Y

A IA lembrará das alterações anteriores e trabalhará com o código já atualizado.

O botão "Salvar / Exportar" abre um modal com 4 opções:

🎯 Seja específico nas instruções

Em vez de "melhore o código", diga "converta os loops for para Array.map/filter e adicione tratamento de null". Quanto mais preciso, melhor o resultado.

📁 Selecione apenas os arquivos relevantes

Não é necessário selecionar todos os arquivos. Selecione apenas os que a IA precisa ver ou modificar. Isso economiza tokens e produz respostas mais precisas.

🔄 Use follow-ups para refinamentos

Se o resultado não ficou perfeito, envie uma instrução de ajuste: "O tipo de retorno está errado, deveria ser Promise<void>".

👀 Confira o diff antes de aplicar

Sempre revise o modal de diff quando usar "Aplicar" individual. Ele mostra exatamente o que será alterado, com linhas adicionadas em verde e removidas em vermelho.

🔀 Troque de provedor para diferentes tarefas

Cada modelo tem pontos fortes. Claude é ótimo em seguir formatos rígidos, GPT-4o é versátil, e Gemini tem janela de contexto enorme. Experimente trocar!

💾 Salve antes de pedir mais mudanças

Após aplicar edições satisfatórias, use Ctrl+S para "confirmar" o estado atual na memória. Assim, se as próximas edições não ficarem boas, o undo volta ao último estado salvo.

O AICode foi projetado com segurança em mente:

• 100% client-side: Nenhum servidor intermediário. Seu código vai direto do navegador para a API do provedor.
• Chaves no localStorage: As API keys são salvas apenas no seu navegador, em localStorage. Nunca são transmitidas para terceiros.
• Sem tracking: O AICode não coleta dados, analytics ou telemetria.
• Open source: O código inteiro está em um arquivo HTML — você pode inspecioná-lo completamente.
• CSP configurado: O Content-Security-Policy permite conexões apenas com as APIs dos provedores.

Botões de Segurança

• 👁️ Mostrar/Ocultar: Alterna a visibilidade da chave API no campo
• ✕ Limpar: Remove a chave salva do navegador (pede confirmação)

O AICode funciona offline?

O editor funciona offline (após o carregamento inicial dos CDNs). Porém, para usar a IA, é necessário conexão com a internet para se comunicar com as APIs dos provedores.

Meu código é enviado para algum servidor?

Não. Seu código é enviado diretamente do seu navegador para a API do provedor selecionado (Anthropic, OpenAI ou Google). O AICode não tem servidor próprio.

Por que a edição cirúrgica deu erro?

Isso acontece quando o bloco SEARCH não corresponde exatamente ao código no arquivo. Causas comuns:

• O código já foi modificado por uma edição anterior
• Diferenças de espaçamento ou indentação
• O modelo de IA não copiou o trecho com precisão

Solução: Limpe o histórico e reenvie a instrução, ou aplique a edição manualmente copiando o código do bloco "Substituir por".

Posso usar com qualquer linguagem?

Sim! O sistema de edição cirúrgica é agnóstico de linguagem. O editor suporta syntax highlighting para mais de 13 linguagens, mas a IA pode trabalhar com qualquer tipo de arquivo de texto.

Qual provedor devo usar?

Depende do caso:

• Claude: Melhor para edições precisas e formato cirúrgico
• GPT-4o: Mais versátil, bom para explicações e código
• Gemini: Melhor para projetos com muitos arquivos (janela de contexto maior)

O AICode suporta mobile?

O editor funciona em tablets, mas a experiência é otimizada para desktop. A funcionalidade "Abrir Pasta" não funciona em dispositivos móveis (limitação do navegador).

Posso hospedar o AICode?

Sim! Como é um arquivo HTML estático, basta colocar o index.html (e opcionalmente o tutorial.html) em qualquer servidor web, CDN, GitHub Pages, Vercel, Netlify, etc.