Running Context Engineering locally

Use this page to run the summarization challenge you extracted from the Context Engineering module. The project installs as downloaded, but two files read their OpenRouter settings in a way that only works on Scrimba, so you change those reads for Vite and add your own key before the app can answer.

What you need first

Install Node.js 24, the recommended LTS version, which includes npm. Node 22.12 or newer also works. The project runs on Vite 7, which does not support older Node versions.

Check that both commands print a version number:

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

If either command says "command not found", finish installing Node before you continue. If node --version prints anything below v22.12.0, install Node 24 first, because the project's Vite version does not support it.

You also need an OpenRouter API key and a model ID that your account can use. Create a temporary key with a low spending limit: this learning project sends its provider requests from the browser, so the key travels with every request.

JunoWhat you need first Install Node.js 24 and check that node --version and npm --version both print numbers. Anything from v22.12.0 up works.

Then create a temporary OpenRouter key with a low spending limit, and note a model ID your account can use.

JunoWhat you need first Vite 7 sets the Node floor at 20.19 or 22.12, and Node 20 has reached end of life, so 22.12 is the practical minimum.

Every provider request leaves the browser with your OpenRouter key attached, so keep that key temporary and limited. While you are in the OpenRouter dashboard, confirm the model ID is available to your account; that saves you a confusing 404 later.

JunoWhat you need first The provider call runs in client code, so the browser, and anyone with devtools open, receives your OpenRouter key.

Use a restricted learning key with a low limit here, and move provider calls to a backend before any version of this project is deployed.

Open and install the project

Open a terminal in the extracted folder, the one that contains package.json, then install the packages exactly as the lockfile records them:

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

When it finishes, a node_modules folder appears beside package.json. Keep the included package-lock.json as it is. If npm reports audit findings, do not run npm audit fix --force without checking what it changes; that command can move course dependencies across major versions.

JunoOpen and install the project Run npm ci in the extracted folder, the one with package.json in it. A node_modules folder should appear.

Leave the lockfile alone: it lists the exact package versions the course was recorded against.

JunoOpen and install the project Use npm ci because the download ships a lockfile, and ci installs exactly what it records.

Audit warnings are not a reason to force major dependency updates into a course project; you would trade a warning for a broken project.

JunoOpen and install the project Keep the lockfile fixed while you change the environment reads. If you upgrade dependencies in the same step, you cannot tell whether the Vite edit worked or an upgrade broke something else.

Repair the environment variables

On Scrimba, the project reads its key and model through process.env. In a browser project running under Vite's development server, process does not exist, so those reads have to change.

Search main.js and utils.js for these values:

process.env.OPENROUTER_KEY
process.env.MODEL_ID

Replace every occurrence with:

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

If you miss one, the app later fails in the browser with process is not defined, so search both files until neither contains process.env.

Create .env beside package.json:

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

Use a model that is currently available to your OpenRouter account and supports the calls made in the course; provider catalogs change. Vite reads .env when it starts, so restart the development server after editing the file.

Create .gitignore beside it so the key never reaches Git:

.env
node_modules/
dist/

The Git handbook covers this habit in ignoring files and good habits.

The OpenRouter key is browser-visible

Every VITE_ value is included in client code. Use a temporary learning key, set a low spending limit, and do not publish this project. A deployed version must call the provider from a backend.

JunoRepair the environment variables In main.js and utils.js, replace both process.env reads with the matching import.meta.env.VITE_ names. Then create .env with your key and model ID, and add .gitignore.

Use a temporary OpenRouter key here: this browser project shows the key to anyone who looks.

JunoRepair the environment variables Vite exposes .env values to client code through import.meta.env, and only for names that start with VITE_. That is why both source files need the direct reads.

The same prefix is why the credential ends up exposed rather than protected: available to your code means available to the browser.

JunoRepair the environment variables The downloaded vite.config.js injects the old process.env values, which a production build applies but the development transform leaves in the browser modules. Reading import.meta.env.VITE_... directly works in both.

Vite substitutes those values into the code it serves, so you can confirm the fix by finding the key in plain text in the loaded source or in the request's Authorization header in the Network tab. That readable key is also the argument for moving this call to a server.

Run and check the project

Start the development server:

$ npm start

Open the Local URL that Vite prints, then continue the conversation until the project summarizes its earlier messages. A new summary in the running app is the visible sign that your key and model work. The page can open before any OpenRouter request succeeds, so an open page alone does not prove the setup.

Stop the server with Ctrl+C. After you change .env, start it again with npm start so Vite reads the new values.

JunoRun and check the project Run npm start, open the Local URL Vite prints, and chat until the app summarizes its earlier messages. That summary is your proof the OpenRouter setup works.

Ctrl+C stops the server when you are done.

JunoRun and check the project The page can open before any provider request succeeds, so run the summarization flow as the real check.

If a changed environment value does not show up, restart Vite: it reads .env at startup.

JunoRun and check the project Vite starting cleanly only proves the edited source compiles. A successful summary is the separate check that OpenRouter accepts your key and model and returns a response the project can use.

Those are two different failure surfaces, so test them as two.

Troubleshooting

process is not defined: At least one environment read remains in main.js or utils.js. Search both files, not only the Vite configuration.

The key remains undefined: Confirm the VITE_ spelling in .env and in the code, place .env beside package.json, and restart Vite.

The model returns 404 or an access error: Read the OpenRouter error in the browser's developer tools: a 401 points to the key, a 404 to the model ID, and a 429 to a rate limit. Copy a current model ID from OpenRouter and confirm that your account can use it.

The conversation works until it becomes long: That is the behavior this course explores. Before you look at the provider, confirm that your edits did not change the token thresholds, the summary prompts, or the sample conversation data the course ships.

JunoTroubleshooting Search both JavaScript files for leftover process.env reads, then check the two VITE_ spellings in .env and restart.

A long conversation triggering a summary is the course working, not breaking.

JunoTroubleshooting Separate a missing Vite substitution from a provider or model error: process is not defined or an undefined key is local, while a status code comes from OpenRouter.

If only long conversations fail, confirm the course's context thresholds and prompts before changing the local setup.

JunoTroubleshooting Read the OpenRouter error before changing anything: 401 is the key, 404 the model ID, 429 rate limiting, and each has a different fix.

Only after requests succeed should you inspect the app's summarization threshold and prompts, and even then leave the supplied conversation data unchanged.