chat.completions.create return null on browser

[aleluff]

Confirm this is a Node library issue and not an underlying OpenAI API issue

• This is an issue with the Node library

Describe the bug

While developing an web app on localhost
Works like a charm with 3.6 but after upgrading to v4 and adapating the code

chat.completions.create return always null with dangerouslyAllowBrowser: true

Works well in back with the same code

To Reproduce

1. Use demo code in browser
2. Add dangerouslyAllowBrowser to initiator option
3. Run and get error

Code snippets

No response

OS

macOS

Node version

Node v18.16

Library version

openai v4

[rattrayalex]

Can you provide sample code for reproduction?

[aleluff]

import { OpenAI } from "openai";

@Component({
	selector: 'app-ai',
	templateUrl: './ai.component.html',
	styleUrls: ['./ai.component.scss']
})
export class AiComponent {

	openai?: OpenAI;

	constructor(
	) {
		this.openai = new OpenAI({apiKey: "API_KEY", dangerouslyAllowBrowser: true});
	}

	async sendMessage(txt: string) {
		try {
			const response = await this.openai!.chat.completions.create({
				model: 'gpt-3.5-turbo',
				messages: [
					{role: "system", content: "Explain me the purpose of life"},
				],
			});
			console.log(response);
		} catch (error: any) {
			console.log(error);
		}
	}
}

[rattrayalex]

I can't reproduce; for me, response prints out a chat completion object.

Can you share more details, such as the build system you are using, the browser you are running in, the output of the program, whether other kinds of requests from the API work in the browser, whether the same request works for you with the same API Key in Node, etc?

[aleluff]

It works well with NodeJS, that's the thing ... Did you reproduce it in a local Angular app ? Also the HTTP request send the good data and retrieve the good data, the problem seems to appear from the library

[rattrayalex]

I was not using Angular, no. Can you provide a GitHub repo with minimal repro?

[aleluff]

Ok, so it seems that the library intercept the OPTIONS request instead of the real POST one

[aleluff]

Just run this locally : https://stackblitz.com/edit/angular-14-demo-ru71q1?file=package.json,src%2Fapp%2Fhome%2Fhome.component.ts

[rattrayalex]

Running that locally, it works just fine (my only change was adding an API key):

Can you include a screenshot of the Network tab in devtools, showing the request being made and the response? I suspect this may be a networking issue; perhaps check OpenAI's list of supported countries.

[aleluff]

Ok so, after some investigation,
I solved it use .then instead of await
I guess it comes from Angular 14 / Zone 0.12

[vahid1975]

Great! using .then in stead of await in Angular was the solution for me as well

[rattrayalex]

This does seem related to the way Zone.js handles promises; angular/angular#31730 may be related.

You might consider posting there (and may want to note that this library subclasses Promise).