Vapi Blocks - UI Library for Vapi AI

Vapi Blocks is a collection of animated components & api snippets to integrate Vapi AI into your Next.js app. Copy and paste the components and hooks to get started.

Intro

CustomGPT Helper in ChatGPT

Use the VapiBlocks GPT to get help implementing Vapi in general and VapiBlocks in your React / Next app.

Features

• Simple: Vapi 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: Vapi Blocks is highly customizable. You can easily change the colors, fonts, and other styles to match your brand.

• Responsive: Vapi Blocks is designed to be responsive. It works on all devices, from mobile to desktop.

• Open Source: Vapi 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

Snippets & Examples

• Meeting Scheduler: view here
• Outbound Phone Call from Web: view here
• SMS Examples: Coming soon.
• Coding Assistant: view here
• Tavily AI Web Search: In progress.
• Data Retrieval: Coming soon.

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: Vapi 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: Vapi Blocks uses TailwindCSS for styling, so you need to have TailwindCSS installed in your project.

Credits

Vapi 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!