https://github.com/cameronking4/openai-realtime-blocks
Voice AI components using OpenAI Realtime API to copy and paste into your Nextjs projects built with TailwindCSS for building modern Voice AI application with WebRTC.
https://github.com/cameronking4/openai-realtime-blocks
animation component-library design-engineering framer-motion nextjs openai openai-realtime-api realtime-beta shadcn tailwindcss ui ui-components ui-library vapiblocks voice-ai voice-assistant webrtc
Last synced: 10 months ago
JSON representation
Voice AI components using OpenAI Realtime API to copy and paste into your Nextjs projects built with TailwindCSS for building modern Voice AI application with WebRTC.
- Host: GitHub
- URL: https://github.com/cameronking4/openai-realtime-blocks
- Owner: cameronking4
- License: mit
- Created: 2024-10-02T23:52:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-20T09:49:34.000Z (over 1 year ago)
- Last Synced: 2024-12-20T10:22:50.969Z (over 1 year ago)
- Topics: animation, component-library, design-engineering, framer-motion, nextjs, openai, openai-realtime-api, realtime-beta, shadcn, tailwindcss, ui, ui-components, ui-library, vapiblocks, voice-ai, voice-assistant, webrtc
- Language: TypeScript
- Homepage: https://openai-realtime-blocks.vercel.app
- Size: 892 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OpenAI Realtime Blocks - animated Voice AI components
## Intro
OpenAI Realtime Blocks is a collection of components and styles that can be used to build web applications. It is designed to be simple and easy to integrate into your **ReactJS** and **NextJS** projects. It leverages the OpenAI Realtime API Beta using WebRTC and offers a hook you can copy and paste into your project. This component library uses the hook to animate framer-motion components. Use this UI library to build modern Voice AI and multi-modal Nextjs applications.
https://github.com/user-attachments/assets/e48c8530-2854-4f43-a0c3-75c5a164046c
## Features
- **Simple**: OpenAI Realtime Blocks is designed to be simple and easy to use. It is built on top of TailwindCSS, which makes it easy to integrate into your projects.
- **Customizable**: OpenAI Realtime Blocks is highly customizable. You can easily change the colors, fonts, and other styles to match your brand.
- **Responsive**: OpenAI Realtime Blocks is designed to be responsive. It works on all devices, from mobile to desktop.
- **Open Source**: OpenAI Realtime Blocks is open source. You can use it for free in your personal and commercial projects and contribute to its development.
## Voice & Mic Reactive Components [view here](/components/examples)
- **Siri**
- **Classic**
- **Orb**
- **Glob**
- **Minimal**
- **Floaty**
- **Dynamic Island**
- **Multi-Agent Dock**
- **Transcriber**
## Installation
You only need to install the dependencies and import the components that you want to use in your project. Sopecific components may require installation of framer-motion.
Dependencies:
- **ReactJS**: OpenAI Realtime Blocks is built on top of ReactJS, so your project needs to have ReactJS installed, for example you can use it with NextJS, Astro or Create React App.
- **TailwindCSS**: OpenAI Realtime Blocks uses TailwindCSS for styling, so you need to have TailwindCSS installed in your project.
## Credits
OpenAI Realtime Blocks is inspired by other libraries like **shadcn ui**, **Aceternity**, and **MagicUI** so I want to give them credit for their work and inspiration, also I want to thank the **TailwindCSS** team for their amazing work. The UI for the site was made possible by @chonza! This library is reimplements similar components from the [VapiBlocks library](https://vapiblocks.com).