AI Components / Voice Panel
Voice Panel
Self-managing voice panel with built-in Web Speech API, mic button with pulse rings, real-time transcript, push-to-talk, browser detection, permission handling, and auto-timeout. Also available as a mic button variant inside ai-chat.
ai-workflow v0.6.0
Playground
Examples
Click to speak
<ai-voice-panel style="max-width:320px;"></ai-voice-panel>Push-to-talk
<ai-voice-panel pushToTalk style="max-width:320px;"></ai-voice-panel>Continuous + Portuguese
<ai-voice-panel continuous language="pt-BR" style="max-width:320px;"></ai-voice-panel>Import
import { AiVoicePanel } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-voice-panel';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
language | string | "en-US" | BCP-47 language tag |
pushToTalk | boolean | false | Hold mic to talk mode |
continuous | boolean | false | Keep listening after each result |
timeout | number | 10 | Auto-stop after N seconds of silence (0=off) |
rounded | "none"|"sm"|"md"|"lg" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-voice-start | {} | Recording started |
ai-voice-stop | {} | Recording stopped |
ai-voice-result | {transcript, isFinal} | Speech result (interim or final) |
ai-voice-error | {error, message} | Error with human-readable message |