openai-realtime-blocks
# OpenAI Realtime Blocks - animated Voice AI components <img width="1637" alt="Screenshot 2024-12-20 at 4 16 58 AM" src="https://github.com/user-attachments/assets/103ebc3e-ccb5-44a3-ad26-ae4e7b929dcf" /> ## 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 <!-- [](https://www.youtube.com/watch?v=gjtUfjiRgAs "AI Blocks UI Library & API Snips for Vapi Voice AI") --> ## 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).