在本地运行 Embeddings 和向量数据库
通过这个页面在你的电脑上运行提取出来的课程聊天机器人。你需要安装两个缺失的包，为 Vite 调整聊天机器人的 OpenAI 和 Supabase 设置，然后启动浏览器项目并连接到你在课程中构建的数据库。
你首先需要准备什么
安装一个受支持的 LTS 版本的 Node.js。推荐使用 Node 24，它包含 npm。你还需要一个 OpenAI API 密钥和一个包含课程数据的现有 Supabase 项目。
对于 Supabase，使用可发布密钥或传统的 anon 密钥。这些密钥被设计为出现在浏览器代码中：复制其中任何一个的人只能执行你的行级安全策略（Supabase 的按行读取规则）允许的操作。永远不要在这个浏览器项目中放入秘密密钥或 service_role 密钥。查看 Supabase API 密钥了解当前的密钥类型。
OpenAI 密钥没有对应的范围限制：任何复制它的人都可以发出会记入你账户的请求，因此在生产环境中它绝不应该出现在客户端代码中。这个学习设置还是会将它发送到浏览器；Vite 部分的警告解释了这样做的限制。这个设置的服务端对应物，Vercel AI SDK 项目，使用相同的 Supabase 项目但使用秘密密钥。秘密密钥在那里是可以接受的，因为那个项目运行在服务器上，所以它的密钥永远不会到达浏览器。
anon 密钥，这是为浏览器设计的那种，永远不要使用服务端秘密。我曾经用错了密钥类型，花了一个晚上才搞清楚它们的区别！ 打开项目文件夹
在包含 package.json 的提取出来的聊天机器人文件夹中打开终端：
$ cd path-to-your-downloaded-project为了确认你有正确的下载，打开 package.json：聊天机器人导出声明了 Vite，旁边的源代码包含接下来部分编辑的 config.js 和 index.js 文件。这些说明适用于完成的聊天机器人，其代码同时导入 openai 和 @supabase/supabase-js；仅凭文件夹名称无法将其与早期课程的导出区分开。
package.json 的提取文件夹中工作；这个页面上的每个安装和每个文件都属于那里。如果终端在其他地方，命令会在错误的文件夹中运行，之后的一切都不会工作。我在输入任何内容之前都会检查文件夹清单中是否有 package.json，这是在犯过几次那个错误之后养成的习惯。 为 Vite 准备项目
安装声明的 Vite 依赖，然后安装源代码导入但下载的 package.json 没有声明的两个包：
$ npm install
$ npm install openai @supabase/supabase-js打开 config.js 并替换每个 Scrimba 环境读取。保持现有的导入、导出和验证，但替换四个位置中的三个环境名称；OPENAI_API_KEY 出现两次：
process.env.OPENAI_API_KEY
import.meta.env.VITE_OPENAI_API_KEY
process.env.SUPABASE_API_KEY
import.meta.env.VITE_SUPABASE_API_KEY
process.env.SUPABASE_URL
import.meta.env.VITE_SUPABASE_URL两个 OPENAI_API_KEY 读取分别位于验证检查和 OpenAI 客户端中，所以修改两者。
打开 index.js 并将聊天模型从 gpt-4 改为 gpt-4o-mini。在跟随课程时，保持提供的 text-embedding-ada-002 嵌入模型不变。课程数据库中的现有向量必须与查询嵌入具有相同的维度；更改该模型是单独的数据库迁移，不属于本地设置的一部分。
在 package.json 旁边创建 .env：
VITE_OPENAI_API_KEY=your-openai-api-key
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_API_KEY=your-publishable-or-anon-key同时创建 .gitignore：
.env
node_modules/将 .env 提交到 Git 仓库是密钥泄露最常见的方式；忽略文件和良好习惯全面介绍了这个习惯。
这些凭证在浏览器中是可见的
Vite 将 VITE_ 值复制到前端包中。使用受限的学习凭证，在 Supabase 中启用行级安全，永远不要发布这个版本。生产应用必须将 OpenAI 请求移到后端。
.env 中使用浏览器安全的 Supabase 密钥放入你的密钥。然后将 .env 排除在 Git 之外。我曾经在第一个项目中发布了一个密钥，花了一个晚上才替换它，所以这个顺序是根据经验写的。 运行项目
$ npm start打开 Vite 打印的 Local URL 并询问聊天机器人一个课程数据涵盖的问题。有用的答案表明页面、Supabase 检索和 OpenAI 请求都在正常工作。更改 .env 后重启命令，按 Ctrl+C 停止。
npm start，打开 Local URL，并询问聊天机器人课程数据覆盖的内容。如果你更改 .env，重启命令以便 Vite 读取新值，完成时按 Ctrl+C。我曾经忘记重启一次，这让我困惑了整个下午，所以希望这个提示能为你节省一个。 故障排除
Failed to resolve import "openai" 或 "@supabase/supabase-js"： 运行这个页面前面显示的两个安装命令，并在包含 package.json 的文件夹中运行它们。
process is not defined： 在 config.js 中仍然存在 process.env 引用。将其替换为匹配的 import.meta.env.VITE_... 值。
Supabase 返回无行或权限错误： 确认项目 URL，使用可发布密钥或 anon 密钥，并检查课程表和行级安全策略是否存在于同一项目中。
OpenAI 拒绝模型或密钥： 在 OpenAI 账户中确认计费和密钥访问。使用可用于该项目的当前模型。