Rodando Context Engineering localmente

Use essa página para rodar o desafio de sumarização que você extraiu do módulo de Context Engineering e ver ele sumarizando uma conversa longa com sua própria chave OpenRouter. O código roda como foi baixado: você instala os pacotes, adiciona um arquivo .env com sua chave e um modelo, e inicia a aplicação.

O que você precisa primeiro

Instale uma versão LTS suportada do Node.js. Node 24 é recomendado e já inclui npm. O projeto usa Vite 7, que precisa de Node 22.12 ou mais recente.

Verifique se os dois comandos funcionam. Seus números de versão podem ser diferentes:

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

Se node --version mostrar algo abaixo de v22.12.0, instale Node 24 antes de continuar.

Você também precisa de uma chave de API do OpenRouter e um pouco de crédito na sua conta OpenRouter, porque a aplicação pede sumarizações e respostas para o OpenRouter o tempo todo. Crie uma chave que você deletará quando terminar, e coloque um limite de crédito baixo quando criá-la: esse projeto chama OpenRouter direto do navegador, então a chave acaba na página.

JunoO que você precisa primeiro Instale Node.js 24, que inclui npm, e verifique que node --version mostra v22.12.0 ou maior.

Depois adicione um pouco de crédito à sua conta OpenRouter (um dólar cobre muitas sumarizações) e crie uma chave com um limite de crédito baixo. Essa única chave é tudo que esse projeto precisa.

JunoO que você precisa primeiro A aplicação faz dois tipos de requisição para OpenRouter: uma pede ao modelo um sumário das mensagens anteriores, e outra transmite a resposta para sua mensagem. Ambas saem do seu navegador com a mesma chave, então o limite de crédito da chave limita o que a página pode gastar.

JunoO que você precisa primeiro O piso do Node vem do Vite 7, não da aplicação: seu package.json pede Node 20.19 ou 22.12 e mais recente, e Node 20 está fora do suporte, então 22.12 é por onde começar.

Instale os pacotes

Abra um terminal na pasta extraída. É aquela que contém package.json e main.js:

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

npm ci instala exatamente as versões listadas em package-lock.json. npm termina reportando quantos pacotes foram adicionados:

added 29 packages, and audited 30 packages in 6s

npm também pode reportar vulnerabilidades e sugerir npm audit fix. Deixe para depois: a correção pode mudar as versões dos pacotes com as quais o curso foi construído. npm também pode avisar sobre scripts de instalação; isso não muda nada aqui.

JunoInstale os pacotes Abra o terminal na pasta que contém package.json, depois execute npm ci. npm termina dizendo quantos pacotes foram adicionados, e uma pasta node_modules aparece.

Se npm disser que não consegue encontrar package.json, você está na pasta errada.

JunoInstale os pacotesnpm ci lê o arquivo de lock em vez de resolver versões novamente, então você obtém o mesmo Vite, AI SDK e provedor OpenRouter contra os quais o desafio foi escrito. Também se recusa a executar se package.json e o arquivo de lock discordarem, o que avisa você cedo se um arquivo foi alterado.

JunoInstale os pacotes As vulnerabilidades que npm lista estão em vite e nas ferramentas de build sob ele, e em ai e dompurify. Aqui elas só afetam uma página servida no seu próprio computador enquanto você aprende; atualizá-las é uma mudança separada que move você para longe das versões que as aulas usaram.

Adicione sua chave e modelo ao .env

O projeto lê dois valores: OPENROUTER_KEY e MODEL_ID. O editor do Scrimba preenche para você; no seu computador eles vão em um arquivo. Crie .env ao lado de package.json:

OPENROUTER_KEY=your-openrouter-key-here
MODEL_ID=mistralai/ministral-3b-2512

Mantenha ambos os nomes exatamente como mostrado, sem VITE_ na frente: o vite.config.js do projeto lê esses dois nomes e os passa para o código do navegador. mistralai/ministral-3b-2512 é um modelo de baixo custo no OpenRouter. Qualquer ID de modelo OpenRouter funciona; copie exatamente.

Crie .gitignore ao lado de package.json e adicione:

.env
node_modules/

Uma chave que chega a um repositório Git fica em seu histórico mesmo depois de você deletar o arquivo. O manual do Git aborda o hábito em ignorando arquivos e boas práticas.

Essa chave é visível no navegador

vite.config.js escreve ambos os valores no código que envia para o navegador, então qualquer pessoa que abrir essa página consegue ler sua chave. Mantenha essa versão no seu próprio computador: nunca deploy ou compartilhe, e nunca faça commit de .env. Uma versão que você publica precisa de um backend ou função serverless que mantenha a chave no servidor.

JunoAdicione sua chave e modelo ao .env Faça um arquivo chamado .env ao lado de package.json com duas linhas: sua chave depois de OPENROUTER_KEY= e o modelo depois de MODEL_ID=. Depois liste .env em .gitignore para que Git nunca o salve.

Você não precisa mudar nenhum arquivo JavaScript.

JunoAdicione sua chave e modelo ao .envvite.config.js carrega todo valor em .env, depois define process.env.OPENROUTER_KEY e process.env.MODEL_ID para o código do navegador em main.js e utils.js. É por isso que esses nomes não precisam de prefixo VITE_: o arquivo de configuração passa eles mesmo.

JunoAdicione sua chave e modelo ao .env No servidor de desenvolvimento, Vite define os valores definidos em um objeto process.env na página antes de seus módulos executarem, então os acessos a process.env no código-fonte funcionam como escrito. Em um build, Vite substitui cada leitura pelo valor em si. De qualquer forma, a chave é texto plano no que o navegador carrega.

Inicie a aplicação e envie uma mensagem

Inicie o servidor de desenvolvimento:

$ npm start

Vite imprime o endereço para abrir:

  VITE v7.2.2  ready in 157 ms

  ➜  Local:   http://localhost:5173/

Abra o endereço Local exato. A página abre uma conversa longa que já está lá, com os contadores abaixo mostrando 26294 total tokens e 26294 context tokens. A aplicação sumariza uma vez que o contexto passa de 20.000 tokens, então sua primeira mensagem é suficiente.

Digite qualquer mensagem e envie. A aplicação mostra Sumarizando conversa enquanto OpenRouter escreve o sumário. Quando funciona, um card de Context Summary aparece abaixo dos contadores (clique nele para ler o sumário), a contagem de context tokens cai bem abaixo do total, e a resposta para sua mensagem aparece.

Se você baixou o desafio antes de terminar splitForSummary e generateSummary em summary.js, sua primeira mensagem fica presa aqui: a aplicação chama ambas assim que sumariza, e o console mostra por quê.

Se Sumarizando conversa fica na tela e o botão de envio fica cinza, abra as ferramentas de desenvolvedor do seu navegador (F12, ou Cmd+Option+J no Chrome em um Mac) e leia a aba Console. O motivo é impresso lá, não na página; a resolução de problemas abaixo corresponde a cada mensagem. Um 404 vermelho para favicon.ico é inofensivo.

Você não precisa reiniciar nada depois de mudar .env: quando você salva, Vite reinicia a si mesmo e a página aberta recarrega com os novos valores. Interrompa o projeto com Ctrl+C.

JunoInicie a aplicação e envie uma mensagem Execute npm start, abra o endereço Local, e envie qualquer mensagem. Espere pelo card de Context Summary e pela resposta.

Se ficar em Sumarizando conversa, abra o Console nas ferramentas de desenvolvedor do seu navegador e procure pelo erro vermelho que menciona OpenRouter ou a chave de API.

JunoInicie a aplicação e envie uma mensagem A página abrindo apenas prova que Vite funciona. O sumário precisa que a requisição do seu navegador para OpenRouter tenha sucesso, então uma página presa em Sumarizando conversa é uma questão de chave, crédito ou modelo, não de instalação.

JunoInicie a aplicação e envie uma mensagemgenerateSummary executa antes do try em handleUserMessage, então uma requisição de sumário rejeitada vira uma promise rejection não capturada no console e a entrada nunca é habilitada novamente. Salvar uma correção em .env recarrega a página e liberta. Um erro na resposta em si, depois que um sumário funciona, mostra no chat como Error: em vez disso.

Resolução de problemas

O console diz OPENROUTER_KEY env variable is not set, depois OpenRouter API key is missing: O navegador não tem chave. Verifique que .env está ao lado de package.json e que os nomes são exatamente OPENROUTER_KEY e MODEL_ID, depois salve. A página recarrega por si só.

O console mostra 401 com User not found. ou Missing Authentication header: A chave chegou ao OpenRouter, mas OpenRouter não aceitou. Copie novamente da sua conta OpenRouter e verifique que ela não foi deletada. Missing Authentication header geralmente significa que .env ainda contém o texto de exemplo em vez de sua chave.

O console mostra 402: A chave funciona, mas sua conta ou o limite de crédito da chave não tem crédito sobrando. Adicione crédito no OpenRouter, ou levante o limite da chave, depois recarregue a página e envie novamente.

O console diz que o modelo não é válido ou não foi encontrado: Verifique a linha MODEL_ID em .env contra a página do modelo no OpenRouter, letra por letra, incluindo a parte antes da barra.

JunoResolução de problemas Encontre o erro vermelho no Console que menciona a chave, um 401 ou um 402, e corresponda a uma linha em negrito acima. Depois que você editar .env e salvar, espere a página recarregar, então envie outra mensagem.

JunoResolução de problemas Mantenha dois problemas separados: Vite colocando seus valores na página, e OpenRouter aceitando a chave, o crédito e o modelo. Uma chave ausente falha no seu navegador antes de qualquer requisição; um código de status significa que a requisição chegou ao OpenRouter.

JunoResolução de problemas O provedor OpenRouter do AI SDK lança API key is missing antes de enviar qualquer coisa quando apiKey é undefined. Uma vez que uma requisição sai, o status é do OpenRouter: 401 para a chave, 402 para crédito, e um erro de modelo para o ID.