I am getting this API_KEY error

The error I am getting is: “{
“error”: {
“message”: “You didn’t provide an API key. You need to provide your API key in an Authorization header using Bearer auth (i.e. Authorization: Bearer YOUR_KEY), or as the password field (with blank username) if you’re accessing the API from your browser and are prompted for a username and password. You can obtain an API key from https://platform.openai.com/account/api-keys.”,
“type”: “invalid_request_error”,
“param”: null,
“code”: null
}
}”

My code is:

const chatInput = document.querySelector("#chat-input");
const sendButton = document.querySelector("#send-btn");
const chatContainer = document.querySelector(".chat-container");

let userText = null;
const API_KEY = "sk-proj-ddddddddddddddddddddddBlbkFJ2ogLhP4plGxAUxj2-lLf6pTW_XmiZo_Pyx3AUujUkWezQmLiwDo2BB3J4A";

createElement = (html, className) => {
    const chatDiv = document.createElement("div");
    chatDiv.classList.add("chat", className);
    chatDiv.innerHTML = html;
    return chatDiv;
}

const getChatResponse = async () => {
    const API_KEY = "sk-proj-dddddddddddddddddddddddddddddddddddddddddddBlbkFJ2ogLhP4plGxAUxj2-lLf6pTW_XmiZo_Pyx3AUujUkWezQmLiwDo2BB3J4A";
    const API_URL = "https://api.openai.com/v1/completions";

    const requestOptions = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${API_KEY}`
        },
        body: JSON.stringify({
            model: "text-davinci-003",
            prompt: userText,
            max_tokens: 2048,
            temperature: 0.2,
            n: 1,
            stop: null
        })
    }

    try {
        const response = await (await fetch(API_URL, requestOptions)).json();
        console.log(response);
    } catch(error) {
        console.log(error)
    }
}

const showTypingAnimation = () => {
        const html = `<div class="chat-content">
                <div class="chat-details">
                    <img src="images/chatbot.jpg" alt="chatbot-img">
                    <div class="typing-animation">
                        <div class="typing-dot" style="--delay: 0.2s"></div>
                        <div class="typing-dot" style="--delay: 0.3s"></div>
                        <div class="typing-dot" style="--delay: 0.4s"></div>
                    </div>
                </div>
                <span class="material-symbols-rounded">
                    content_copy
                    </span>
            </div>`;
                const outgoingChatDiv = createElement(html, "incoming");
                chatContainer.appendChild(outgoingChatDiv);
                getChatResponse();
}

const handleOutgoingChat = () => {
    userText = chatInput.value.trim();
    const html = ` <div class="chat-content">
                <div class="chat-details">
                    <img src="images/chatbot.jpg" alt="user-img">
                    <p>${userText}</p>
                </div>
            </div>`;
            const outgoingChatDiv = createElement(html, "outgoing");
            chatContainer.appendChild(outgoingChatDiv);
            setTimeout(showTypingAnimation, 500)
}

sendButton.addEventListener("click", handleOutgoingChat);

I’d try using the latest OpenAI Library for your language of choice.

Here’s the syntax for the cURL request:

curl https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
     "model": "gpt-3.5-turbo",
     "messages": [{"role": "user", "content": "Say this is a test!"}],
     "temperature": 0.7
   }'

Also, make sure that the apiKey is initialized and holds a value.

Additionally, this is a deprecated model … which makes me think you’re using old code.

sorry, I am pretty new to coding and I am using an tutoral to code this, would you mind integrating that into my code? Again, sorry.

This is the error from the console:

POST (https://)api.openai(com)/v1/completions 429 (Too Many Requests)
getChatResponse @ script.js:35
showTypingAnimation @ script.js:58
setTimeout
handleOutgoingChat @ script.js:71

(The other error was from the link - “(https://)api.openai.(com)/v1/completion”)

Ah, okay. You said it was another error in the original post.

429 - Rate limit reached for requests Cause: You are sending requests too quickly.
Solution: Pace your requests. Read the Rate limit guide.
429 - You exceeded your current quota, please check your plan and billing details Cause: You have run out of credits or hit your maximum monthly spend.
Solution: Buy more credits or learn how to increase your limits.

You’re either calling the API too frequently or you don’t have any credits in your account. No free credits are given anymore, and they do expire.

I’d check your billing…

my limit is still at $0.00, well the link says -

{
“error”: {
“message”: “You didn’t provide an API key. You need to provide your API key in an Authorization header using Bearer auth (i.e. Authorization: Bearer YOUR_KEY), or as the password field (with blank username) if you’re accessing the API from your browser and are prompted for a username and password. You can obtain an API key from https://platform.openai.com/account/api-keys.”,
“type”: “invalid_request_error”,
“param”: null,
“code”: null
}
}"

Add some credits… at least $5, and try again, please.

1 Like