Intro to AI EngineeringExecutando Intro to AI Engineering localmente
Use esta página para executar o projeto Gift Genie extraído do Intro to AI Engineering em seu computador com seu próprio provedor de IA. O projeto vem em duas formas: um app Vite somente navegador nas aulas antes da migração de backend, e um app Express e Vite a partir da migração de backend em diante. Uma linha em package.json diz qual você tem; a instalação e o arquivo .env são os mesmos para ambos, e o início difere.
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. Seus números de versão podem ser diferentes:
$ node --version
v24.18.0
$ npm --version
11.18.0Você também precisa dos três valores que definiu nas variáveis de ambiente do Scrimba durante o curso: a URL do seu provedor, sua chave de API e o ID do modelo. Se não tiver mais a chave, crie uma nova no mesmo provedor.
node --version e npm --version imprimem uma versão. Depois tenha pronto a URL do seu provedor, sua chave de API e seu ID de modelo. Você colará todos os três em um arquivo em poucos minutos.
Descubra qual projeto você tem
Abra package.json na pasta extraída e encontre a linha start. Se disser apenas vite, você tem o projeto somente navegador:
"start": "vite"Se disser concurrently, com um script server abaixo dele, você tem o projeto com backend. Sua pasta também contém server.js:
"start": "concurrently \"npm run client\" \"npm run server\" ",
"server": "node --watch server.js",package.json e leia a linha start. Se disser vite e nada mais, você tem o projeto somente navegador. Se disser concurrently, você tem o projeto com backend. Lembre-se qual é: as últimas duas seções cobrem uma cada.
Instale os pacotes
Abra um terminal na pasta extraída, aquela que contém package.json. Todos os comandos nesta página são executados a partir daí:
$ cd path-to-your-extracted-projectInstale os pacotes que o projeto lista. Isto é o mesmo para ambas as formas:
$ npm installnpm termina relatando quantos pacotes adicionou. Também pode relatar vulnerabilidades, ou avisos allow-scripts sobre esbuild e fsevents. Nenhum impede que o projeto execute.
npm install na pasta com package.json. Termina dizendo quantos pacotes foram adicionados. Se npm disser que não consegue encontrar package.json, você está na pasta errada.
Adicione seus valores a .env
No Scrimba, o editor preenche suas três variáveis de ambiente para você. Em seu computador, elas vêm de um arquivo. Crie .env ao lado de package.json e coloque seus valores nele sob exatamente estes nomes:
AI_URL=https://api.openai.com/v1
AI_KEY=your-key-here
AI_MODEL=your-model-idEste exemplo usa a URL do OpenAI. Se você usou outro provedor durante o curso, como Groq ou OpenRouter, use sua URL. O ID do modelo deve ser um que esse provedor oferece.
Crie .gitignore ao lado de package.json e adicione:
.env
node_modules/Uma chave que chega a um repositório Git permanece em seu histórico mesmo depois de você deletar o arquivo. O manual do Git cobre esse hábito em ignorando arquivos e boas práticas.
Nunca faça commit de sua chave de API
.env contém uma chave funcional. Não a carregue, cole a chave em seu código, ou faça commit do arquivo. Se uma chave for exposta, delete-a em seu provedor e crie uma nova.
.env ao lado de package.json com seus três valores, um por linha, depois liste .env em .gitignore para que Git nunca o salve. Execute o projeto somente navegador
Esta versão coloca sua chave no navegador
Essas aulas chamam o provedor de IA direto da página, então Vite escreve AI_KEY no código que envia para o navegador, e qualquer pessoa que abra a página pode lê-lo. Use uma chave que você deletará quando terminar, mantenha esta versão em seu próprio computador, e nunca implante ou compartilhe. A migração de backend mais adiante no curso move a chave para um servidor.
Inicie o projeto:
$ npm startVite imprime o endereço para abrir:
VITE v7.3.0 ready in 176 ms
➜ Local: http://localhost:5173/Abra o endereço Local exato. Se a porta 5173 estiver ocupada, Vite escolhe a próxima e imprime aquela.
Nas primeiras aulas, como Setting Up Your AI Client, a página está em branco propositalmente: o trabalho acontece no console do navegador. Abra as ferramentas de desenvolvedor do seu navegador (F12, ou Cmd+Option+J no Chrome em um Mac) e leia a aba Console. Deve mostrar seus valores:
AI provider URL: https://api.openai.com/v1
AI model: your-model-idAulas que constroem a página Gift Genie mostram essa página. Pare o projeto com Ctrl+C.
npm start e abra o endereço Local. Se a página estiver em branco, abra o Console: as duas linhas com sua URL de provedor e modelo significam que .env foi lido. Um Missing AI_URL vermelho lá significa que não foi.
Execute o projeto com backend
No Scrimba, o servidor obteve suas variáveis de ambiente automaticamente. Em seu computador, Node lê .env apenas quando você diz, e o script de servidor no download não. Então faça uma alteração em package.json antes de iniciar. Altere o script server de:
"server": "node --watch server.js",para:
"server": "node --env-file=.env --watch server.js",Então inicie ambas as partes do app:
$ npm startAs linhas [1] vêm do servidor Express e as linhas [0] do Vite:
[1] Server running at http://localhost:3001
[0]
[0] VITE v7.3.1 ready in 1526 ms
[0]
[0] ➜ Local: http://localhost:5173/Abra o endereço Local do Vite, não a porta 3001: o servidor responde apenas as requisições /api do app, então a porta 3001 sozinha mostra Cannot GET /. Digite para quem é o presente e clique Rub the Lamp. O botão muda para Summoning Gift Ideas..., e alguns segundos depois ideias de presentes aparecem abaixo dele. Isso significa que sua chave, URL e modelo funcionam.
Se a página diz Sorry, I can't access what I need right now, o motivo está no terminal, em uma linha [1] do servidor. A solução de problemas abaixo corresponde cada mensagem.
Pare ambas as partes com um Ctrl+C. Quando você salva .env enquanto o app executa, ambas as partes reiniciam sozinhas e usam os novos valores.
O projeto de Implantação precisa da mesma alteração --env-file para seu servidor.
--env-file=.env ao script server, execute npm start, e abra o endereço Local do Vite. Clique Rub the Lamp e espere pelas ideias de presentes. Se a página pedir desculpas, leia as linhas [1] mais novas no terminal.
Solução de problemas
Somente navegador: uma página em branco, e o console diz Missing AI_URL, Missing AI_MODEL ou Missing AI_KEY: Vite não encontrou esse valor. Verifique se .env está ao lado de package.json e se os nomes estão soletrados exatamente como acima, depois salve. Vite reinicia sozinho (.env changed, restarting server...); recarregue a página.
Backend: o terminal diz Missing credentials, depois Failed running 'server.js': O servidor iniciou sem seu .env. Verifique se o script server contém --env-file=.env e se .env soletra AI_KEY exatamente, depois pare o projeto com Ctrl+C e execute npm start novamente.
Backend: o terminal diz node: .env: not found: O flag está no lugar, mas não há .env ao lado de package.json. Crie lá, ou verifique se seu editor não o salvou como .env.txt. O servidor já parou, então pare o projeto com Ctrl+C e execute npm start novamente.
Backend: a página diz Sorry, I can't access what I need right now, e o terminal mostra 401 com Incorrect API key provided: A requisição chegou ao seu provedor, que não aceitou a chave. Copie a chave novamente, e verifique se a URL em AI_URL pertence ao mesmo provedor.
Seu provedor diz que o modelo não existe ou não está disponível: A mensagem mostra em uma linha [1] no terminal para o projeto com backend, ou no console do navegador para uma aula somente navegador que envia uma requisição. Copie o ID do modelo novamente exatamente como seu provedor lista, e verifique que pertence ao provedor em AI_URL.
Backend: o terminal mostra http proxy error: /api/gift com ECONNREFUSED: Vite não consegue alcançar Express na porta 3001. Role para cima até as primeiras linhas [1]. Se mostrarem um erro, o servidor parou lá, geralmente por um dos motivos acima. Se disserem Server running at uma porta diferente de 3001, seu terminal já define PORT, que ganha sobre .env: mude o alvo do proxy em vite.config.js para essa porta.
Backend: EADDRINUSE menciona a porta 3001: Outro programa está usando a porta do servidor. Pare-o, ou defina PORT em .env e mude o alvo do proxy em vite.config.js para a mesma porta.
npm start diz concurrently: command not found ou vite: command not found: Os pacotes não estão instalados nesta pasta. Execute npm install na pasta que contém package.json.