OpenAI WebRTC Shadcn Next15 Starter

This is a WebRTC-based Voice AI stream application using OpenAI's Realtime API and WebRTC. Project contains /api route and UI components developed with Next.js and shadcn/ui. It supports real-time audio conversations implented in skrivov/openai-voice-webrtc-next with the addition of a hook to abstract the WebRTC handling.

https://github.com/user-attachments/assets/ea9324af-5c18-48d2-b980-2b81baeea4c0

Features

• Next.js Framework: Built with Next.js for server-side rendering and API routes.
• Modern UI: Animated using Tailwind CSS & Framer Motion & shadcn/ui.
• Use-WebRTC Hook: A hook to abstract the OpenAI WebRTC handling.
• Tool Calling: 6 example functions to demonstrate client side tools along with Realtime API: getCurrentTime, partyMode, changeBackground, launchWebsite, copyToClipboard, scrapeWebsite (requires FireCrawl API key)
• Localization: Select language for app strings and the voice agent (English, Spanish, French, Chinese)
• Type Safety: TypeScript with strict eslint rules (optional)

Requirements

• Deno runtime or Node.js
• OpenAI API Key or Azure OpenAI API Key in .env file

Installation

1. Clone the Repository

git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git
cd openai-realtime-api-nextjs

2. Environment Setup

Create a .env file in the root directory:

OPENAI_API_KEY=your-openai-api-key

3. Install Dependencies

If using Node.js:

npm install

If using Deno:

deno install

4. Run the Application

Using Node.js:

npm run dev

Using Deno:

deno task start

The application will be available at http://localhost:3000.

Usage

1. Open the app in your browser: http://localhost:3000.
2. Select a voice and start the audio session.

Deploy to Vercel

Deploy in one-click

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• OpenAI for their API and models.
• Next.js for the framework.
• Tailwind CSS for styling.
• Simon Willison’s Weblog for inspiration
• Originator: skrivov for the WebRTC and Nextjs implementation