Ejecutar el código localmente

Usa esta página para ejecutar un proyecto extraído de Learn AI Agents en tu computadora y obtener una respuesta del agente OpenSwap con tu propia clave de proveedor. Dos cosas cambian respecto a Scrimba: le das al proyecto sus tres valores de IA en un archivo .env en lugar de hacerlo en la configuración de Scrimba, y el proyecto no se recarga automáticamente cuando cambias un archivo. La versión de Scrimba sigue funcionando independientemente de si haces esto.

Lo que necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24, Node 22 también funciona, y ambas incluyen npm. Verifica que ambos comandos impriman una versión. Tus números de versión pueden ser diferentes:

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

También necesitas los tres valores que guardaste en la configuración de entorno de Scrimba: AI_KEY, AI_MODEL y AI_URL. Si ya no los tienes, o nunca los configuraste, la configuración del proveedor te guía a través de cómo obtener una clave de OpenAI u OpenRouter.

JunoLo que necesitas primero Instala la versión LTS de Node.js, que incluye npm, y verifica que node --version y npm --version impriman una versión.

Luego ten listos tu clave, modelo y URL de Scrimba para copiar. Son los únicos valores que este proyecto necesita.

JunoLo que necesitas primero El proyecto tiene dos partes: un servidor Express que guarda tu clave y llama al proveedor, y un servidor Vite que envía la página a tu navegador. Un comando inicia ambos, y el servidor Express es el que lee los tres valores.

JunoLo que necesitas primeroenvironment.js carga .env con loadEnvFile de node:process, que Node agregó en 20.12. En un Node más antiguo se detiene con un mensaje que menciona esa versión en lugar de comenzar con valores vacíos, así que ese mensaje siempre significa cambiar Node, no .env.

Instala los paquetes

Abre una terminal en la carpeta del proyecto extraído. Es la que contiene package.json, server.js y environment.js:

$ cd path-to-your-extracted-project

Instala los paquetes:

$ npm install
added 106 packages, and audited 107 packages in 6s

El número de paquetes depende de la lección. npm también puede listar vulnerabilidades o advertir que algunos paquetes tienen scripts de instalación. Ninguno de estos problemas impide que el proyecto se ejecute.

JunoInstala los paquetes Abre la terminal en la carpeta que contiene package.json, luego ejecuta npm install. Termina diciéndote cuántos paquetes agregó.

Si npm dice que no puede encontrar package.json, estás en la carpeta incorrecta.

JunoInstala los paquetes La descarga incluye package-lock.json, así que npm install obtiene las mismas versiones de paquetes que usó la lección en Scrimba. Todo lo que instala va a node_modules en esta carpeta, incluidas las herramientas que inician los dos servidores.

JunoInstala los paquetesnpm start ejecuta concurrently, que solo existe en el node_modules de esta carpeta. Intentar iniciar antes de instalar falla con concurrently: command not found, no con un error sobre tu código.

Crea tu archivo .env

El proyecto lo crea por ti. Inicia una vez:

$ npm start

La primera vez, el servidor no encuentra valores, crea .env al lado de package.json, y se detiene con este mensaje:

Error: Missing environment variables: AI_KEY, AI_MODEL, AI_URL.
Created .env with the required variable names. Complete it, then restart the app.
Setup guide: https://docs.scrimba.com/ai-agents/running-locally

Vite sigue ejecutándose e imprime una dirección, pero la página aún no puede funcionar. Presiona Ctrl+C para detener todo, luego abre .env. Tiene una línea vacía por cada valor y una línea de puerto comentada al final:

AI_KEY=
AI_MODEL=
AI_URL=
GITHUB_TOKEN=
# PORT=3001

Completa tus tres valores directamente después de cada =, sin espacios ni comillas. Con OpenAI, el valor predeterminado del curso, se ve así:

AI_KEY=your-api-key-here
AI_MODEL=gpt-5.4-nano
AI_URL=https://api.openai.com/v1
GITHUB_TOKEN=
# PORT=3001

GITHUB_TOKEN aparece solo en lecciones que verifican proyectos en GitHub. Puedes dejarlo vacío; GitHub entonces responde con un límite de velocidad más bajo. Deja la línea # PORT=3001 como está.

Nunca confirmes tu archivo .env

Si pones este proyecto en Git, crea un .gitignore al lado de package.json antes de tu primer commit, para que tu clave y los paquetes instalados se queden fuera del repositorio:

.env
node_modules

Una clave que llega a un repositorio permanece en su historial incluso después de que elimines el archivo; la única solución es eliminar la clave en tu proveedor y crear una nueva. El manual de Git cubre este tema en ignoring files and good habits.

JunoCrea tu archivo .env Ejecuta npm start una vez para que el proyecto cree .env, presiona Ctrl+C, luego copia tu clave, modelo y URL en las tres líneas vacías y guarda.

Si dice que creó .env de nuevo la próxima vez, tu archivo tiene un nombre diferente, como .env.txt.

JunoCrea tu archivo .env En Scrimba, el editor proporciona estos valores al proyecto en ejecución. Aquí, environment.js se ejecuta primero en server.js, lee .env, y se niega a iniciar el servidor mientras un valor requerido esté vacío, así que un valor faltante se ve antes de que se haga cualquier solicitud.

JunoCrea tu archivo .env El archivo se crea solo cuando no existe un archivo llamado .env, así que un archivo guardado como .env.txt se ignora y aparece un nuevo .env vacío junto a él. Los valores se leen una sola vez, al iniciar, por eso cada edición necesita un reinicio.

Inicia la aplicación y envía una solicitud

Inicia el proyecto de nuevo:

$ npm start

Ambos servidores imprimen en la misma terminal. Marcas para tus tres valores y dos direcciones significan que ambos iniciaron:

Environment check:
✓ AI_KEY: configured
✓ AI_MODEL: gpt-5.4-nano
✓ AI_URL: https://api.openai.com/v1
○ Optional environment not configured: GITHUB_TOKEN
OpenSwap server running at http://localhost:3001

  VITE v6.4.3  ready in 150 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Abre la dirección Local, no la 3001, y usa la página como lo hiciste en la lección. En las lecciones de OpenSwap, elige un nombre de software o escribe una solicitud, luego haz clic en Swap it. El botón dice Loading... mientras el agente trabaja, y que aparezca una respuesta significa que tu clave, modelo y URL funcionan. Si tu página tiene un botón Run Agent en su lugar, haz clic en él; la salida del agente aparece en la terminal, no en la página.

Si la página muestra un error o nada sucede, la razón está en la terminal; la solución de problemas a continuación coincide con cada mensaje.

El proyecto no se recarga automáticamente. Después de cambiar cualquier archivo, presiona Ctrl+C, ejecuta npm start de nuevo, luego actualiza el navegador.

JunoInicia la aplicación y envía una solicitud Ejecuta npm start, abre la dirección Local, y envía una solicitud.

Si la página muestra un error, mira la terminal para las líneas que aparecieron cuando hiciste clic, y encuéntralas bajo la sección de solución de problemas.

JunoInicia la aplicación y envía una solicitud La página solo llama a direcciones que comienzan con /api en el servidor Vite, y Vite las reenvía a Express. Express envía la solicitud a tu proveedor con tu clave, así que la clave nunca llega al navegador.

JunoInicia la aplicación y envía una solicitud Cada falla del servidor se convierte en el mismo mensaje genérico en el navegador: la ruta registra el error real con console.error y responde con un 500. La observación de archivos de Vite está desactivada, así que sigue sirviendo la primera versión de cada archivo que envió, y Express nunca se recarga, por eso un cambio necesita un reinicio.

Cuando el puerto 3001 está ocupado

Express escucha en el puerto 3001. Si algo más ya lo usa, muy a menudo otra lección que dejaste ejecutándose en una terminal diferente, el servidor aún imprime su línea server running at http://localhost:3001, luego se detiene sin un error. Las solicitudes de la página entonces llegan al otro programa: puedes ver un error como is not valid JSON, o respuestas de la otra lección.

Detén el otro proyecto con Ctrl+C en su terminal. Para ejecutar ambos, dale a este uno un puerto diferente: abre .env, quita el # de la última línea, y cambia el número:

PORT=3101

Presiona Ctrl+C y ejecuta npm start de nuevo. La línea del servidor ahora muestra 3101, y Vite envía las solicitudes de la página allá, porque lee la misma línea.

El puerto de Vite se mueve por sí solo. Si 5173 está ocupado, Vite imprime Port 5173 is in use, trying another one... y una dirección Local como http://localhost:5174/, así que siempre abre la dirección que imprime.

JunoCuando el puerto 3001 está ocupado Si la página muestra un error o respuestas de otra lección, busca otra terminal aún ejecutando npm start y detenla con Ctrl+C.

Para mantener ambas ejecutándose, cambia # PORT=3001 a PORT=3101 en el .env de este proyecto y reinicia.

JunoCuando el puerto 3001 está ocupado Express y el reenvío de Vite leen PORT del mismo .env, así que cambiar esa línea mueve ambos. El puerto de Vite es separado y no necesita configuración.

JunoCuando el puerto 3001 está ocupado En Express 5, app.listen pasa un error de escucha a su callback, y el callback de este proyecto ignora el argumento e imprime la línea en ejecución. El proceso entonces no tiene nada que lo mantenga vivo y sale, así que la terminal muestra éxito mientras Vite reenvía a lo que sea que posea 3001.

Si algo no funciona

concurrently: command not found (en Windows, 'concurrently' is not recognized): los paquetes no están instalados en esta carpeta. Ejecuta npm install allá, luego npm start.

Missing environment variables: seguido de nombres: esas líneas en .env aún están vacías, o el archivo no se guardó. Complétalas e inicia de nuevo.

Dice Created .env de nuevo, aunque ya hiciste uno: tu archivo no se llama exactamente .env en la carpeta con package.json. Un archivo guardado como .env.txt no cuenta. Pon tus valores en el nuevo .env y elimina el otro archivo.

La página muestra Unexpected end of JSON input: el servidor Express no está ejecutándose, y la terminal muestra [vite] http proxy error. Desplázate hacia arriba hasta el primer error sobre las líneas de Vite; dice por qué Express se detuvo.

La terminal muestra 401 Incorrect API key provided (OpenAI) o 401 Missing Authentication header (OpenRouter): el proveedor rechazó AI_KEY. Copia la clave de nuevo de tu proveedor, guarda .env e reinicia.

La terminal muestra 429 y exceeded your current quota: la clave funciona, pero la cuenta no tiene crédito para gastar. Agrega crédito con tu proveedor e intenta de nuevo.

La terminal muestra un error de modelo no encontrado: AI_MODEL y AI_URL pertenecen a diferentes proveedores, por ejemplo un ID de modelo de OpenAI con la URL de OpenRouter. Cambia los tres valores juntos cuando cambies proveedores.

"Local environment loading requires Node.js 20.12 or newer." Tu Node es demasiado antiguo para el cargador .env del proyecto. Instala la versión LTS actual desde nodejs.org, luego ejecuta npm start de nuevo.

En lecciones con una barra lateral de chat, una solicitud fallida puede dejar un chat llamado New conversation. Está vacío y no causa daño.

Todo se ve correcto y aún falla. Llévalo al Discord del curso, con lo que ejecutaste y lo que devolvió. Los problemas de configuración casi siempre son específicos de una máquina, y alguien generalmente ha experimentado el tuyo antes.

JunoSi algo no funciona Lee la terminal primero: encuentra la primera línea que comienza con Error o muestra un número como 401, y empareja con un encabezado en negrita arriba. Reinicia con npm start después de cada cambio a .env.

JunoSi algo no funciona Los fallos vienen en orden: paquetes faltantes, valores faltantes, Express no ejecutándose, luego el proveedor rechazando la clave, cuenta o modelo. El primero que encuentres te dice a qué paso regresar.

JunoSi algo no funciona Un 401 significa que Express inició con los tres valores y llegó al proveedor en AI_URL, así que .env se cargó; ese proveedor rechazó la clave. Una clave del otro proveedor obtiene el mismo 401, por eso los tres valores cambian como un conjunto.