Ejecutar Context Engineering localmente

Usa esta página para ejecutar el desafío de resumen extraído en tu computadora. Instalas sus paquetes bloqueados, adaptas dos lecturas de entorno solo para Scrimba en Vite, y conectas el proyecto del navegador a OpenRouter. La guía general sobre ejecutar proyectos del curso localmente cubre la configuración compartida de Node y npm con más detalle.

Qué necesitas primero

Instala una versión LTS compatible de Node.js. Se recomienda Node 24 e incluye npm.

Verifica que ambos comandos funcionen:

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

Si algún comando dice "command not found", termina de instalar Node antes de continuar.

También necesitas una clave de API de OpenRouter y un ID de modelo disponible para tu cuenta. Usa una clave temporal con un límite de gasto bajo porque este proyecto de aprendizaje ejecuta solicitudes del proveedor en el navegador.

JunoQué necesitas primero Instala Node.js LTS y verifica que tanto node --version como npm --version impriman números antes de continuar. Luego prepara una clave temporal de OpenRouter con un límite de gasto bajo. Una vez pasé una tarde depurando un proyecto cuando el problema real era que Node nunca terminó de instalarse, así que esos dos chequeos valen los diez segundos.

JunoQué necesitas primero Toda solicitud del proveedor sale del navegador con tu clave de OpenRouter adjunta, así que haz que esa clave sea temporal y ponle un límite de gasto bajo. Mientras estés en el panel de OpenRouter, confirma que el ID del modelo está disponible para tu cuenta antes de comenzar; eso te ahorra una confusión más tarde.

JunoQué necesitas primero La llamada del proveedor se ejecuta en código del cliente, lo que significa el navegador, y cualquiera con las devtools abiertas recibe tu clave de OpenRouter. Usa una clave de aprendizaje restringida con un límite bajo, y mueve las llamadas del proveedor a un backend antes de desplegar cualquier versión de esto. He revocado suficientes claves expuestas a lo largo de los años para tratarlo como una regla en lugar de una sugerencia.

Abre e instala el proyecto

Abre una terminal en la carpeta extraída que contiene package.json, luego instala los paquetes bloqueados:

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

Mantén el archivo de bloqueo incluido. Si npm reporta hallazgos de auditoría, no ejecutes npm audit fix --force sin verificar qué cambia; ese comando puede mover las dependencias del curso entre versiones mayores.

JunoAbre e instala el proyecto Ejecuta npm ci en la carpeta extraída, la que tiene package.json en ella. No cambies el archivo de bloqueo: enumera las versiones exactas de paquetes contra las 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 motivo para forzar actualizaciones de dependencias mayores en un proyecto del curso; reemplazarías una advertencia con un proyecto genuinamente roto.

JunoAbre e instala el proyecto Mantén el archivo de bloqueo descargado mientras cambias las lecturas de entorno. Cambia una variable a la vez: si actualizas las dependencias en el mismo paso, no puedes saber si la edición de Vite funcionó o si una actualización rompió algo más. Digo eso como alguien que ha hecho ambas cosas a la vez.

Repara las variables de entorno

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

Crea .env junto a package.json:

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

Vite lee .env al iniciar; reinicia el servidor de desarrollo después de editarlo.

Usa un modelo que esté disponible actualmente en tu cuenta de OpenRouter y que admita las llamadas realizadas en el curso. Los catálogos del proveedor pueden cambiar.

Crea .gitignore:

.env
node_modules/
dist/

El manual de Git cubre este hábito en ignorar archivos y buenas prácticas.

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 desplegada debe llamar al proveedor desde un backend.

JunoRepara las variables de entorno Reemplaza ambas lecturas process.env con los nombres VITE_ coincidentes, crea .env, y reinicia el servidor de desarrollo después de editar el archivo. Y usa una clave temporal de OpenRouter aquí: este proyecto del navegador muestra la clave a cualquiera que mire, lo que también me sorprendió la primera vez.

JunoRepara las variables de entorno El desarrollo local necesita lecturas directas import.meta.env.VITE_... en ambos archivos fuente. El prefijo VITE_ es lo que permite que un valor llegue al código del cliente, por eso la credencial termina expuesta en lugar de protegida: disponible para tu código significa disponible para el navegador.

JunoRepara las variables de entorno Vite sustituye los valores import.meta.env.VITE_... estáticamente en tiempo de compilación y transformación, y solo los nombres con prefijo VITE_ llegan al código del cliente. Eso hace que la corrección sea verificable: abre el código fuente que tu navegador realmente carga, o el encabezado Authorization en la pestaña Network, y lee la clave en texto plano. Esa clave legible también es el argumento para mover esta llamada a un servidor.

Ejecuta y verifica el proyecto

$ npm start

Abre la URL Local impresa por Vite y continúa la conversación hasta que el proyecto resuma sus mensajes anteriores. Un nuevo resumen en la aplicación en ejecución es el resultado visible del éxito. Vite generalmente se reinicia cuando .env cambia; si el nuevo valor no se aplica, detén el servidor con Ctrl+C e inicia de nuevo.

JunoEjecuta y verifica el proyecto Ejecuta npm start, abre la URL Local que Vite imprime, y conversa hasta que la aplicación resuma sus mensajes anteriores. Ese resumen que aparece 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 abrir antes de que cualquier solicitud del proveedor tenga éxito, así que una página abierta no prueba nada sobre OpenRouter aún. Ejecuta el flujo de resumen como la verificación real, y si un valor de entorno cambiado no aparece, reinicia Vite tú mismo.

JunoEjecuta y verifica el proyecto Vite iniciando correctamente solo prueba que el código fuente 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. Dos superficies de fallo diferentes; 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.

El modelo devuelve 404 o un error de acceso: Lee el cuerpo del error de OpenRouter: un 401 apunta a la clave, un 404 al ID del modelo, y un 429 a un límite de velocidad. Copia un ID de modelo actual de OpenRouter y confirma que la cuenta puede usarlo.

La conversación funciona hasta que se vuelve larga: Ese es el comportamiento que este curso explora. Confirma que tus ediciones no cambiaron los umbrales de tokens, los avisos de resumen, o los datos de conversación de ejemplo que el curso proporciona antes de diagnosticar el proveedor.

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

JunoSolución de problemas Busca en ambos archivos JavaScript lecturas process.env rezagadas, luego verifica las dos ortografías VITE_ en .env. La mayoría de errores aquí son un carácter rezagado, lo que sé por encontrar el mío en la cuarta lectura. Y una conversación larga desencadenando un resumen es el curso funcionando, no rompiéndose.

JunoSolución de problemas Distingue una sustitución de Vite faltante de un error del proveedor o del modelo. 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 cuerpo del error de OpenRouter antes de cambiar nada: un 401 es tu clave, un 404 es el ID del modelo, un 429 es límite de velocidad, y cada uno tiene una corrección diferente. Solo después de que esos tengan éxito debes mirar el umbral de resumen y avisos de la aplicación, y ni siquiera entonces cambies los datos de conversación de ejemplo que el curso proporciona.