Intro to AI EngineeringExecutando Intro to AI Engineering localmente
Use esta página para executar o projeto Gift Genie extraído em seu computador. O curso atual tem duas formas do projeto: um app Vite somente para navegador e, após a migração do backend, um app Express com Vite. Identifique a forma que você tem e siga a configuração correspondente abaixo.
O que você precisa primeiro
Instale uma versão LTS suportada do Node.js. Node 24 é recomendado. Node 22.12 ou posterior também suporta a versão do Vite usada pelos projetos posteriores do curso.
Verifique se Node e npm estão disponíveis:
$ node --version
v24.18.0
$ npm --version
11.18.0npm vem incluído com Node. Se algum comando disser "command not found", termine de instalar Node antes de continuar.
Identifique o projeto que você extraiu
Navegue até a pasta extraída que contém package.json:
$ cd path-to-your-downloaded-projectTodos os comandos nesta página são executados a partir dessa pasta.
Depois verifique qual forma do projeto você tem. A versão somente para navegador tem index.html e vite.config.js, e seu script start não executa nenhum arquivo de servidor. A versão Express com Vite tem server.js e vite.config.js, e seu script start os executa juntos.
package.json e leia seu script start. Se ele executar um arquivo server.js, siga a seção de backend. Se não, você tem a versão somente para navegador. Adicione seus valores de ambiente
Scrimba fornece três variáveis de ambiente das configurações da sua conta. Seu computador não tem acesso a essas configurações, então crie um arquivo chamado .env ao lado de package.json:
AI_URL=https://seu-provedor.exemplo/v1
AI_KEY=sua-chave-aqui
AI_MODEL=seu-id-de-modeloCopie os valores que você usou no curso. A URL e o modelo devem pertencer ao mesmo provedor da chave.
Antes de usar Git, crie um arquivo .gitignore ao lado de package.json e adicione:
.env
node_modules/O manual Git explica por que essas duas linhas pertencem a cada projeto em ignorando arquivos e boas práticas.
Nunca commit sua chave de API
O arquivo .env contém uma credencial ativa. Não faça upload dele, cole-o no código-fonte ou commit-o no Git. Se uma chave for exposta, revogue-a no provedor e crie uma nova.
Reinicie o projeto após qualquer alteração em .env. O comando de execução correto depende de qual parte do curso o ZIP veio.
.env logo ao lado de package.json e copie seus três valores do Scrimba nele. São os mesmos valores que o Scrimba mantinha nas configurações de sua conta, agora armazenados em seu próprio computador. Mantenha esse arquivo fora do Git. Execute o Gift Genie somente para navegador
As lições do Gift Genie antes da migração do backend têm index.html e vite.config.js, mas nenhum server.js ativo no script start. Instale e inicie o projeto:
$ npm install
$ npm startVite imprime um endereço local semelhante a este:
VITE ready
Local: http://localhost:5173/Abra a URL Local exata impressa em seu terminal. Se a porta 5173 estiver ocupada, Vite normalmente seleciona outra porta e imprime esse endereço. Pare o Vite com Ctrl+C.
Esta versão expõe sua chave ao navegador
Essas lições propositalmente chamam o provedor de IA a partir de JavaScript frontend. Vite copia AI_KEY no bundle do navegador, então qualquer pessoa que abra a página pode ler a chave nas ferramentas do desenvolvedor do seu navegador. Use uma chave temporária e restrita para aprendizado local. Não implante esta versão nem a compartilhe em uma rede. A migração de backend mais adiante no curso é a arquitetura segura para construir.
npm install, depois npm start, e abra a URL Local exata que Vite imprime em vez de uma que você lembra. Pressione Ctrl+C quando terminar. Execute o Gift Genie com seu backend
A migração do backend e lições posteriores têm server.js e vite.config.js. Seu script start inicia Express e Vite juntos. O download atual não carrega .env no processo Express automaticamente, então faça esta única alteração em package.json antes de iniciá-lo.
Encontre o script server:
"server": "node --watch server.js"Altere-o para:
"server": "node --env-file=.env --watch server.js"O projeto do módulo Deployment precisa da mesma mudança --env-file para seu servidor.
Adicione a porta do backend ao .env:
AI_URL=https://seu-provedor.exemplo/v1
AI_KEY=sua-chave-aqui
AI_MODEL=seu-id-de-modelo
PORT=3001Depois instale e inicie ambos os processos:
$ npm install
$ npm startVocê deverá ver uma mensagem Express para a porta 3001 e uma URL Local do Vite, geralmente porta 5173. Abra a URL do Vite. Não abra a porta 3001 como página da aplicação. O navegador envia solicitações /api para Vite, e Vite as proxya para Express. A chave de API fica no processo do servidor.
Pare ambos os processos com Ctrl+C.
Mantenha o backend na porta 3001
O servidor Express baixado lê PORT, mas seu proxy Vite aponta diretamente para http://localhost:3001. Deixe PORT=3001 a menos que outro processo precise dessa porta. Se você alterar, também altere o alvo do proxy em vite.config.js para a mesma porta e reinicie o projeto.
PORT=3001, execute npm install e npm start, depois abra a URL do Vite, não a porta 3001. Um Ctrl+C para ambas as partes do app. Solução de problemas
Missing AI_KEY, resposta 401 ou erro de autenticação: Verifique a grafia de todos os três nomes de variáveis, confirme que a chave está ativa e reinicie o projeto. Uma chave, URL e modelo de provedores diferentes não funcionarão como um conjunto.
O modelo não pode ser encontrado ou o provedor rejeita a solicitação: Copie o ID do modelo exatamente. Alguns recursos do curso, incluindo ferramentas de API de Respostas, os assistentes incorporados que um modelo pode chamar durante uma solicitação, não são suportados por cada provedor compatível com OpenAI, ou por cada modelo que esses provedores oferecem.
npm start diz que um pacote ou comando está faltando: Certifique-se de que o terminal está na pasta contendo package.json, depois execute npm install novamente. Se o download contiver um lockfile para um gerenciador de pacotes diferente, siga esse lockfile em vez de gerar um segundo.
A página abre, mas uma solicitação /api falha: Isso se aplica à versão backend. Verifique se Express e Vite ainda estão em execução no mesmo terminal. Confirme que Express está na porta 3001 e o alvo do proxy em vite.config.js também diz 3001.
EADDRINUSE menciona a porta 3001: Outro processo está usando a porta do backend. Pare esse processo ou altere PORT em .env e o alvo do proxy do Vite para a mesma porta não utilizada.
Vite usa 5174 ou outra porta frontend: Isso é normal quando 5173 está ocupada. Abra a URL Local que Vite imprimiu. Você não precisa alterar a porta Express.
package.json, se .env contém todos os três valores de IA e se você reiniciou após editá-lo. Para a versão backend, mantenha ambos os processos em execução.