Ejecutar Context Engineering localmente

Usa esta página para ejecutar el desafío de síntesis que extrajiste del módulo de Context Engineering. El proyecto se instala tal como se descarga, pero dos archivos leen su configuración de OpenRouter de una forma que solo funciona en Scrimba, así que debes cambiar esas lecturas para Vite y agregar tu propia clave antes de que la aplicación pueda responder.

Lo que necesitas primero

Instala Node.js 24, la versión LTS recomendada, que incluye npm. Node 22.12 o más nuevo también funciona. El proyecto se ejecuta en Vite 7, que no soporta versiones más antiguas de Node.

Verifica que ambos comandos impriman un número de versión:

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

Si alguno de los comandos dice "command not found", termina de instalar Node antes de continuar. Si node --version imprime algo por debajo de v22.12.0, instala Node 24 primero, porque la versión de Vite del proyecto no lo soporta.

También necesitas una clave de API de OpenRouter y un ID de modelo que tu cuenta pueda usar. Crea una clave temporal con un límite de gasto bajo: este proyecto de aprendizaje envía sus solicitudes del proveedor desde el navegador, así que la clave viaja con cada solicitud.

JunoLo que necesitas primero Instala Node.js 24 y verifica que node --version y npm --version ambos impriman números. Cualquier versión desde v22.12.0 en adelante funciona.

Luego crea una clave temporal de OpenRouter con un límite de gasto bajo, y anota un ID de modelo que tu cuenta pueda usar.

JunoLo que necesitas primero Vite 7 establece el piso de Node en 20.19 o 22.12, y Node 20 ha llegado al final de su vida, así que 22.12 es el mínimo práctico.

Cada solicitud del proveedor sale del navegador con tu clave de OpenRouter adjunta, así que mantén esa clave temporal y limitada. Mientras estés en el panel de OpenRouter, confirma que el ID del modelo esté disponible para tu cuenta; eso te evitará un confuso 404 más adelante.

JunoLo que necesitas primero La llamada del proveedor se ejecuta en código del cliente, así que el navegador, y cualquiera con las herramientas de desarrollo abiertas, recibe tu clave de OpenRouter.

Usa una clave de aprendizaje restringida con un límite bajo aquí, y mueve las llamadas del proveedor a un backend antes de que cualquier versión de este proyecto se implemente.

Abre e instala el proyecto

Abre una terminal en la carpeta extraída, la que contiene package.json, luego instala los paquetes exactamente como los registra el archivo de bloqueo:

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

Cuando termine, aparece una carpeta node_modules junto a package.json. Mantén el package-lock.json incluido tal como está. Si npm reporta hallazgos de auditoría, no ejecutes npm audit fix --force sin verificar qué cambia; ese comando puede mover dependencias del curso a través de versiones mayores.

JunoAbre e instala el proyecto Ejecuta npm ci en la carpeta extraída, la que tiene package.json en ella. Debe aparecer una carpeta node_modules.

Deja el archivo de bloqueo sin cambios: enumera las versiones exactas de los paquetes con los que se grabó el curso.

JunoAbre e instala el proyecto Usa npm ci porque la descarga incluye un archivo de bloqueo, y ci instala exactamente lo que registra.

Las advertencias de auditoría no son razón para forzar actualizaciones de dependencias mayores en un proyecto del curso; cambiarías una advertencia por un proyecto roto.

JunoAbre e instala el proyecto Mantén el archivo de bloqueo fijo mientras cambias las lecturas del entorno. Si actualizas dependencias en el mismo paso, no podrás decir si la edición de Vite funcionó o una actualización rompió algo más.

Repara las variables de entorno

En Scrimba, el proyecto lee su clave y modelo a través de process.env. En un proyecto del navegador ejecutándose bajo el servidor de desarrollo de Vite, process no existe, así que esas lecturas tienen que cambiar.

Busca en main.js y utils.js estos valores:

process.env.OPENROUTER_KEY
process.env.MODEL_ID

Reemplaza cada ocurrencia con:

import.meta.env.VITE_OPENROUTER_KEY
import.meta.env.VITE_MODEL_ID

Si te falta una, la aplicación después falla en el navegador con process is not defined, así que busca en ambos archivos hasta que ninguno contenga process.env.

Crea .env junto a package.json:

VITE_OPENROUTER_KEY=your-openrouter-key
VITE_MODEL_ID=a-current-model-id-from-openrouter

Usa un modelo que esté actualmente disponible para tu cuenta de OpenRouter y que soporte las llamadas realizadas en el curso; los catálogos de proveedores cambian. Vite lee .env cuando inicia, así que reinicia el servidor de desarrollo después de editar el archivo.

Crea .gitignore junto a él para que la clave nunca llegue a Git:

.env
node_modules/
dist/

El manual de Git cubre este hábito en ignoring files and good habits.

La clave de OpenRouter es visible en el navegador

Cada valor VITE_ se incluye en el código del cliente. Usa una clave de aprendizaje temporal, establece un límite de gasto bajo, y no publiques este proyecto. Una versión implementada debe llamar al proveedor desde un backend.

JunoRepara las variables de entorno En main.js y utils.js, reemplaza ambas lecturas de process.env con los nombres import.meta.env.VITE_ correspondientes. Luego crea .env con tu clave e ID de modelo, y agrega .gitignore.

Usa una clave temporal de OpenRouter aquí: este proyecto del navegador muestra la clave a cualquiera que mire.

JunoRepara las variables de entorno Vite expone valores de .env al código del cliente a través de import.meta.env, y solo para nombres que comienzan con VITE_. Por eso ambos archivos fuente necesitan las lecturas directas.

El mismo prefijo es por qué la credencial termina expuesta en lugar de protegida: disponible para tu código significa disponible para el navegador.

JunoRepara las variables de entorno El archivo vite.config.js descargado inyecta los valores antiguos de process.env, que una compilación de producción aplica pero la transformación de desarrollo deja en los módulos del navegador. Leer import.meta.env.VITE_... directamente funciona en ambos.

Vite sustituye esos valores en el código que sirve, así que puedes confirmar la corrección encontrando la clave en texto plano en el código fuente cargado o en el encabezado Authorization de la solicitud en la pestaña Network. Esa clave legible es también el argumento para mover esta llamada a un servidor.

Ejecuta y verifica el proyecto

Inicia el servidor de desarrollo:

$ npm start

Abre la URL Local que Vite imprime, luego continúa la conversación hasta que el proyecto sintetice sus mensajes anteriores. Un resumen nuevo en la aplicación en ejecución es la señal visible de que tu clave y modelo funcionan. La página puede abrirse antes de que ninguna solicitud de OpenRouter tenga éxito, así que una página abierta sola no prueba la configuración.

Detén el servidor con Ctrl+C. Después de cambiar .env, inicia de nuevo con npm start para que Vite lea los nuevos valores.

JunoEjecuta y verifica el proyecto Ejecuta npm start, abre la URL Local que Vite imprime, y chatea hasta que la aplicación sintetice sus mensajes anteriores. Ese resumen es tu prueba de que la configuración de OpenRouter funciona.

Ctrl+C detiene el servidor cuando termines.

JunoEjecuta y verifica el proyecto La página puede abrirse antes de que ninguna solicitud del proveedor tenga éxito, así que ejecuta el flujo de síntesis como la verificación real.

Si un valor de entorno cambiado no se muestra, reinicia Vite: lee .env al inicio.

JunoEjecuta y verifica el proyecto Vite iniciando sin problemas solo prueba que el código editado se compila. Un resumen exitoso es la verificación separada de que OpenRouter acepta tu clave y modelo y devuelve una respuesta que el proyecto puede usar.

Esas son dos superficies de fallo diferentes, así que pruébalas como dos.

Solución de problemas

process is not defined: Al menos una lectura de entorno permanece en main.js o utils.js. Busca en ambos archivos, no solo en la configuración de Vite.

La clave permanece indefinida: Confirma la ortografía VITE_ en .env y en el código, coloca .env junto a package.json, y reinicia Vite.

El modelo devuelve 404 o un error de acceso: Lee el error de OpenRouter en las herramientas de desarrollo del navegador: un 401 apunta a la clave, un 404 al ID del modelo, y un 429 a un límite de tasa. Copia un ID de modelo actual de OpenRouter y confirma que tu cuenta puede usarlo.

La conversación funciona hasta que se hace larga: Ese es el comportamiento que este curso explora. Antes de mirar al proveedor, confirma que tus ediciones no cambiaron los umbrales de tokens, los avisos de síntesis, o los datos de conversación de ejemplo que el curso incluye.

JunoSolución de problemas Busca en ambos archivos JavaScript lecturas process.env pendientes, luego verifica las dos ortografías VITE_ en .env y reinicia.

Una conversación larga que desencadena un resumen es el curso funcionando, no rompiéndose.

JunoSolución de problemas Separa una sustitución de Vite faltante de un error del proveedor o modelo: process is not defined o una clave indefinida es local, mientras que un código de estado viene de OpenRouter.

Si solo las conversaciones largas fallan, confirma los umbrales de contexto y avisos del curso antes de cambiar la configuración local.

JunoSolución de problemas Lee el error de OpenRouter antes de cambiar nada: 401 es la clave, 404 el ID del modelo, 429 limitación de tasa, y cada uno tiene una corrección diferente.

Solo después de que las solicitudes tengan éxito debes inspeccionar el umbral de síntesis de la aplicación y los avisos, e incluso entonces deja los datos de conversación suministrados sin cambios.