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
- 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.