Ejecutar Context Engineering localmente

Usa esta página para ejecutar el desafío de resumen que extrajiste del módulo de Context Engineering y observa cómo resume una conversación larga con tu propia clave de OpenRouter. El código funciona tal como está descargado: instalas los paquetes, añades un archivo .env con tu clave y un modelo, y lo inicias.

Qué necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm. El proyecto usa Vite 7, que requiere Node 22.12 o más nuevo.

Verifica que ambos comandos funcionen. Tus números de versión pueden ser diferentes:

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

Si node --version muestra algo menor que v22.12.0, instala Node 24 antes de continuar.

También necesitas una clave API de OpenRouter y un poco de crédito en tu cuenta de OpenRouter, porque la app le solicita un resumen y una respuesta cada vez. Crea una clave que eliminarás cuando termines y asígnale un límite de crédito bajo cuando la crees: este proyecto llama a OpenRouter directamente desde el navegador, así que la clave termina en la página.

JunoQué necesitas primero Instala Node.js 24, que incluye npm, y verifica que node --version muestre v22.12.0 o superior.

Luego añade un poco de crédito a tu cuenta de OpenRouter (un dólar cubre muchos resúmenes) y crea una clave con un límite de crédito bajo. Esa única clave es todo lo que este proyecto necesita.

JunoQué necesitas primero La app realiza dos tipos de solicitud a OpenRouter: una le pide al modelo que resuma los mensajes anteriores, y otra transmite la respuesta a tu mensaje. Ambas salen de tu navegador con la misma clave, así que el límite de crédito de la clave limita lo que la página puede gastar.

JunoQué necesitas primero El requisito mínimo de Node viene de Vite 7, no de la app: su package.json solicita Node 20.19 o 22.12 y más nuevo, y Node 20 llegó al final de su vida útil, así que 22.12 es por donde empezar.

Instala los paquetes

Abre una terminal en la carpeta extraída. Es la que contiene package.json y main.js:

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

npm ci instala exactamente las versiones listadas en package-lock.json. npm termina reportando cuántos paquetes agregó:

added 29 packages, and audited 30 packages in 6s

npm también puede reportar vulnerabilidades y sugerir npm audit fix. Déjalas por ahora: la corrección puede cambiar las versiones de paquete en las que se construyó el curso. npm también puede advertir sobre scripts de instalación; eso no cambia nada aquí.

JunoInstala los paquetes Abre la terminal en la carpeta que contiene package.json, luego ejecuta npm ci. npm termina diciendo cuántos paquetes agregó, y aparece una carpeta node_modules.

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

JunoInstala los paquetesnpm ci lee el archivo de bloqueo en lugar de resolver versiones de nuevo, así que obtienes el mismo Vite, AI SDK y proveedor de OpenRouter en los que se escribió el desafío. También se niega a ejecutarse si package.json y el archivo de bloqueo no concuerdan, lo que te lo dice temprano si un archivo fue modificado.

JunoInstala los paquetes Las vulnerabilidades que npm lista están en vite y en las herramientas de construcción bajo él, y en ai y dompurify. Aquí solo afectan a una página servida en tu propia computadora mientras aprendes; actualizarlas es un cambio separado que te aleja de las versiones que las lecciones usaron.

Añade tu clave y modelo a .env

El proyecto lee dos valores: OPENROUTER_KEY y MODEL_ID. El editor de Scrimba los completa para ti; en tu computadora van en un archivo. Crea .env al lado de package.json:

OPENROUTER_KEY=your-openrouter-key-here
MODEL_ID=mistralai/ministral-3b-2512

Mantén ambos nombres exactamente como se muestran, sin VITE_ delante: el vite.config.js del proyecto lee estos dos nombres y los entrega al código del navegador. mistralai/ministral-3b-2512 es un modelo de bajo costo en OpenRouter. Cualquier ID de modelo de OpenRouter funciona; cópialo exactamente.

Crea .gitignore al lado de package.json y añade:

.env
node_modules/

Una clave que llega a un repositorio de Git permanece en su historial incluso después de que elimines el archivo. El manual de Git cubre el hábito en ignorar archivos y buenas prácticas.

Esta clave es visible en el navegador

vite.config.js escribe ambos valores en el código que envía al navegador, así que cualquiera que abra esta página puede leer tu clave. Mantén esta versión en tu propia computadora: nunca la deploys o compartas, y nunca hagas commit de .env. Una versión que publiques necesita un backend o una función serverless que guarde la clave en el servidor.

JunoAñade tu clave y modelo a .env Crea un archivo llamado .env al lado de package.json con dos líneas: tu clave después de OPENROUTER_KEY= y el modelo después de MODEL_ID=. Luego lista .env en .gitignore para que Git nunca lo guarde.

No necesitas cambiar ningún archivo JavaScript.

JunoAñade tu clave y modelo a .envvite.config.js carga cada valor en .env, luego define process.env.OPENROUTER_KEY y process.env.MODEL_ID para el código del navegador en main.js y utils.js. Por eso estos nombres no necesitan prefijo VITE_: el archivo de configuración los transmite por su cuenta.

JunoAñade tu clave y modelo a .env En el servidor de desarrollo, Vite define los valores en un objeto process.env en la página antes de que tus módulos se ejecuten, así que las lecturas de process.env en el código fuente funcionan como están escritas. En una compilación, Vite reemplaza cada lectura con el valor en sí. De cualquier forma, la clave es texto plano en lo que el navegador carga.

Inicia la app y envía un mensaje

Inicia el servidor de desarrollo:

$ npm start

Vite imprime la dirección a abrir:

  VITE v7.2.2  ready in 157 ms

  ➜  Local:   http://localhost:5173/

Abre la dirección exacta Local. La página se abre en una conversación larga que ya está allí, con los contadores debajo mostrando 26294 total tokens y 26294 context tokens. La app resume una vez que el contexto supera 20,000 tokens, así que tu primer mensaje es suficiente.

Escribe cualquier mensaje y envíalo. La app muestra Summarizing conversation mientras OpenRouter escribe el resumen. Cuando funciona, aparece una tarjeta Context Summary debajo de los contadores (haz clic para leer el resumen), el conteo de tokens de contexto baja mucho por debajo del total, y aparece la respuesta a tu mensaje.

Si descargaste el desafío antes de terminar splitForSummary y generateSummary en summary.js, tu primer mensaje se queda atrapado aquí: la app llama a ambas tan pronto como resume, y la consola muestra por qué.

Si Summarizing conversation se queda en la pantalla y el botón de envío se queda gris, abre las herramientas de desarrollo de tu navegador (F12, o Cmd+Option+J en Chrome en una Mac) y lee la pestaña Console. La razón se imprime allí, no en la página; la solución de problemas debajo coincide con cada mensaje. Un 404 rojo para favicon.ico es inofensivo.

No necesitas reiniciar nada después de cambiar .env: cuando lo guardes, Vite se reinicia a sí mismo y la página abierta se recarga con los nuevos valores. Detén el proyecto con Ctrl+C.

JunoInicia la app y envía un mensaje Ejecuta npm start, abre la dirección Local, y envía cualquier mensaje. Espera por la tarjeta Context Summary y la respuesta.

Si se queda en Summarizing conversation, abre la Console en las herramientas de desarrollo de tu navegador y busca el error rojo que menciona OpenRouter o la clave API.

JunoInicia la app y envía un mensaje La página que se abre solo prueba que Vite funciona. El resumen necesita que la solicitud de tu navegador a OpenRouter tenga éxito, así que una página atrapada en Summarizing conversation es una pregunta de clave, crédito o modelo, no de instalación.

JunoInicia la app y envía un mensajegenerateSummary se ejecuta antes del try en handleUserMessage, así que una solicitud de resumen rechazada se convierte en un rechazo de promesa no capturado en la consola y la entrada nunca se habilita de nuevo. Guardar una corrección en .env recarga la página y la libera. Un error en la respuesta en sí, después de que un resumen funcione, aparece en el chat como Error: en su lugar.

Solución de problemas

La consola dice OPENROUTER_KEY env variable is not set, luego OpenRouter API key is missing: El navegador no tiene clave. Verifica que .env esté al lado de package.json y que los nombres sean exactamente OPENROUTER_KEY y MODEL_ID, luego guárdalo. La página se recarga por sí sola.

La consola muestra 401 con User not found. o Missing Authentication header: La clave llegó a OpenRouter, pero OpenRouter no la aceptó. Cópiala de nuevo de tu cuenta de OpenRouter y verifica que no haya sido eliminada. Missing Authentication header generalmente significa que .env aún contiene el texto de ejemplo en lugar de tu clave.

La consola muestra 402: La clave funciona, pero tu cuenta o el límite de crédito de la clave no tiene crédito. Añade crédito en OpenRouter, o aumenta el límite de la clave, luego recarga la página y envía de nuevo.

La consola dice que el modelo no es válido o no se encuentra: Verifica la línea MODEL_ID en .env contra la página del modelo en OpenRouter, letra por letra, incluida la parte antes de la barra.

JunoSolución de problemas Encuentra el error rojo en la Console que menciona la clave, un 401 o un 402, y haz coincidir con una línea en negrita arriba. Después de editar .env y guardarlo, espera a que la página se recargue, luego envía otro mensaje.

JunoSolución de problemas Mantén separados dos problemas: Vite colocando tus valores en la página, y OpenRouter aceptando la clave, el crédito y el modelo. Una clave faltante falla en tu navegador antes de cualquier solicitud; un código de estado significa que la solicitud llegó a OpenRouter.

JunoSolución de problemas El proveedor OpenRouter de AI SDK lanza API key is missing antes de enviar nada cuando apiKey es undefined. Una vez que una solicitud sale, el estado es de OpenRouter: 401 para la clave, 402 para crédito, y un error de modelo para el ID.