4

I am trying to incorporate ChatGPT into my practice e-commerce site to use it as a chatbot. I have imported openAI and added a function which sends a message to ChatGPT and then console logs the response. Upon running the site using npm run dev I receive a response in the terminal but the browser gets a 401 error. As a 401 error is for lacking authentication credentials, how can I be receiving a response? When i try to render the response on the page using a useState it does not work. I can only get the response in the terminal it seems. When I use the credentials in other non-Next.js apps it does work. My api key is in a .env.local file in the root folder of my site. The 401 error in the browser states: Unhandled Runtime Error Error: Request failed with status code 401 Call Stack createError node_modules/axios/lib/core/createError.js (16:0) settle node_modules/axios/lib/core/settle.js (17:0) XMLHttpRequest.onloadend node_modules/axios/lib/adapters/xhr.js (66:0) - I find this confusing as I'm not using axios.

`import { Configuration, OpenAIApi } from "openai";

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

openai
.createChatCompletion({

model: "gpt-3.5-turbo", 
messages: [
{
  role: "user",
  content:
    "Hello ChatGPT, how are you?",
},
], 
})
.then((res) => {
console.log(res.data.choices[0].message.content); 
}); 


const Stylebot = () => {
return (
<>
  <p>Test ChatGPT</p>
</>
);
};

export default Stylebot;`
Stuart Wallace
  • 41
  • 3

1 Answers1

0

Sounds like something is wrong with your token. I would suggest you do something like this in order to figure out what's going on:

.then((res) => {
console.log(res.data.choices[0].message.content); 
}).catch(err => {
console.log({err})
});

I would also suggest you try printing out process.env.API_KEY - the most likely issue is that your application can't read it. If this is the case, use the dotenv package to add it to your environment.

Daniel Khlopotin
  • 66
  • 3
  • Hi, I've console log the process.env.API_KEY and in the terminal it appears but in the browser console it appears as undefined. Each time I get the response from ChatGPT in the terminal but nothing in the browser console. When I add the key directly then I can access the response in the browser, so it seems to be an issue in loading the environment variable rather than the token. But I don't know what it could be as i'm using the correct notation for next.js and it works with my other api's. – Stuart Wallace Mar 24 '23 at 17:05