Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cameronking4/shadcn-openai-realtime-webrtc
Boilerplate Nextjs15 project to make use of the OpenAI GPT4o Realtime WebRTC API to talk with AI Voice Assistant. Fastest & latest way to do Voice AI (Dec 2024).
https://github.com/cameronking4/shadcn-openai-realtime-webrtc
gpt4o-realtime-api nextjs openai realtime-api shadcn shadcn-ui voice-ai webrtc
Last synced: 2 months ago
JSON representation
Boilerplate Nextjs15 project to make use of the OpenAI GPT4o Realtime WebRTC API to talk with AI Voice Assistant. Fastest & latest way to do Voice AI (Dec 2024).
- Host: GitHub
- URL: https://github.com/cameronking4/shadcn-openai-realtime-webrtc
- Owner: cameronking4
- License: mit
- Created: 2024-12-19T00:44:31.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-19T00:59:43.000Z (2 months ago)
- Last Synced: 2024-12-19T01:29:45.810Z (2 months ago)
- Topics: gpt4o-realtime-api, nextjs, openai, realtime-api, shadcn, shadcn-ui, voice-ai, webrtc
- Language: TypeScript
- Homepage: https://shadcn-openai-rt.vercel.app
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenAI WebRTC Shadcn/UI Next.js Starter
This is a WebRTC-based audio streaming application using `OpenAI`'s `Realtime WebRTC API`. 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.
## Features
- **Next.js Framework**: Built with Next.js for server-side rendering and API routes.
- **Tailwind CSS**: Styled using Tailwind CSS.
- **shadcn/ui**: All components in ui folder are from shadcn/ui.
- **useWebRTCAudioSession**: A hook to abstract the OpenAI WebRTC handling.
- **Type Safety**: TypeScript with strict eslint rules (optional)
- [ ] Coming soon: Tool Calling
## 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/shadcn-openai-realtime-webrtc.git
cd shadcn-openai-realtime-webrtc
```
### 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.
## Technologies Used
- **Next.js**: Framework for building React applications with server-side rendering.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **OpenAI API**: Integration with OpenAI's real-time models.
- **WebRTC**: Real-time communication API.
- **Deno**: Alternative runtime for the app.
## Contributing
1. Fork the repository.
2. Create a new branch.
3. Make your changes and commit them.
4. Push your branch and create a pull request.
## 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