UI kit (optional)

The SDK is headless by default — you own the UI and drive it off the session event streams. But if you want a working assistant fast, an optional, themeable, fully-replaceable UI kit ships alongside the core: a floating launcher button and a chat-plus-voice window. It's a separate import, so headless apps never pull it in.

React Native

import { VoicebotLauncher } from '@monoverse/voicebot-react-native/ui';

Flutter

import 'package:voicebot_flutter/ui.dart';

Turnkey — VoicebotLauncher

Drop it once near your app root. It floats a launcher button over every screen, opens a panel where the user can talk or type (chat + voice share one session), and owns the session lifecycle.

React Native

import { VoicebotLauncher } from '@monoverse/voicebot-react-native/ui';

<VoicebotLauncher
  config={{
    baseUrl: 'https://api.monoverse.tech',
    auth: { mode: 'publishableKey', apiKey: 'vb_pk_…', appId: 'com.yourco.app' },
  }}
  theme={{ colors: { accent: '#0a7d55' } }}
  onClientReady={(client) => {
    client.registerDeepLinkMap('open_product', ({ id }) => `myapp://product/${id}`);
    client.registerToolHandler('add_to_cart', ({ id }) => { myCart.add(id); return { success: true }; });
  }}
/>

Flutter

import 'package:voicebot_flutter/ui.dart';

VoicebotLauncher(
  client: VoicebotClient.init(baseUrl: 'https://api.monoverse.tech', tokenProvider: myProvider),
  config: const SessionConfig(lang: 'uk'),
  theme: const VoicebotTheme(corner: VoicebotCorner.bottomRight, accent: Colors.teal),
  onClientReady: (c) {
    c.registerDeepLinkMap('open_product', (p) => '/product/${p['id']}');
    c.registerToolHandler('add_to_cart', (a) async => {'success': true});
  },
)

The launcher floats above all routes via a root overlay. For programmatic control, hold a GlobalKey<VoicebotLauncherState> and call open() / minimizePanel() / close() / toggle().

Pieces — VoiceButton + ChatPanel

For a custom layout, use the two widgets directly (place them in your own tree):

• VoiceButton — the floating launcher (FAB). Reflects the live phase from the session streams: idle · connecting (spinner) · listening (animated pulse ring) · bot speaking (accent).
• ChatPanel — the assistant window: header (title + minimize + close), a scrollable transcript with live streaming partials (user vs bot bubbles), and a footer with a text input + send and a mic toggle. Respects safe-area + keyboard insets.

Theming & localization — VoicebotTheme

VoicebotTheme ships sensible defaults (on Flutter they blend with the ambient Material ColorScheme). Override any field — colors (background / foreground / accent / pulse, panel + bubbles), corner + margins, button size / elevation / icon, radii, typography — and pass it per-component or via a theme provider (ThemeProvider on RN, VoicebotThemeProvider on Flutter). Every user-facing string is overridable (RN labels, Flutter VoicebotLabels) — localize by passing translated labels; nothing is hardcoded.

Lifecycle — wired for you

The kit honors minimize ≠ close automatically: minimize collapses the panel back to the launcher and keeps the session alive (no end); close (X) calls endSession() for a real teardown. A bot- or server-initiated end auto-collapses and resets for the next open. See Lifecycle.

Fully replaceable

The kit is opt-in and replaceable — it binds only to the public VoicebotSession streams and methods, and the headless core never imports it. Start with the launcher, then swap in your own components whenever you want full control of the look and feel.