OpenAI Realtime API Next.js: a Next.js template for building real-time voice conversation AI applications

General Introduction

OpenAI Realtime API Next.js is an open source project based on the Next.js framework , designed to help developers quickly build real-time voice AI applications . The project integrates OpenAI's real-time API and WebRTC technology , providing modern UI components and tools to call the function . By using this template, developers can easily create voice AI applications that support real-time audio conversations with multi-language localization. The project also includes strict TypeScript type safety and eslint rules to ensure code quality and maintainability.

Online demo: https://openai-rt-shadcn.vercel.app/

Function List

• Next.js Framework: Server-side rendering and API routing using Next.js.
• Modernized UI: Animation design with Tailwind CSS and Framer Motion, using shadcn/ui components.
• WebRTC support: Provide a hook that abstracts WebRTC processing to simplify the implementation of real-time audio conversations.
• Tool Call: Contains five sample functions that demonstrate the use of client-side tools in conjunction with the real-time API.
• Multi-language localization: Support for selecting the language (English, Spanish, French, Chinese) in which strings and voice agents are applied.
• type safety: Use TypeScript and follow strict eslint rules.

Using Help

Installation process

1. clone warehouse

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

2. Environmental settings In the root directory, create a.envfile and add your OpenAI API key:

   OPENAI_API_KEY=your-openai-api-key

3. Installation of dependencies If using Node.js:

   npm install

If Deno is used:

   deno install

4. Running the application If using Node.js:

   npm run dev

If Deno is used:

   deno task start

The application will run on thehttp://localhost:3000The

Instructions for use

1. Open the application Open in your browserhttp://localhost:3000The
2. Select Voice Select a voice and start an audio session.
3. Tool Call The project provides five sample functions that show how to call the tool on the client side:
   • getCurrentTime: Get the current time.
   • partyMode: Switch to party mode.
   • changeBackground: Change the background.
   • launchWebsite: Launch the site.
   • copyToClipboard: Copy to clipboard.
4. Multi-language support Multi-language localization of application strings and voice agents can be achieved by selecting different languages.

Deployment to Vercel

1. One-Click Deployment With the Vercel platform, the application can be deployed with a single click.
2. Configuring Environment Variables In Vercel's project settings, add your OpenAI API key.

authorization

The project is open source based on the MIT license, see the LICENSE file for details.

a thank-you note

Thanks to OpenAI for the API and models, the Next.js framework, Tailwind CSS for styling, and Simon Willison's blog for inspiration.