`RealtimeSession.connect()` promise never resolves (`console.log("after connect")` is never executed )

I’m building a voice call feature in a Next.js (App Router / Client Component) app using the OpenAI Realtime API.

The issue is that RealtimeSession.connect() appears to hang indefinitely. Because of this, the code after await is never executed, and "after connect" is never printed.

---

Problem

In the following code, the log after await p is never shown:

"use client"; import { useState } from "react"; import { Mic, PhoneOff } from "lucide-react"; import { weatherAgent } from "@/agent"; import { RealtimeSession } from "@openai/agents-realtime"; interface VoiceCallButtonProps { sessionApiKey: string; } export function VoiceCallButton({ sessionApiKey }: VoiceCallButtonProps) { const [inCall, setInCall] = useState(false); const toggleCall = async () => { try { const session = new RealtimeSession(weatherAgent, { model: "gpt-4o-realtime-preview-2025-06-03", }); if (inCall) { session.close(); } else { console.log("session instance:", session); const res = await fetch("/api/session", { method: "POST" }); if (!res.ok) { const text = await res.text(); console.error("API error:", text); throw new Error("API failed"); } const data = await res.json(); console.log("before mic"); await navigator.mediaDevices.getUserMedia({ audio: true }); console.log("mic OK"); const p = session.connect({ apiKey: data.clientSecret, model: "gpt-4o-realtime-preview-2025-06-03", }); console.log("connect returned promise"); await p; console.log("after connect"); // never printed setInCall(true); } } catch (err) { console.error("toggleCall error:", err); } }; return ( <button onClick={toggleCall}> {inCall ? <PhoneOff /> : <Mic />} </button> ); }

---

Behavior details

"connect returned promise" is printed, so session.connect() is being called and a Promise is returned. However, the execution never continues past await p. "after connect" is never printed. setInCall(true) is also never executed. The catch block is not triggered, so no error is thrown or caught.

---

What this implies

The fact that "after connect" is never printed suggests that:

The Promise returned by session.connect() never resolves or rejects (it stays in a pending state indefinitely), or The connection process is stuck internally and never completes its initialization/ready event.

As a result, execution remains stuck at await p, and all subsequent code is never reached.

---

API route (/api/session)

export async function POST() { const apiKey = process.env.OPENAI_API_KEY; const res = await fetch("https://api.openai.com/v1/realtime/client_secrets", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ session: { type: "realtime", model: "gpt-4o-realtime-preview-2025-06-03", }, }), }); const text = await res.text(); if (!res.ok) { return new Response(text, { status: 500 }); } const data = JSON.parse(text); return Response.json({ clientSecret: data.value, }); }

---

Agent definition

import { tool, RealtimeAgent } from '@openai/agents/realtime'; import { z } from 'zod'; const getWeather = tool({ name: 'get_weather', description: 'Return the weather for a city.', parameters: z.object({ city: z.string() }), async execute({ city }) { return `The weather in ${city} is sunny.`; }, }); export const weatherAgent = new RealtimeAgent({ name: 'Weather assistant', instructions: 'Answer weather questions.', tools: [getWeather], });

---

Expected behavior

session.connect() should complete successfully and "after connect" should be printed.

---

Actual behavior

"connect returned promise" is printed Execution stops at await p "after connect" is never printed No error is thrown or caught