Executando Context Engineering localmente

Use esta página para executar o desafio de sumarização que você extraiu do módulo Context Engineering. O projeto é instalado como baixado, mas dois arquivos leem suas configurações OpenRouter de uma forma que funciona apenas no Scrimba, então você precisa adaptar essas leituras para Vite e adicionar sua própria chave antes que o app possa responder.

O que você precisa primeiro

Instale o Node.js 24, a versão LTS recomendada, que inclui npm. Node 22.12 ou mais recente também funciona. O projeto roda em Vite 7, que não suporta versões mais antigas do Node.

Verifique se ambos os comandos exibem um número de versão:

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

Se algum comando diz "command not found", termine a instalação do Node antes de continuar. Se node --version exibe algo abaixo de v22.12.0, instale o Node 24 primeiro, porque a versão Vite do projeto não suporta versões mais antigas.

Você também precisa de uma chave de API OpenRouter e um ID de modelo que sua conta possa usar. Crie uma chave temporária com um limite de gasto baixo: este projeto de aprendizado envia suas requisições de provider pelo navegador, então a chave viaja com cada requisição.

JunoO que você precisa primeiro Instale o Node.js 24 e verifique que node --version e npm --version exibem números. Qualquer versão a partir de v22.12.0 funciona.

Depois crie uma chave temporária OpenRouter com um limite de gasto baixo e anote um ID de modelo que sua conta possa usar.

JunoO que você precisa primeiro Vite 7 define o piso do Node em 20.19 ou 22.12, e Node 20 chegou ao fim da vida útil, então 22.12 é o mínimo prático.

Toda requisição de provider sai do navegador com sua chave OpenRouter anexada, então mantenha essa chave temporária e limitada. Enquanto estiver no dashboard OpenRouter, confirme que o ID do modelo está disponível para sua conta; isso economiza confusão com um 404 depois.

JunoO que você precisa primeiro A chamada de provider roda em código do cliente, então o navegador e qualquer pessoa com devtools aberto recebe sua chave OpenRouter.

Use uma chave de aprendizado restrita com um limite baixo aqui e mude as chamadas de provider para um backend antes de qualquer versão deste projeto ser deployada.

Abra e instale o projeto

Abra um terminal na pasta extraída, aquela que contém package.json, depois instale os pacotes exatamente como o lockfile registra:

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

Quando terminar, uma pasta node_modules aparece ao lado de package.json. Mantenha o package-lock.json incluído como está. Se npm reportar achados de auditoria, não execute npm audit fix --force sem verificar o que muda; esse comando pode mover dependências do curso entre versões maiores.

JunoAbra e instale o projeto Execute npm ci na pasta extraída, aquela com package.json dentro. Uma pasta node_modules deve aparecer.

Deixe o lockfile como está: ele lista as versões exatas dos pacotes em que o curso foi gravado.

JunoAbra e instale o projeto Use npm ci porque o download vem com um lockfile, e ci instala exatamente o que ele registra.

Avisos de auditoria não são razão para forçar atualizações de dependências maiores em um projeto do curso; você trocaria um aviso por um projeto quebrado.

JunoAbra e instale o projeto Mantenha o lockfile fixo enquanto muda as leituras de ambiente. Se atualizar dependências na mesma etapa, não conseguirá dizer se a edição Vite funcionou ou uma atualização quebrou algo mais.

Ajuste as variáveis de ambiente

No Scrimba, o projeto lê sua chave e modelo através de process.env. Em um projeto de navegador rodando sob o servidor de desenvolvimento do Vite, process não existe, então essas leituras precisam mudar.

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

Se perder uma, o app depois falha no navegador com process is not defined, então procure em ambos os arquivos até que nenhum contenha process.env.

Crie .env ao lado de package.json:

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

Use um modelo que está disponível na sua conta OpenRouter e suporta as chamadas feitas no curso; catálogos de provider mudam. Vite lê .env quando inicia, então reinicie o servidor de desenvolvimento após editar o arquivo.

Crie .gitignore ao lado dele para que a chave nunca chegue ao Git:

.env
node_modules/
dist/

O manual Git cobre esse hábito em ignoring files and good habits.

A chave OpenRouter é visível no navegador

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

JunoAjuste as variáveis de ambiente Em main.js e utils.js, substitua ambas as leituras process.env pelos nomes correspondentes import.meta.env.VITE_. Depois crie .env com sua chave e ID de modelo, e adicione .gitignore.

Use uma chave OpenRouter temporária aqui: este projeto de navegador exibe a chave para qualquer um que olhe.

JunoAjuste as variáveis de ambiente Vite expõe valores de .env para código do cliente através de import.meta.env, e apenas para nomes que começam com VITE_. É por isso que ambos os arquivos precisam das leituras diretas.

O mesmo prefixo é por que a credencial acaba exposta em vez de protegida: disponível para seu código significa disponível para o navegador.

JunoAjuste as variáveis de ambiente O vite.config.js baixado injeta os antigos valores process.env, que um build de produção aplica mas a transformação de desenvolvimento deixa nos módulos do navegador. Ler import.meta.env.VITE_... diretamente funciona em ambos.

Vite substitui esses valores no código que serve, então pode confirmar o ajuste encontrando a chave em texto plano na fonte carregada ou no header Authorization da requisição na aba Network. Essa chave legível é também o argumento para mover essa chamada para um servidor.

Execute e verifique o projeto

Inicie o servidor de desenvolvimento:

$ npm start

Abra a URL Local que Vite exibe, depois continue a conversa até que o projeto resuma suas mensagens anteriores. Um novo resumo no app em execução é o sinal visível de que sua chave e modelo funcionam. A página pode abrir antes que qualquer requisição OpenRouter tenha sucesso, então uma página aberta sozinha não prova a configuração.

Pare o servidor com Ctrl+C. Depois que mudar .env, inicie novamente com npm start para que Vite leia os novos valores.

JunoExecute e verifique o projeto Execute npm start, abra a URL Local que Vite exibe, e converse até que o app resuma suas mensagens anteriores. Esse resumo é sua prova de que a configuração OpenRouter funciona.

Ctrl+C para o servidor quando terminar.

JunoExecute e verifique o projeto A página pode abrir antes que qualquer requisição de provider tenha sucesso, então execute o fluxo de sumarização como a verificação real.

Se um valor de ambiente mudado não aparecer, reinicie Vite: ele lê .env na inicialização.

JunoExecute e verifique o projeto Vite iniciando corretamente apenas prova que a fonte editada compila. Um resumo bem-sucedido é a verificação separada de que OpenRouter aceita sua chave e modelo e retorna uma resposta que o projeto pode usar.

Essas são duas superfícies de falha diferentes, então teste-as como duas.

Resoluçã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 Vite.

A chave permanece indefinida: Confirme a grafia VITE_ em .env e no código, coloque .env ao lado de package.json e reinicie Vite.

O modelo retorna 404 ou um erro de acesso: Leia o erro OpenRouter nas ferramentas de desenvolvedor do navegador: 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 sua conta pode usá-lo.

A conversa funciona até ficar longa: Esse é o comportamento que este curso explora. Antes de olhar para o provider, confirme que seus edits não mudaram os limites de token, os prompts de resumo ou os dados de conversa de exemplo que o curso fornece.

JunoResolução de problemas Procure em ambos os arquivos JavaScript por leituras de process.env restantes, depois verifique as duas grafias VITE_ em .env e reinicie.

Uma conversa longa acionando um resumo é o curso funcionando, não quebrando.

JunoResolução de problemas Separe uma substituição Vite ausente de um erro de provider ou modelo: process is not defined ou uma chave indefinida é local, enquanto um código de status vem de OpenRouter.

Se apenas conversas longas falham, confirme os limites de contexto e prompts do curso antes de mudar a configuração local.

JunoResolução de problemas Leia o erro OpenRouter antes de mudar qualquer coisa: 401 é a chave, 404 o ID do modelo, 429 limite de taxa, e cada um tem um ajuste diferente.

Apenas depois que as requisições tiverem sucesso inspecione o limiar de sumarização e prompts do app, e mesmo assim deixe os dados de conversa fornecidos inalterados.