本地运行 Chef Claude
使用本页在你的计算机上运行从 Learn React 中提取的 Chef Claude 食谱项目。你需要适配其 Vite 应用使用的提供商密钥、安装它声明的较早版本 React 依赖，并在本地生成食谱。如果你对项目中的 React 部分还不熟悉，React 手册会从头开始讲起。
你需要先准备的东西
安装受支持的 Node.js LTS 版本。推荐使用 Node 24，它包含 npm。
检查这两个命令都能正常运行：
$ node --version
v24.18.0
$ npm --version
11.18.0你还需要用于选定提供商的 API 密钥。课程代码包含 Anthropic 路由和 Hugging Face 路由。提供商的注册流程、模型可用性和价格可能会有变化，所以参考提供商当前的账户说明。无论选择哪个路由，都要使用临时密钥并设置较低的支出限制；这个项目从浏览器代码中调用提供商。
打开项目文件夹
在包含 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_ 前缀有意将每个值放入前端 bundle 中。仅在本地学习时使用临时的、受限制的凭证。不要部署或共享这个版本，不要提交 .env。生产版本需要一个后端或无服务器函数来在服务器上保持提供商凭证。
ai.js 中的密钥读取和已停用的 Anthropic 模型，将你使用的密钥添加到 .env，并将该文件排除在 Git 之外。密钥在浏览器中仍然是可见的。 安装并运行项目
提取的项目使用 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： 一个或两个 Scrimba 风格的 process.env 值仍然在 ai.js 中。将它们替换为上面显示的 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 后重启项目。大多数这些错误在消息本身中描述了修复。改变任何东西前读完整个消息，这花了我太长时间才学会！