{"id":23314851,"url":"https://github.com/cameronking4/openai-realtime-blocks","last_synced_at":"2025-08-22T14:31:25.075Z","repository":{"id":269011597,"uuid":"866823954","full_name":"cameronking4/openai-realtime-blocks","owner":"cameronking4","description":"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.","archived":false,"fork":false,"pushed_at":"2024-12-20T09:49:34.000Z","size":913,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-20T10:22:50.969Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://openai-realtime-blocks.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cameronking4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-02T23:52:30.000Z","updated_at":"2024-12-20T09:49:38.000Z","dependencies_parsed_at":"2024-12-20T10:23:38.549Z","dependency_job_id":"4231b2ca-9285-4817-a9a0-78ac2112bdc4","html_url":"https://github.com/cameronking4/openai-realtime-blocks","commit_stats":null,"previous_names":["cameronking4/openai-realtime-blocks"],"tags_count":0,"template":false,"template_full_name":"cameronking4/VapiBlocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fopenai-realtime-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fopenai-realtime-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fopenai-realtime-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cameronking4%2Fopenai-realtime-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cameronking4","download_url":"https://codeload.github.com/cameronking4/openai-realtime-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230603665,"owners_count":18251977,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-20T15:18:09.493Z","updated_at":"2025-08-22T14:31:24.959Z","avatar_url":"https://github.com/cameronking4.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenAI Realtime Blocks - animated Voice AI components\n\u003cimg width=\"1637\" alt=\"Screenshot 2024-12-20 at 4 16 58 AM\" src=\"https://github.com/user-attachments/assets/103ebc3e-ccb5-44a3-ad26-ae4e7b929dcf\" /\u003e\n\n## Intro\n\nOpenAI 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.\n\nhttps://github.com/user-attachments/assets/e48c8530-2854-4f43-a0c3-75c5a164046c\n\u003c!-- [![AI Blocks UI Library \u0026 API Snips for Vapi Voice AI](https://res.cloudinary.com/marcomontalbano/image/upload/v1720129151/video_to_markdown/images/youtube--gjtUfjiRgAs-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://www.youtube.com/watch?v=gjtUfjiRgAs \"AI Blocks UI Library \u0026 API Snips for Vapi Voice AI\") --\u003e\n\n## Features\n\n- **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.\n- **Customizable**: OpenAI Realtime Blocks is highly customizable. You can easily change the colors, fonts, and other styles to match your brand.\n- **Responsive**: OpenAI Realtime Blocks is designed to be responsive. It works on all devices, from mobile to desktop.\n- **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.\n\n## Voice \u0026 Mic Reactive Components [view here](/components/examples)\n\n- **Siri**\n- **Classic**\n- **Orb**\n- **Glob**\n- **Minimal**\n- **Floaty**\n- **Dynamic Island**\n- **Multi-Agent Dock**\n- **Transcriber**\n\n## Installation\n\nYou 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.\n\nDependencies:\n\n- **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.\n\n- **TailwindCSS**: OpenAI Realtime Blocks uses TailwindCSS for styling, so you need to have TailwindCSS installed in your project.\n\n## Credits\n\nOpenAI 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcameronking4%2Fopenai-realtime-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcameronking4%2Fopenai-realtime-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcameronking4%2Fopenai-realtime-blocks/lists"}