VibeFast
Customizing Features

Voice Bot

Real-time voice conversations powered by ElevenLabs and your backend.

Install the voice bot to get a fully featured conversational screen with audio input, feedback controls, and lifecycle management.

vf add voice-bot

When to use it

The voice bot feature is ideal for hands-free experiences, accessibility upgrades, or conversational workflows where typing is slow or inconvenient. Teams often use it for onboarding, concierge flows, support triage, or guided data collection. It ships with a clean UI, connection states, and feedback buttons so you can launch a polished experience quickly and then layer on your own prompts, policies, and analytics.

Frontend

  • Entry: apps/native/src/app/(root)/(protected)/voice-bot/index.tsx (re-exports from features/voice-bot).
  • Hook: useVoiceBot (features/voice-bot/services/use-voice-bot.ts) handles the ElevenLabs useConversation session, cleanup, and contextual updates.
  • Components: features/voice-bot/components include VoiceBotScreen, ConversationStatusIndicator, VoiceControls, and message/feedback UI.

Backend

  • packages/backend/convex/router.ts defines the /voice/conversation-token HTTP endpoint that proxies call to ElevenLabs
  • generateConvexHttpApiUrl builds the proper URL for the hook
  • Create an Edge Function or API route to proxy the ElevenLabs token request
  • The frontend hook expects a /voice/conversation-token endpoint

Environment & build

  • Set ELEVENLABS_API_KEY and the agent_id from your ElevenLabs Conversational AI dashboard
  • The feature relies on WebRTC, so it requires a custom development build (pnpm ios/pnpm android after pnpx expo prebuild). Expo Go is not supported.
  • The hook automatically cleans up conversations when the screen unmounts

Customization

  • Pass a custom VoiceBotConfig with your agentId and callbacks
  • Use the provided actions (startConversation, sendMessage, sendFeedback) inside any screen to build overlays or companion UIs
  • The feedback buttons track satisfaction in your analytics layer

Found an issue or bug in the docs?

Help me improve! If you spot any errors, typos, or have suggestions, please let me know.

Reach out on X/Twitter @zafarbuildzz

On this page

When to use itFrontendBackendEnvironment & buildCustomization