{"repo":"cameronking4/openai-realtime-api-nextjs","free":true,"listed":false,"github":"https://github.com/cameronking4/openai-realtime-api-nextjs","clone":"git clone https://github.com/cameronking4/openai-realtime-api-nextjs.git","description":"Leverage the OpenAI Realtime API (12-17-2024) with this Next.js 15 starter template featuring shadcn/ui components, tool-calling & localization. Use starter to build Voice AI apps with WebRTC.","language":"TypeScript","stars":447,"topics":["nextjs","openai","realtime-api","shadcn","shadcn-ui","voice-ai","webrtc","gpt4o-realtime-api","openai-realtime-api","deno"],"license":"MIT","category":"ui-components","readme_excerpt":"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 2. Environment Setup Create a .env file in the root directory: 3. Install Dependencies If using Node.js : If using Deno : 4. Run the Application Using Node.js: Using Deno: The application will be available at http://localhost:3000 . Usage 1. Open the app in your browser: http://localhost:3000 . 3. Select a v","default_branch":null,"files":null,"tree":[],"storefront":"/r/cameronking4","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/cameronking4/openai-realtime-api-nextjs/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}