Learn React本地运行 Chef Claude
使用本页面在你的计算机上运行从 Learn React 中提取的 Chef Claude 食谱项目，并用你自己的服务商密钥生成食谱。项目运行前，需要修改密钥读取方式以适配 Vite、更换已弃用的 Anthropic 模型，以及进行一次特殊安装来接受项目声明的较旧 React 依赖。如果你对项目中的 React 部分还不熟悉，可以从 React 手册开始。
准备工作
安装一个受支持的 Node.js LTS 版本。推荐使用 Node 24，它包含 npm。
检查这两条命令都能正常执行：
$ node --version
v24.18.0
$ npm --version
11.18.0你还需要为使用的服务商申请 API 密钥。课程代码包含 Anthropic 路由和 Hugging Face 路由。由于服务商注册流程、模型可用性和价格会发生变化，请参考服务商当前的账户说明。无论选择哪个路由，都要使用临时密钥并设置较低的支出限额，因为这个项目会从浏览器代码中调用服务商。
node --version 和 npm --version 都能打印出版本号。 然后为你计划使用的服务商路由获取密钥。使用临时密钥并设置较低的支出限额，因为这个项目会从浏览器直接调用服务商。
打开项目文件夹
在包含 package.json 的已提取 Chef Claude 文件夹中打开终端：
$ cd path-to-your-downloaded-project运行任何命令之前，先打开 package.json。其中的 scripts 块显示项目期望的命令，dependencies 记录了这个快照版本所使用的确切 React 和服务商包版本。
package.json 的已提取文件夹中工作；本页面上的所有命令和文件都属于这个文件夹。 如果某个命令报告文件缺失，在做其他改动之前先检查终端当前所在的文件夹。
使环境变量在 Vite 中工作
Scrimba 的编辑器理解 process.env.ANTHROPIC_API_KEY 和 process.env.HF_ACCESS_TOKEN。本地的 Vite 应用不会在浏览器中提供那个 process.env 对象。
打开 ai.js，把 Anthropic 的值从：
apiKey: process.env.ANTHROPIC_API_KEY,改为：
apiKey: import.meta.env.VITE_ANTHROPIC_API_KEY,把 Hugging Face 的值从：
const hf = new HfInference(process.env.HF_ACCESS_TOKEN)改为：
const hf = new HfInference(import.meta.env.VITE_HF_ACCESS_TOKEN)VITE_ 前缀是必需的，因为 Vite 只会把有这个特殊前缀的环境变量暴露给浏览器代码。
替换已弃用的 Anthropic 模型
下载的 Anthropic 函数使用已弃用的模型 claude-3-haiku-20240307。在 getRecipeFromChefClaude 函数中，把：
model: "claude-3-haiku-20240307",改为 Anthropic 文档中的替代模型：
model: "claude-haiku-4-5-20251001",课程请求的其余部分可以保持不变。
把密钥添加到 .env
在 package.json 旁边创建 .env 文件。添加你使用的路由对应的值：
VITE_ANTHROPIC_API_KEY=your-anthropic-key-here
VITE_HF_ACCESS_TOKEN=your-hugging-face-token-here可以省略不使用的值。项目默认调用 getRecipeFromChefClaude，所以如果你保持该函数不变，就需要提供 Anthropic 的值和上面的模型更改。要使用 Hugging Face 路由（调用 Mistral 模型），请按照课程中的服务商切换课程操作，并确认其 Hugging Face 模型仍然可用。
在 package.json 旁边创建 .gitignore 文件并添加：
.env
node_modules/把 .env 排除在 Git 之外的重要性，与下面警告中描述的浏览器暴露同样重要，因为进入仓库历史的密钥即使在删除文件后也会一直存在。Git 手册在 忽略文件和良好习惯中详细介绍了这个习惯。
这些密钥在浏览器中是可见的
VITE_ 前缀有意把每个值放入前端打包文件中。仅在本地学习时使用临时的、受限制的凭证。永远不要部署或共享这个版本，也永远不要提交 .env。生产版本需要后端或 Serverless 函数来在服务器上保持服务商凭证。
ai.js 中，把两个密钥读取都改为 import.meta.env 的形式，并替换已弃用的 Anthropic 模型。然后把你使用的密钥放在 .env 中，并在 .gitignore 中列出那个文件。 密钥仍然会在浏览器中可见，所以只在你自己的计算机上保存这个版本。
安装并运行项目
提取的项目使用 React 19 的预发布版本，同时一个依赖的对等版本范围不接受那个预发布版本。因此正常的 npm install 会以 ERESOLVE 错误停止。用放松对等检查的方式安装这个课程快照：
$ npm install --legacy-peer-deps
$ npm startVite 会打印一个本地地址，类似于：
VITE ready
Local: http://localhost:5173/打开那个确切的 Local URL。如果 5173 端口被占用，Vite 会选择另一个端口并打印出来。添加足够的食材来请求食谱。成功渲染的食谱证明了两点：本地页面工作正常，且选定的服务商密钥和模型工作正常。用 Ctrl+C 停止项目。
修改 .env 后重新启动 Vite。
npm install --legacy-peer-deps，然后运行 npm start，并打开它打印的 Local URL。添加食材并请求食谱；页面上出现食谱说明一切都工作正常。按 Ctrl+C 停止。 这个标志听起来像是警告，但它是这个项目的正确安装方式。
故障排除
ERESOLVE unable to resolve dependency tree： 对这个提取的项目使用 npm install --legacy-peer-deps。不要删除或替换 React 包来解决安装问题。
process is not defined： ai.js 中仍然存在一个或两个 Scrimba 风格的 process.env 值。把它们替换为上面显示的 import.meta.env.VITE_... 形式，然后重新启动 Vite。
密钥是 undefined 或认证失败： 检查确切的 VITE_ 变量名，确保 .env 在 package.json 旁边，并重新启动项目。确认凭证在服务商账户中是活跃的。
Anthropic 说模型未找到或已弃用： 确认 ai.js 使用的是 claude-haiku-4-5-20251001，而不是 claude-3-haiku-20240307。如果 Anthropic 后来弃用了替代模型，使用其当前模型弃用文档中命名的继任模型。
Hugging Face 拒绝 Mistral 模型： 确认 ai.js 中的模型能通过连接到你账户的推理提供商使用。一个模型页面可能仍然允许下载，但在你选择的托管推理提供商中可能不可用。
如果你想发布这个项目： 不要发布这个仅限前端的版本。先把 AI 请求和凭证移到后端。
ERESOLVE 时使用安装标志，看到 process is not defined 时替换所有旧的密钥读取，编辑 .env 后重新启动项目。 大多数错误在消息本身中就说明了修复方法，所以在做改动前先读完整个消息。