OpenAI API key not working in my React App

Question

I am trying to create a chatbot in my react app, and I'm not able to generate an LLM powered response. I've been studying documentation and checking out tutorials but am unable to fix.

I tried setting up a function for my chatbot, calling the api key, importing openai, setting up the parameters for the gpt-3.5-turbo model including temperature. The catch (error) section has a setResponse of 'Error generating response' and that's all I get after user inputs a question.

try {
    const response = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: question,
        max_tokens: 100,
        n: 1,
        stop: '\n',
        temperature: 1.17,
        headers: {
            Authorization: `Bearer ${API_KEY}`,
        }
});

Answer 1

First of all, as @KenWhite suggested, fix the fundamentals. Use the try...catch statement properly as follows:

try {
  // Your code here
} catch (error) {
  console.error(error);
}

Problem

Note: OpenAI NodeJS SDK v4 was released on August 16, 2023, and is a complete rewrite of the SDK. See the v3 to v4 migration guide.

There are a few problems with the code you posted in your question. The solutions to these problems I provide below differ depending on whether you use OpenAI NodeJS SDK v3 or v4.

To check your OpenAI NodeJS SDK version, run the following command:

npm info openai version

Problem 1: Passing an invalid parameter to the API endpoint

You're trying to pass headers as a parameter to the API endpoint, which is not a valid parameter. Remove it.

Solution

You need to set the Bearer token as follows...

• If you have the OpenAI NodeJS SDK v3:

import { Configuration, OpenAIApi } from 'openai';

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

const openai = new OpenAIApi(configuration);

• If you have the OpenAI NodeJS SDK v4:

import OpenAI from 'openai';

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

Problem 2: Using the wrong method name

You want to use the gpt-3.5-turbo model (i.e., Chat Completions API). Use the proper method name.

Solution

• If you have the OpenAI NodeJS SDK v3:

• openai.createCompletion <-- Wrong ✘
• openai.createChatCompletion <-- Correct (works with the Chat Completions API) ✔

• If you have the OpenAI NodeJS SDK v4:

• openai.completions.create <-- Wrong ✘
• openai.chat.completions.create <-- Correct (works with the Chat Completions API) ✔

Problem 3: Using the prompt parameter

You want to use the gpt-3.5-turbo model (i.e., Chat Completions API).

The Chat Completions API uses the messages parameter, while the Completions API uses the prompt parameter.

Solution

Use the messages parameter instead of the prompt parameter.

Final solution

• If you have the OpenAI NodeJS SDK v3, try this:

import { Configuration, OpenAIApi } from 'openai';

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

const openai = new OpenAIApi(configuration);

try {
  const chatCompletion = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'Hello world' }],
    max_tokens: 100,
    n: 1,
    stop: '\n',
    temperature: 1.17,
  });

  console.log(chatCompletion.data.choices[0].message);
} catch (error) {
  console.error(error);
}

• If you have the OpenAI NodeJS SDK v4, try this:

import OpenAI from 'openai';

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

try {
  const chatCompletion = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'Hello world' }],
    max_tokens: 100,
    n: 1,
    stop: '\n',
    temperature: 1.17,
  });

  console.log(chatCompletion.choices[0].message);
} catch (error) {
  console.error(error);
}