Running Context Engineering locally

Use this page to run the extracted summarization challenge on your computer. You install its locked packages, adapt two Scrimba-only environment reads for Vite, and connect the browser project to OpenRouter. The general running course projects locally guide covers the shared Node and npm setup in more detail.

What you need first

Install a supported LTS version of Node.js. Node 24 is recommended and includes npm.

Check that both commands work:

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

If either command says "command not found," finish installing Node before you continue.

You also need an OpenRouter API key and a model ID available to your account. Use a temporary key with a low spending limit because this learning project runs provider requests in the browser.

JunoWhat you need first Install Node.js LTS and check that both node --version and npm --version print numbers before you go on. Then prepare a temporary OpenRouter key with a low spending limit. I once spent an afternoon debugging a project when the real problem was that Node never finished installing, so those two checks are worth the ten seconds!

JunoWhat you need first Every provider request leaves the browser with your OpenRouter key attached, so make that key temporary and give it a low spending limit. While you are in the OpenRouter dashboard, confirm the model ID is available to your account before you start; that saves you a confusing 404 later.

JunoWhat you need first The provider call runs in client code, which means the browser, and anyone with devtools open, receives your OpenRouter key. Use a restricted learning key with a low limit, and move provider calls to a backend before any version of this is deployed. I have revoked enough exposed keys over the years to treat that as a rule rather than a suggestion.

Open and install the project

Open a terminal in the extracted folder containing package.json, then install the locked packages:

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

Keep the included lockfile. 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. Do not change the lockfile: 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 replace a warning with a genuinely broken project.

JunoOpen and install the project Keep the downloaded lockfile while you change the environment reads. Change one variable at a time: if you upgrade dependencies in the same step, you cannot tell whether the Vite edit worked or an upgrade broke something else. I say that as someone who has done both at once.

Repair the environment variables

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

Create .env beside package.json:

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

Vite reads .env at startup; restart the dev server after editing it.

Use a model that is currently available to your OpenRouter account and supports the calls made in the course. Provider catalogs can change.

Create .gitignore:

.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 Replace both process.env reads with the matching VITE_ names, create .env, and restart the dev server after editing the file. And use a temporary OpenRouter key here: this browser project shows the key to anyone who looks, which surprised me the first time too.

JunoRepair the environment variables Local development needs direct import.meta.env.VITE_... reads in both source files. The VITE_ prefix is what lets a value reach client code, which is why the credential ends up exposed rather than protected: available to your code means available to the browser.

JunoRepair the environment variables Vite substitutes import.meta.env.VITE_... values statically at build and transform time, and only VITE_-prefixed names ever reach client code. That makes the fix verifiable: open the source your browser actually loads, or the request's Authorization header in the Network tab, and read the key in plain text. That readable key is also the argument for moving this call to a server.

Run and check the project

$ npm start

Open the Local URL printed by Vite and continue the conversation until the project summarizes its earlier messages. A new summary in the running app is the visible success result. Vite usually restarts itself when .env changes; if the new value does not take effect, stop the server with Ctrl+C and start it again.

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 appearing 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 an open page proves nothing about OpenRouter yet. Run the summarization flow as the real check, and if a changed environment value does not show up, restart Vite yourself.

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. Two different failure surfaces; 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 model returns 404 or an access error: Read the OpenRouter error body: 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 the account can use it.

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

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

JunoTroubleshooting Search both JavaScript files for leftover process.env reads, then check the two VITE_ spellings in .env. Most errors here are one stray character, which I know from finding mine on the fourth read. And a long conversation triggering a summary is the course working, not breaking.

JunoTroubleshooting Distinguish a missing Vite substitution from a provider or model error. If only long conversations fail, confirm the course's context thresholds and prompts before changing the local setup.

JunoTroubleshooting Read the OpenRouter error body before changing anything: a 401 is your key, a 404 is the model ID, a 429 is rate limiting, and each has a different fix. Only after those succeed should you look at the app's summarization threshold and prompts, and even then do not change the sample conversation data the course supplies.