Use a server boundary
Install openai in your backend project. In Next.js, keep client creation in a server-only module or Route Handler. Read OPENAI_API_KEY from a non-public environment variable. The browser calls your authenticated application endpoint, not the privileged OpenAI API directly.
Create and track work
Use client.beta.agents.sessions.create with an agent, environment, and input. Store the session ID in application storage against the authenticated user. A browser-provided session ID is not authorization; check ownership before retrieving or continuing work.
Choose streaming or asynchronous delivery
A server route can forward live progress for interactive tasks. For longer work, persist a task record and process verified webhooks, then let the frontend retrieve status. Select execution timeouts appropriate to your hosting platform and avoid tying durable work to one browser request.
Design the UI around real states
Show submitted, working, waiting for input, completed, and failed states based on actual events. Provide reconnect behavior and artifact links. Do not show a success state merely because an HTTP connection ended.
Read the official reference
Check the source for current API fields, account requirements, and service limits.
OpenAI: architecture