Executando Context Engineering localmente

Use esta página para executar o desafio de sumarização extraído no seu computador. Você instala seus pacotes bloqueados, adapta duas leituras de ambiente exclusivas do Scrimba para o Vite e conecta o projeto do navegador ao OpenRouter. O guia geral executando projetos do curso localmente cobre a configuração compartilhada de Node e npm com mais detalhes.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. Node 24 é recomendado e inclui npm.

Verifique se ambos os comandos funcionam:

$ node --version
v24.18.0
$ npm --version
11.18.0

Se algum comando disser "command not found", termine de instalar o Node antes de continuar.

Você também precisa de uma chave de API do OpenRouter e de um ID de modelo disponível para sua conta. Use uma chave temporária com um limite de gastos baixo, porque este projeto de aprendizado executa solicitações do provedor no navegador.

JunoO que você precisa primeiro Instale o Node.js LTS e verifique que tanto node --version quanto npm --version imprimem números antes de prosseguir. Depois prepare uma chave OpenRouter temporária com um limite de gastos baixo. Uma vez perdi uma tarde debugando um projeto quando o problema real era que o Node nunca terminou de instalar, então esses dois checks valem os dez segundos!

JunoO que você precisa primeiro Toda solicitação do provedor sai do navegador com sua chave OpenRouter anexada, então deixe essa chave temporária e coloque um limite de gastos baixo. Enquanto estiver no painel do OpenRouter, confirme que o ID do modelo está disponível para sua conta antes de começar; isso evita um 404 confuso depois.

JunoO que você precisa primeiro A chamada do provedor é executada em código cliente, ou seja, no navegador, e qualquer pessoa com o devtools aberto recebe sua chave OpenRouter. Use uma chave de aprendizado restrita com um limite baixo e mova as chamadas do provedor para um backend antes de qualquer versão disso ser implantada. Já revogui chaves expostas o suficiente ao longo dos anos para tratar isso como uma regra em vez de uma sugestão.

Abra e instale o projeto

Abra um terminal na pasta extraída que contém package.json, depois instale os pacotes bloqueados:

$ cd path-to-your-downloaded-project
$ npm ci

Mantenha o arquivo de lock incluído. Se npm relatar achados de auditoria, não execute npm audit fix --force sem verificar o que ele muda; esse comando pode mover dependências do curso entre versões principais.

JunoAbra e instale o projeto Execute npm ci na pasta extraída, aquela que tem package.json nela. Não altere o arquivo de lock: ele lista as versões exatas de pacotes contra as quais o curso foi gravado.

JunoAbra e instale o projeto Use npm ci porque o download acompanha um arquivo de lock, e ci instala exatamente o que ele registra. Avisos de auditoria não são motivo para forçar grandes atualizações de dependências em um projeto do curso; você estaria substituindo um aviso por um projeto genuinamente quebrado.

JunoAbra e instale o projeto Mantenha o arquivo de lock baixado enquanto altera as leituras de ambiente. Altere uma variável por vez: se você atualizar dependências na mesma etapa, não conseguirá dizer se a edição do Vite funcionou ou uma atualização quebrou algo mais. Digo isso como alguém que já fez os dois de uma vez.

Repare as variáveis de ambiente

Procure em main.js e utils.js por estes valores:

process.env.OPENROUTER_KEY
process.env.MODEL_ID

Substitua cada ocorrência por:

import.meta.env.VITE_OPENROUTER_KEY
import.meta.env.VITE_MODEL_ID

Crie .env ao lado de package.json:

VITE_OPENROUTER_KEY=your-openrouter-key
VITE_MODEL_ID=a-current-model-id-from-openrouter

O Vite lê .env na inicialização; reinicie o servidor de desenvolvimento após editá-lo.

Use um modelo que está disponível no momento para sua conta OpenRouter e oferece suporte às chamadas feitas no curso. Os catálogos de provedores podem mudar.

Crie .gitignore:

.env
node_modules/
dist/

O manual do Git cobre esse hábito em ignorando arquivos e boas práticas.

A chave OpenRouter é visível no navegador

Todo valor VITE_ é incluído no código cliente. Use uma chave de aprendizado temporária, coloque um limite de gastos baixo e não publique este projeto. Uma versão implantada deve chamar o provedor de um backend.

JunoRepare as variáveis de ambiente Substitua ambas as leituras de process.env pelos nomes VITE_ correspondentes, crie .env e reinicie o servidor de desenvolvimento após editar o arquivo. E use uma chave OpenRouter temporária aqui: este projeto de navegador mostra a chave para qualquer pessoa que olhar, o que também me surpreendeu na primeira vez.

JunoRepare as variáveis de ambiente O desenvolvimento local precisa de leituras diretas de import.meta.env.VITE_... em ambos os arquivos fonte. O prefixo VITE_ é o que permite que um valor chegue ao código cliente, por isso a credencial acaba exposta em vez de protegida: disponível para seu código significa disponível para o navegador.

JunoRepare as variáveis de ambiente O Vite substitui valores import.meta.env.VITE_... estaticamente no tempo de compilação e transformação, e apenas nomes com prefixo VITE_ chegam ao código cliente. Isso torna a correção verificável: abra a fonte que seu navegador realmente carrega, ou o cabeçalho Authorization da solicitação na aba Network, e leia a chave em texto simples. Essa chave legível é também o argumento para mover essa chamada para um servidor.

Execute e verifique o projeto

$ npm start

Abra a URL Local impressa pelo Vite e continue a conversa até o projeto sumarizar suas mensagens anteriores. Um novo resumo no aplicativo em execução é o resultado de sucesso visível. O Vite geralmente se reinicia quando .env muda; se o novo valor não entrar em vigor, pare o servidor com Ctrl+C e comece novamente.

JunoExecute e verifique o projeto Execute npm start, abra a URL Local que o Vite imprime e converse até que o aplicativo sumarize suas mensagens anteriores. Esse resumo aparecendo é sua prova de que a configuração do OpenRouter funciona. Ctrl+C para o servidor quando terminar.

JunoExecute e verifique o projeto A página pode abrir antes de qualquer solicitação do provedor ter sucesso, então uma página aberta ainda não prova nada sobre o OpenRouter. Execute o fluxo de sumarização como o check real, e se um valor de ambiente alterado não aparecer, reinicie o Vite você mesmo.

JunoExecute e verifique o projeto O Vite iniciando com sucesso apenas prova que a fonte editada compila. Um resumo bem-sucedido é o check separado de que o OpenRouter aceita sua chave e modelo e retorna uma resposta que o projeto pode usar. Duas superfícies de falha diferentes; teste-as como duas.

Solução de problemas

process is not defined: Pelo menos uma leitura de ambiente permanece em main.js ou utils.js. Procure em ambos os arquivos, não apenas na configuração do Vite.

O modelo retorna 404 ou um erro de acesso: Leia o corpo do erro do OpenRouter: um 401 aponta para a chave, um 404 para o ID do modelo e um 429 para um limite de taxa. Copie um ID de modelo atual do OpenRouter e confirme que a conta pode usá-lo.

A conversa funciona até ficar longa: Esse é o comportamento que este curso explora. Confirme que suas edições não alteraram os limites de token, os prompts de resumo ou os dados de conversa de amostra que o curso fornece antes de diagnosticar o provedor.

A chave permanece indefinida: Confirme a ortografia de VITE_, coloque .env ao lado de package.json e reinicie o Vite.

JunoSolução de problemas Procure em ambos os arquivos JavaScript por leituras de process.env restantes, depois verifique as duas ortografias de VITE_ em .env. A maioria dos erros aqui é um caractere faltante, o que eu sei por encontrar o meu na quarta leitura. E uma conversa longa acionando um resumo é o curso funcionando, não quebrando.

JunoSolução de problemas Diferencie uma substituição do Vite faltante de um erro de provedor ou modelo. Se apenas conversas longas falharem, confirme os limites de contexto e prompts do curso antes de alterar a configuração local.

JunoSolução de problemas Leia o corpo do erro do OpenRouter antes de alterar nada: um 401 é sua chave, um 404 é o ID do modelo, um 429 é limite de taxa, e cada um tem um fix diferente. Apenas depois que esses tiverem sucesso você deve olhar para o limiar e prompts de sumarização do aplicativo, e mesmo assim não altere os dados de conversa de amostra que o curso fornece.