开发者问题收集

错误：OPENAI_API_KEY 环境变量缺失或为空 - 无法弄清楚为何无法识别

2024-01-11
3200
typescript next.js openai-api replit

我在 replit 上构建 next.js 并尝试实现 OpenAI 集成，但我无法让它识别我的 OpenAI 密钥。我已将其正确添加为机密（如果您不熟悉 replit，请替换 .env.local），但我仍然不断收到此错误。

根据我能找到的建议，我尝试了几种不同的方法来编写 openai.ts：

抱歉格式不好，这是我第一次来这里 :) 


import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env['OPENAI_API_KEY'], // This is the default and can be omitted
});

async function main() {
  const chatCompletion = await openai.chat.completions.create({
    messages: [{ role: 'user', content: 'Say this is a test' }],
    model: 'gpt-3.5-turbo',
  });
}

main();

`结果：

未处理的运行时错误 错误：OPENAI_API_KEY 环境变量缺失或为空；提供它，或者使用 apiKey 选项实例化 OpenAI 客户端，例如 new OpenAI({ apiKey: 'My API Key' })。

来源 utils/openai.ts (3:15) @ eval

1 | import OpenAI from 'openai'; 2 |

3 | const openai = new OpenAI({ | ^ 4 | apiKey: process.env['OPENAI_API_KEY'], // This is the default and can be omitted 5 | }); 6 |` 

import { OpenAIApi, Configuration } from "openai";

const openAI = new OpenAIApi(new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
}));

async function createChatCompletion(prompt) {
  const response = await openAI.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      {
        role: "user",
        content: prompt,
      },
    ],
  });
  return response;
}

export { openAI, createChatCompletion };

结果： ` 1 of 1 unhandled error 服务器错误 TypeError: openai__WEBPACK_IMPORTED_MODULE_0__.Configuration 不是构造函数

生成页面时发生此错误。任何控制台日志都将显示在终端窗口中。 来源 utils/openai.ts (3:29) @ eval

1 | import { OpenAIApi, Configuration } from "openai"; 2 |

3 | const openAI = new OpenAIApi(new Configuration({ | ^ 4 | apiKey: process.env.OPENAI_API_KEY, 5 | })); 6 |`

2个回答

我偶然发现了类似的问题，并且设法访问了 OpenAI API。

  1. 我不知道这是否有任何关系，但我已在 .env.local 中将别名更改为 NEXT_PUBLIC_OPENAI_KEY，因为我使用的是 vercel。
  2. 由于 Next.js 处于严格模式，因此您需要将以下内容添加到 OpenAI 构造函数 dangerlyAllowBrowser: true。

我的代码如下所示： 

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY
  , dangerouslyAllowBrowser: true
});

async function openaiReq() {
  const completion = await openai.chat.completions.create({
    messages: [{ role: "system", content: "You are a helpful assistant." }],
    model: "gpt-3.5-turbo",
  });

  console.log(completion.choices[0]);
}

export default openaiReq();

我假设获取 429 代码“超出使用限制”表示我已设法访问 API。

429 代码图像

希望这有帮助 :)

Dor Shani
2024-03-24

Anton Kesy 的上述回答是不可接受且有害的。这会将您的秘密 API 密钥暴露给客户端（因此 DANGEROUSLYAllowBrowser）。

预期的解决方案是使用 noStore 来告诉 nextjs 不要预先构建函数并在运行时获取变量： https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#runtime-environment-variables

以下是有关该主题的更多帖子：

Vlad Samoilov
2024-06-17