Apoorv Karanwal -🚀 Building UBO Agent (Universal Board of Operations)

#agents #ai #showdev #ui

Hey everyone! I'm Apoorv Karanwal, and I’m excited to share my latest project with the community: UBO (Universal Board of Operations), also known as Zephyr.

In a world where AI is becoming the core of our digital interactions, I wanted to build something that goes beyond a simple chat interface. I wanted a Command Center—a seamless, multi-modal dashboard where voice, visuals, and tools converge into one fluid experience.

🌟 What is UBO?

UBO is an AI-powered ecosystem designed to be your ultimate digital companion. At its heart lies Zephyr, an intelligent voice-first agent that doesn't just talk to you—it operates for you.

Whether you need to research complex topics, visualize data, listen to music, or even simulate code, UBO provides a dedicated board for every operation.

Key Features:

🎙️ Zephyr Voice Integration: A real-time, low-latency AI voice interface (powered by Gemini Multimodal Live) that feels like talking to a human.
🎨 UboBoard Canvas: A dynamic, interactive whiteboard where the AI can place images, widgets, and custom components on the fly.
🎵 Integrated Media Hub: Search and play music or find YouTube tutorials directly through voice commands.
🛠️ Developer Tooling: A built-in terminal, ESP32 emulator, and graph boards for technical workflows.
🌍 Live Web Access: Real-time search capabilities for up-to-the-minute news, statistics, and image generation.
⚡ Intelligent Context Awareness: The system stops playback and transitions smoothly when you decide to watch a video or open external resources.

🛠️ How it Was Built (The Tech Stack)

Building UBO required a high-performance stack to ensure the UI felt "alive" and responsive.

Frontend: React 18+ with Vite for blazing-fast development.
Styling: Tailwind CSS for a modern, sleek "Cosmic Slate" aesthetic.
Animations: Framer Motion (motion/react) for those buttery-smooth state transitions and the iconic "Voice Orb" pulse.
AI Engine: Google Gemini API (Multimodal Live API) for real-time speech-to-speech and tool-calling capabilities.
State Management: Custom React hooks (useUbo, useLiveConversation) to handle the complex interplay between voice audio and UI elements.
Backend: A robust Express/Node.js server orchestrating tool executions (YouTube API, Google Search, etc.).

💡 The "Aha!" Moment

One of the biggest challenges was making the AI truly interactive within the UI. Instead of the AI just giving you a link, I wanted it to show you the results.

I implemented a Tool-Calling Architecture where the AI can decide to:

Open a side panel with an image gallery.
Trigger a full-screen music player.
Pop up a digital clock or terminal.
Smartly pause its own voice when you click a video link to avoid "audio overlapping."

🏆 What’s Next?

UBO is just the beginning. I'm looking into adding multi-user collaboration and expanding the "Board" library to include more specialized tools for designers and data scientists.

I’d love to hear your thoughts! What kind of "Operations" would you want on your Universal Board?

Check out the project and let's connect!
link = Check Out Ubo Agent For Free (password:123321)

Created with ❤️ by Apoorv Karanwal