Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cameronking4/openai-realtime-api-nextjs
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.
https://github.com/cameronking4/openai-realtime-api-nextjs
deno gpt4o-realtime-api nextjs openai openai-realtime-api realtime-api shadcn shadcn-ui voice-ai webrtc
Last synced: 3 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/cameronking4/openai-realtime-api-nextjs
- Owner: cameronking4
- License: mit
- Created: 2024-12-19T00:44:31.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-25T01:12:30.000Z (18 days ago)
- Last Synced: 2025-02-02T03:49:11.498Z (10 days ago)
- Topics: deno, gpt4o-realtime-api, nextjs, openai, openai-realtime-api, realtime-api, shadcn, shadcn-ui, voice-ai, webrtc
- Language: TypeScript
- Homepage: https://openai-rt-shadcn.vercel.app/
- Size: 32.4 MB
- Stars: 202
- Watchers: 3
- Forks: 37
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/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
```bash
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:
```env
OPENAI_API_KEY=your-openai-api-key
```
### 3. Install Dependencies
If using **Node.js**:
```bash
npm install
```
If using **Deno**:
```bash
deno install
```
### 4. Run the Application
#### Using Node.js:
```bash
npm run dev
```
#### Using Deno:
```bash
deno task start
```
The application will be available at `http://localhost:3000`.
## Usage
1. Open the app in your browser: `http://localhost:3000`.
3. Select a voice and start the audio session.
## Deploy to Vercel
**Deploy in one-click**
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcameronking4%2Fopenai-realtime-api-nextjs&env=OPENAI_API_KEY&envDescription=OpenAI%20Key%20(Realtime%20API%20Beta%20access)&envLink=https%3A%2F%2Fplatform.openai.com%2Fapi-keys&project-name=openai-rt-shadcn&repository-name=openai-realtime-api-nextjs-clone&demo-title=OpenAI%20Realtime%20API%20(WebRTC)%20x%20shadcn%2Fui&demo-description=Next.js%2015%20template%20to%20create%20beautiful%20Voice%20AI%20applications%20with%20OpenAI%20Realtime%20API%20Beta&demo-url=https%3A%2F%2Fopenai-rt-shadcn.vercel.app&demo-image=http%3A%2F%2Fopenai-rt-shadcn.vercel.app%2Fdemo.gif)
## License
This project is licensed under the MIT License. See the `LICENSE` file for details.
## Acknowledgements
- [OpenAI](https://openai.com/) for their API and models.
- [Next.js](https://nextjs.org/) for the framework.
- [Tailwind CSS](https://tailwindcss.com/) for styling.
- [Simon Willison’s Weblog](https://simonwillison.net/2024/Dec/17/openai-webrtc/) for inspiration
- [Originator: skrivov](https://github.com/skrivov/openai-voice-webrtc-next) for the WebRTC and Nextjs implementation