OpenAI Realtime Voice UI for React

export async function POST() {
  const response = await fetch('https://api.openai.com/v1/realtime/client_secrets', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      session: {
        type: 'realtime',
        model: 'gpt-realtime-2.1',
        instructions: 'You are a concise, friendly voice assistant.',
        audio: { output: { voice: 'marin' } },
      },
    }),
  })

  return Response.json(await response.json(), { status: response.status })
}

import { Orb } from 'orb-ui'
import { createOpenAIRealtimeAdapter } from 'orb-ui/adapters'

const adapter = createOpenAIRealtimeAdapter({
  getClientSecret: async () => {
    const response = await fetch('/api/openai-realtime-token', { method: 'POST' })
    const data = await response.json()

    if (!response.ok) throw new Error(data.error ?? 'Could not create a Realtime session')
    return data.value
  },
})

export function OpenAIRealtimeVoiceUI() {
  return <Orb adapter={adapter} theme="circle" aria-label="Start OpenAI voice assistant" />
}

const adapter = createOpenAIRealtimeAdapter({
  getClientSecret,
  outputVolumeCalibration: {
    release: 0.14,
  },
})