Overview

OpenAI Realtime API Next.js is a starter template for building voice AI apps with OpenAI's Realtime API over WebRTC. It is built with Next.js 15 and shadcn/ui and includes an /api route plus UI components for real-time audio conversations. The WebRTC implementation is based on skrivov/openai-voice-webrtc-next, with an added hook that abstracts the connection handling.

The demo lets users pick a voice, start a session and try the available tools. The template supports OpenAI or Azure OpenAI keys, runs on Node.js or Deno, and can be deployed to Vercel in one click. It is MIT licensed.

Features

useWebRTC hook: Wraps OpenAI's WebRTC session handling in a single React hook.
Tool calling: Six example client-side tools: getCurrentTime, partyMode, changeBackground, launchWebsite, copyToClipboard and scrapeWebsite (requires a FireCrawl API key).
Localization: App strings and the voice agent can run in English, Spanish, French or Chinese.
Voice selection: Choose a voice before starting the audio session.
Animated UI: Tailwind CSS, Framer Motion and shadcn/ui components, with a theme toggle.
Type safety: TypeScript with optional strict ESLint rules.

Tech stack

Next.js 15, React, TypeScript
shadcn/ui, Tailwind CSS, Framer Motion
OpenAI Realtime API (WebRTC)
Node.js or Deno

Getting started

git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs
npm install
npm run dev