Introducing @wagn/voice-ui: A Component Library for Voice Interfaces in React

Hey everyone,

I'm excited to announce a new project I'm starting called @wagn/voice-ui - a component library that makes it dead simple to add beautiful voice interfaces to React applications.

Demo Site: @wagn/voice-ui

The Problem I'm Solving

If you've ever tried implementing voice interfaces in web apps, you know it's a pain. You need expertise in audio handling, WebSockets, real-time communication, and UI design - forcing most developers to either build everything from scratch or use inflexible walled-garden solutions.

I learned this the hard way through my own projects, and I kept thinking: "Why isn't there a simple, composable solution for this?"

That's exactly what I'm building.

What is @wagn/voice-ui?

@wagn/voice-ui provides ready-to-use React components for voice interfaces that connect to any event-based backend through a simple EventEmitter pattern. This means you can implement voice features without needing deep expertise in audio processing or connection handling.

The library follows a "bring your own EventEmitter" approach that works with any backend voice system (WebSockets, HTTP, WebRTC, SignalR) while maintaining full UI customization.

What I've Built So Far

This week, I've completed three pre-styled UI layouts:

1. Visual Novel Layout - Perfect for game-like experiences or choose-your-own-adventure applications

1. Phone Call UI - A familiar interface for traditional applications with minimal cognitive load

3. Service Card Layout - Designed for interactive service applications that need to display metadata alongside the conversation

I've also built a demo website where you can see these components in action, along with initial documentation to help developers get started.

Composability Is Key

One of the core principles behind this library is composability. I'm using a slots architecture where you have layouts, but can inject any type of component you want to replace parts of it.

// Don't like the default avatar? Override just that part!
<VisualNovelLayout
  floatingChatBox={<YourCustomChatBox />}
  {...otherProps}
/>

This gives you the flexibility to customize any aspect while keeping the core functionality intact.

What's Next?

Over the next few weeks, I'll be focusing on:

1. Week 1: Building the initial layouts using a stateless system and a presenter / controller architecture
2. Week 2: Implementing the voice streaming system with a demo soundboard so you can see how the UI reacts during a conversation
3. Week 3: Adding theming support so you can easily customize colors, fonts, borders, etc.
4. Week 4: Polishing, adding unit tests, setting up Storybook, and officially launching on NPM and GitHub

My goal is to have this ready for you to use in your projects by the end of the month.

The Bigger Vision

This component library is just the first piece of a larger ecosystem I'm building for voice applications. In the future, I plan to create complementary tools including:

• A server with text-to-speech capabilities
• Turn detection models that can run locally
• Interruption handling with history
• Locally fine-tuned models for fast responses
• Single Agent, Multiple Personality systems built on graphs

All designed with the same philosophy: high cohesion, low coupling, and maximum composability.

Want to Follow Along?

Check out the demo site to play with the UI components and see the initial documentation. If you have feedback on the UI or ideas for the project, feel free to comment below or reach out on LinkedIn.

I'll be sharing more updates as I make progress, including when the GitHub repo is available (likely next week).

Let me know what you think, or if there are specific features you'd find useful!