Error 400 when using GPT API (in JavaScript)

Question

I keep getting a 400 Error when I try to run my very basic chatbot using the GPT API: error

Attached is my code; am I doing something wrong with the API key?

const chatHistoryContent = document.querySelector("#chat-history-content");
const chatMessageInput = document.querySelector("#chat-message-input");
const chatMessageSubmit = document.querySelector("#chat-message-submit");



chatMessageSubmit.addEventListener("click", async function () {
    const message = chatMessageInput.value;
    chatMessageInput.value = "";

    // Add the user's message to the chat history
    const userMessageDiv = document.createElement("div");
    userMessageDiv.innerHTML = `You: ${message}`;
    chatHistoryContent.appendChild(userMessageDiv);

    // Use the OpenAI GPT-3 API to get a response from the chatbot
    const response = await getResponseFromAPI(message);

    // Add the chatbot's response to the chat history
    const chatbotMessageDiv = document.createElement("div");
    chatbotMessageDiv.innerHTML = `Max: ${response}`;
    chatHistoryContent.appendChild(chatbotMessageDiv);
});

async function getResponseFromAPI(message) {

    const apiKey = "sk-myapikey";
    const endpoint = `https://api.openai.com/v1/engines/davinci/jobs`;

    const response = await fetch(endpoint, {
        method: "POST",
        headers: {
            "Content-Type": `application/json`,
            "Authorization": `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
            model: "text-davinci-003",
            prompt: "test prompt", 
            temperature: 0.5,
            max_tokens: 512,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
        })
    });

    const data = await response.json();
    return data.choices[0].text;
}

Thanks

I have tried consulting many websites to see solutions to this but have had no luck.

Does this answer your question? [OpenAI API error: You need to provide your API key in an Authorization header](https://stackoverflow.com/questions/75210324/openai-api-error-you-need-to-provide-your-api-key-in-an-authorization-header) — Rubén, Feb 04 '23 at 06:25

score 0 · Accepted Answer · answered Feb 03 '23 at 12:14

400 (Bad Request) error code typically means that client request's data is incorrect. So yes, must be something with your auth headers/body of request. Quite often response contains a reason, please try to print the text of response (before trying to get json output), e.g.

console.log(response.text());

or just check Network Tab in Dev Console

score 0 · Answer 2 · answered Feb 09 '23 at 09:22

You are almost there, you just have the wrong endpoint. If you change that your code will work.

The correct endpoint: https://api.openai.com/v1/completions

I tested it with your code and it worked. Here is your code rewritten with the correct endpoint.

async function getResponseFromAPI(message) {

    const apiKey = "sk-myapikey";
    const endpoint = `https://api.openai.com/v1/completions`;

    const response = await fetch(endpoint, {
        method: "POST",
        headers: {
            "Content-Type": `application/json`,
            "Authorization": `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
            model: "text-davinci-003",
            prompt: "test prompt", 
            temperature: 0.5,
            max_tokens: 512,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
        })
    });

    const data = await response.json();
    return data.choices[0].text;
}

Source: https://platform.openai.com/docs/api-reference/completions/create

Error 400 when using GPT API (in JavaScript)

2 Answers2