Open AI error its returning 429 and unsafe header

Question

So this is the code not sure why isn't the open AI not working. Please do let me know thanks below is the code.

import PropTypes from 'prop-types'
import React , {useState}   from 'react'
const { Configuration, OpenAIApi } = require("openai");



function TextForm(props){
    const key = //key 
    const configuration = new Configuration({
        apiKey: key,
      });
    const openai = new OpenAIApi(configuration);
    
    
    const [text,setText] = useState("Enter text here");
    const [wordCount,setWordCount] = useState(text.length);
    const [responseText,setResponseText] = useState("");

    const header = {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer //key',//also not sure what Bearer is
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36',
    }

    const previewCase = async (event) => {
        event.preventDefault();
        const response = await openai.createCompletion({
            model: "text-davinci-003",
            prompt: "Say this is a test",
            temperature: 0,
            max_tokens: 7,
            headers: header,
          }).then((response) => {console.log(response.data);}).catch((error) => {console.log(error);});
        setResponseText(response.data);
    }

    const convertToUpperCase = (event) => {
        event.preventDefault()
        console.log("Converting to upper case...");
        setText(text.toUpperCase());
        

    };

    const convertToLowerCase = (event) => {
        event.preventDefault()
        console.log("Converting to lower case...");
        setText(text.toLowerCase());

    };

    const handleManageCount = (event) => {
        setText(event.target.value)
        const Array = text.split(" ");
        setWordCount(Array.length);
        if (text.length === 0){
            setWordCount(0);
        }
    }
    return (
        <>
            <form>
                <div className="row d-flex justify-content-center">
                    <div className="form-group col-lg-8 mt-3" >
                        <label htmlFor="exampleFormControlTextarea1 row"><h3>{props.title}</h3></label>
                        <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="20" value={text} onChange={handleManageCount}></textarea>
                        <h6 className='mt-3'><span>Word:</span>{wordCount}</h6>
                        <div className=''>
                            <button className='btn btn-secondary mt-3 mx-2' onClick={convertToUpperCase} >Convert to Upper case</button>
                            <button className='btn btn-secondary mt-3 mx-2'  onClick={convertToLowerCase}>Convert to Lower case</button>
                            <button className='btn btn-secondary mt-3 mx-2'  onClick={previewCase}>Preview Sumarry</button>
                        </div>
                        
                    </div>
                    
                </div>
                
            </form>

            <div className="container">
                <p><h1>
                    Preview Summary
                </h1>
                    {responseText}
                </p>
            </div>
            
           
            
        </>
    )
    TextForm.propTypes = {title:PropTypes.string.isRequired};
    TextForm.defaultProps = {title : "Write Here!"};
 }

export default TextForm; 

[enter image description here](https://i.stack.imgur.com/PvMb1.png)

So I am trying to provide it with a prompt that user will type on the text form and upon clicking the preview button he will recieve the sumarry backk

Answer 1

You are using the openai npm package. In this case you don't need to send headers with the request. You will notice in your headers you are trying to set the API key.

Except you already set the API key with the configuration variable.

I have rewritten the start of your code and it works for me.

function TextForm(props){
const key = //key 
const configuration = new Configuration({
    apiKey: key,
  });
const openai = new OpenAIApi(configuration);


const [text,setText] = useState("Enter text here");
const [wordCount,setWordCount] = useState(text.length);
const [responseText,setResponseText] = useState("");

const previewCase = async (event) => {
    event.preventDefault();
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: "Say this is a test",
        temperature: 0,
        max_tokens: 7
      }).then((response) => {console.log(response.data.choices[0].text);}).catch((error) => {console.log(error);});
    setResponseText(response.data.choices[0].text);
}

You would only use headers if you were working directly with the API endpoints but because you are using the NPM package it is setting the headers for you directly.

By removing the headers from your code you shouldn't get the unsafe headers alert.

Notice I also fixed up the console log of your response. In order to get the actual response text you have to go several layers into the response object:

response.data.choices[0].text