Learn Context Engineering在本地运行 Context Engineering
用这个页面来运行你从 Context Engineering 模块中提取的总结挑战，用你自己的 OpenRouter 密钥观看它总结一段长对话。代码下载即用：你只需要安装依赖包，添加一个包含密钥和模型的 .env 文件，然后启动它。
准备工作
安装受支持的 Node.js LTS 版本。推荐使用 Node 24，它包含 npm。这个项目使用 Vite 7，需要 Node 22.12 或更新版本。
检查这两个命令都能工作。你的版本号可能不同：
$ node --version
v24.18.0
$ npm --version
11.18.0如果 node --version 显示的版本低于 v22.12.0，请在继续之前安装 Node 24。
你还需要一个 OpenRouter API 密钥，并在 OpenRouter 账户中有一点信用额度，因为这个应用会为每条总结和回复请求 OpenRouter。创建一个完成后将删除的密钥，并在创建时给它设置较低的信用额度限制：这个项目直接从浏览器调用 OpenRouter，所以密钥会出现在页面中。
node --version 是否打印 v22.12.0 或更高版本。 然后在 OpenRouter 账户中添加一点信用额度（一美元可以进行很多次总结），并创建一个信用额度限制较低的密钥。这个项目只需要这一个密钥。
安装依赖包
在提取的文件夹中打开终端。这个文件夹包含 package.json 和 main.js：
$ cd path-to-your-extracted-project
$ npm cinpm ci 安装 package-lock.json 中列出的精确版本。npm 完成后会报告它添加了多少个包：
added 29 packages, and audited 30 packages in 6snpm 也可能报告漏洞并建议 npm audit fix。暂时忽略它们：修复可能会改变这个课程所基于的包版本。npm 也可能警告关于安装脚本的问题；这里不会造成任何影响。
package.json 的文件夹中打开终端，然后运行 npm ci。npm 最后会说它添加了多少个包，并会出现一个 node_modules 文件夹。 如果 npm 说找不到 package.json，说明你在错误的文件夹中。
将密钥和模型添加到 .env
这个项目读取两个值：OPENROUTER_KEY 和 MODEL_ID。Scrimba 的编辑器为你填写它们；在你的电脑上它们要放在一个文件中。在 package.json 旁边创建 .env：
OPENROUTER_KEY=your-openrouter-key-here
MODEL_ID=mistralai/ministral-3b-2512两个名字都要完全按照所示保留，前面不加 VITE_：项目的 vite.config.js 读取这两个名字并将它们传递给浏览器代码。mistralai/ministral-3b-2512 是 OpenRouter 上的低成本模型。任何 OpenRouter 模型 ID 都可以；要完全复制。
在 package.json 旁边创建 .gitignore 并添加：
.env
node_modules/一个到达 Git 仓库的密钥即使在你删除文件后也会留在其历史记录中。Git 手册在忽略文件和良好习惯中介绍了这个习惯。
这个密钥在浏览器中是可见的
vite.config.js 将两个值都写入它发送到浏览器的代码中，所以任何打开这个页面的人都能读到你的密钥。请将这个版本保存在自己的电脑上：千万不要部署或分享它，也不要提交 .env。你发布的版本需要一个后端或无服务器函数来在服务器上保存密钥。
.env 的文件放在 package.json 旁边，两行内容：你的密钥放在 OPENROUTER_KEY= 后面，模型放在 MODEL_ID= 后面。然后在 .gitignore 中列出 .env，这样 Git 就永远不会保存它。 你不需要改动任何 JavaScript 文件。
启动应用并发送消息
启动开发服务器：
$ npm startVite 会打印要打开的地址：
VITE v7.2.2 ready in 157 ms
➜ Local: http://localhost:5173/打开确切的 Local 地址。页面会打开一段已经存在的长对话，下面的计数器显示 26294 total tokens 和 26294 context tokens。应用在上下文超过 20,000 个 token 时进行总结，所以你的第一条消息就足够了。
输入任何消息并发送。当 OpenRouter 写总结时，应用会显示正在总结对话。工作正常时，计数器下方会出现一张上下文总结卡片（点击它可以阅读总结），上下文 token 计数会大幅下降到低于总数，你的消息回复就会出现。
如果你在完成 summary.js 中的 splitForSummary 和 generateSummary 之前下载了挑战，你的第一条消息会卡在这里：应用一旦总结就会调用这两个函数，控制台会显示原因。
如果正在总结对话一直显示在屏幕上，发送按钮保持灰色，打开你浏览器的开发工具（F12，或在 Mac 的 Chrome 中按 Cmd+Option+J），查看控制台标签页。原因会打印在那里，而不是页面上；下面的故障排除会匹配每条信息。favicon.ico 的红色 404 是无害的。
改动 .env 后不需要重新启动任何东西：当你保存它时，Vite 会自己重新启动，打开的页面会用新值重新加载。用 Ctrl+C 停止项目。
npm start，打开 Local 地址，并发送任何消息。等待上下文总结卡片和回复出现。 如果一直停在"正在总结对话"，打开浏览器开发工具中的控制台，查找提到 OpenRouter 或 API 密钥的红色错误。
故障排除
控制台显示 OPENROUTER_KEY env variable is not set，然后是 OpenRouter API key is missing： 浏览器没有密钥。检查 .env 是否在 package.json 旁边，名字是否完全是 OPENROUTER_KEY 和 MODEL_ID，然后保存。页面会自动重新加载。
控制台显示 401 和 User not found. 或 Missing Authentication header： 密钥到达了 OpenRouter，但 OpenRouter 没有接受它。从你的 OpenRouter 账户再次复制它，并检查它是否未被删除。Missing Authentication header 通常意味着 .env 仍然保存着示例文本而不是你的密钥。
控制台显示 402： 密钥有效，但你的账户或密钥的信用额度限制没有信用了。在 OpenRouter 中添加信用，或提高密钥的限制，然后重新加载页面并重新发送。
控制台说模型无效或找不到： 检查 .env 中的 MODEL_ID 行是否与 OpenRouter 上模型页面中的完全一致，包括斜杠前的部分。
401 或 402 的红色错误，并将其与上面的粗体行匹配。编辑 .env 并保存后，等待页面重新加载，然后再发送一条消息。