Intro to AI EngineeringEjecutar Intro to AI Engineering localmente
Usa esta página para ejecutar el proyecto extraído de Gift Genie en tu computadora. El curso actual tiene dos formas del proyecto: una aplicación Vite solo para navegador y, después de la migración del backend, una aplicación Express y Vite. Identifica la forma que tienes, luego sigue su configuración más abajo.
Qué necesitas primero
Instala una versión LTS compatible de Node.js. Se recomienda Node 24. Node 22.12 o posterior también soporta la versión de Vite que usan los proyectos posteriores del curso.
Verifica que Node y npm estén disponibles:
$ node --version
v24.18.0
$ npm --version
11.18.0npm viene incluido con Node. Si algún comando dice "command not found", termina de instalar Node antes de continuar.
Identifica el proyecto que extrajiste
Entra en la carpeta extraída que contiene package.json:
$ cd path-to-your-downloaded-projectTodos los comandos en esta página se ejecutan desde esa carpeta.
Luego verifica qué forma de proyecto tienes. La versión solo para navegador tiene index.html y vite.config.js, y su script start no ejecuta ningún archivo de servidor. La versión Express y Vite tiene tanto server.js como vite.config.js, y su script start los ejecuta juntos.
package.json y lee su script start. Si ejecuta un archivo server.js, sigue la sección de backend. Si no, tienes la versión solo para navegador. Agrega tus valores de entorno
Scrimba suministra tres variables de entorno desde la configuración de tu cuenta. Tu computadora no tiene acceso a esa configuración, así que crea un archivo llamado .env al lado de package.json:
AI_URL=https://your-provider.example/v1
AI_KEY=your-key-here
AI_MODEL=your-model-idCopia los valores que usaste en el curso. La URL y el modelo deben pertenecer al mismo proveedor que la clave.
Antes de usar Git, crea un archivo .gitignore al lado de package.json y agrega:
.env
node_modules/El manual de Git explica por qué estas dos líneas pertenecen a todos los proyectos en ignoring files and good habits.
Nunca hagas commit de tu clave API
El archivo .env contiene una credencial funcional. No la subas, la pegues en código fuente, ni la hagas commit a Git. Si una clave se expone, revócala en el proveedor y crea una nueva.
Reinicia el proyecto después de cualquier cambio a .env. El comando de ejecución correcto depende de qué parte del curso vino el ZIP.
.env justo al lado de package.json y copia tus tres valores de Scrimba en él. Son los mismos valores que Scrimba guardó en la configuración de tu cuenta, ahora almacenados en tu propia computadora. Mantén ese archivo fuera de Git. Ejecuta Gift Genie solo para navegador
Las lecciones de Gift Genie antes de la migración del backend tienen index.html y vite.config.js, pero sin server.js activo en el script start. Instala e inicia el proyecto:
$ npm install
$ npm startVite imprime una dirección local similar a esta:
VITE ready
Local: http://localhost:5173/Abre la URL exacta Local que se imprime en tu terminal. Si el puerto 5173 está ocupado, Vite normalmente selecciona otro puerto e imprime esa dirección en su lugar. Detén Vite con Ctrl+C.
Esta versión expone tu clave al navegador
Estas lecciones deliberadamente llaman al proveedor de IA desde JavaScript del frontend. Vite copia AI_KEY en el bundle del navegador, así que cualquiera que abra la página puede leer la clave en las herramientas de desarrollador de su navegador. Usa una clave temporal y restringida para aprender localmente. No despliegues esta versión ni la compartas en una red. La migración del backend más adelante en el curso es la arquitectura segura en la que construir.
npm install, luego npm start, y abre la URL Local exacta que Vite imprime en lugar de una que recuerdes. Presiona Ctrl+C cuando termines. Ejecuta Gift Genie con su backend
La migración del backend y las lecciones posteriores tienen tanto server.js como vite.config.js. Su script start lanza Express y Vite juntos. La descarga actual no carga .env en el proceso de Express automáticamente, así que haz este cambio en package.json antes de iniciarlo.
Encuentra el script server:
"server": "node --watch server.js"Cámbialo a:
"server": "node --env-file=.env --watch server.js"El proyecto del módulo Deployment necesita el mismo cambio --env-file para su servidor.
Agrega el puerto del backend a .env:
AI_URL=https://your-provider.example/v1
AI_KEY=your-key-here
AI_MODEL=your-model-id
PORT=3001Luego instala e inicia ambos procesos:
$ npm install
$ npm startDeberías ver un mensaje de Express para el puerto 3001 y una URL Local de Vite, normalmente puerto 5173. Abre la URL de Vite. No abras el puerto 3001 como la página de la aplicación. El navegador envía solicitudes /api a Vite, y Vite las proxifica a Express. La clave de API permanece en el proceso del servidor.
Detén ambos procesos con Ctrl+C.
Mantén el backend en el puerto 3001
El servidor Express descargado lee PORT, pero su proxy de Vite apunta directamente a http://localhost:3001. Deja PORT=3001 a menos que otro proceso necesite ese puerto. Si lo cambias, también cambia el destino del proxy en vite.config.js al mismo puerto y reinicia el proyecto.
PORT=3001, ejecuta npm install y npm start, luego abre la URL de Vite, no el puerto 3001. Un Ctrl+C detiene ambas partes de la aplicación. Solución de problemas
Missing AI_KEY, una respuesta 401, o un error de autenticación: Verifica la ortografía de los tres nombres de variable, confirma que la clave está activa, y reinicia el proyecto. Una clave, URL y modelo de diferentes proveedores no funcionarán como un conjunto.
El modelo no se puede encontrar o el proveedor rechaza la solicitud: Copia el ID del modelo exactamente. Algunas características del curso, incluyendo herramientas de API de Respuestas, los ayudantes incorporados que un modelo puede llamar durante una solicitud, no son soportados por todos los proveedores compatibles con OpenAI, o por todos los modelos que ofrecen esos proveedores.
npm start dice que un paquete o comando falta: Asegúrate de que la terminal esté en la carpeta que contiene package.json, luego ejecuta npm install de nuevo. Si la descarga contiene un lockfile para un gestor de paquetes diferente, sigue ese lockfile en lugar de generar uno segundo.
La página se abre, pero una solicitud /api falla: Esto aplica a la versión del backend. Verifica que Express y Vite sigan ejecutándose en la misma terminal. Confirma que Express está en el puerto 3001 y el destino del proxy en vite.config.js también dice 3001.
EADDRINUSE menciona el puerto 3001: Otro proceso está usando el puerto del backend. Detén ese proceso, o cambia tanto PORT en .env como el destino del proxy de Vite al mismo puerto no utilizado.
Vite usa 5174 u otro puerto de frontend: Eso es normal cuando 5173 está ocupado. Abre la URL Local que Vite imprimió. No necesitas cambiar el puerto de Express.
package.json, que .env tenga los tres valores de IA, y que hayas reiniciado después de editarlo. Para la versión del backend, mantén ambos procesos ejecutándose.