Pinecall

@pinecall/voice-widget

Drop-in React voice widget with animated orb UI, themes, and multi-language support.

npm install @pinecall/voice-widget react react-dom

Built on top of @pinecall/voice-core. React ≥18 is a peer dependency.

Quick start#

import { VoiceWidget } from "@pinecall/voice-widget";

export default function App() {
  return <VoiceWidget agent="mara" name="Mara" />;
}

That's it. The widget renders a floating orb in the bottom-right corner. Click to start a voice call, click again to end it. The orb animates through phases (idle → connecting → listening → speaking → thinking) and shows a live transcript bubble above.

What you get out of the box#

  • Animated orb with breathing rings, pulse states, and per-phase colors
  • Live transcript rendered as chat bubbles next to the orb
  • 5 theme presets (dark, midnight, aurora, sunset, light) — plus full CSS variable overrides
  • Multi-language pill selector with hot-swap mid-call (voice, STT, language change without reconnecting)
  • Idle warning state when the user goes silent too long
  • Interactive Tools API for rendering UI in response to LLM tool calls (forms, pickers, confirmations)
  • useVoiceSession() hook for building completely custom UIs without giving up the session management

When to use what#

You want to...Use
Drop a voice button on your site<VoiceWidget />
Build a fully custom UI in ReactuseVoiceSession() hook
Build a fully custom UI in Vue/Svelte/vanilla@pinecall/voice-core directly
Render interactive UI from agent tool calls<VoiceWidget> + useVoice() context + trackedTools

What's next#