React TypeScript library for WebSocket-based voice interactions
npm install echo-voicebotA React TypeScript library for WebSocket-based voice interactions with real-time audio streaming and transcription support.
``bash`
npm install echo-voicebot
`tsx
import React from 'react';
import { VoicebotWidget, VoicebotConfig } from 'echo-voicebot';
const App = () => {
const config: VoicebotConfig = {
userId: 'user123',
assistantId: 'assistant456',
flowId: 'flow789',
autoStream: true,
language: 'en-US'
};
return (
export default App;
`
`tsx
import React from 'react';
import { useVoicebot, VoicebotConfig } from 'echo-voicebot';
const CustomVoiceComponent = () => {
const config: VoicebotConfig = {
userId: 'user123',
assistantId: 'assistant456',
flowId: 'flow789'
};
const {
status,
isStreaming,
transcripts,
connectionUrls,
connect,
disconnect,
startStreaming,
stopStreaming
} = useVoicebot(config, {
onTranscript: (message) => console.log('New transcript:', message),
onStatusChange: (status) => console.log('Status changed:', status),
onError: (error) => console.error('Error:', error)
});
return (
Status: {status}
{t.speaker}: {t.text}
Configuration
$3
| Property | Type | Required | Description |
|----------|------|----------|-------------|
|
userId | string | ✅ | User identifier |
| assistantId | string | ✅ | Assistant identifier |
| flowId | string | ✅ | Flow identifier |
| callSid | string | ❌ | Call session ID |
| language | string | ❌ | Language code (default: 'en-US') |
| interruptions | boolean | ❌ | Enable interruptions |
| prompt | string | ❌ | Assistant prompt |
| autoStream | boolean | ❌ | Auto-start streaming on connect |$3
`tsx
const callbacks: VoicebotCallbacks = {
onTranscript: (message) => {
// Handle new transcript message
},
onStatusChange: (status) => {
// Handle connection status changes
},
onError: (error) => {
// Handle errors
},
onCallEnd: () => {
// Handle call end
}
};
`React Native Support
For React Native, you'll need to install additional dependencies:
`bash
npm install react-native-webrtc
`Then use the library the same way:
`tsx
import { VoicebotWidget } from 'echo-voicebot';// Same usage as React
`Flutter Integration
For Flutter apps using webview_flutter:
`dart
// Add to pubspec.yaml
dependencies:
webview_flutter: ^4.0.0// Create a WebView that loads your React component
WebView(
initialUrl: 'your-react-app-url-with-voicebot-widget',
javascriptMode: JavascriptMode.unrestricted,
)
`API Reference
$3
Returns an object with:
-
status: Current connection status
- isStreaming: Whether audio streaming is active
- transcripts: Array of transcript messages
- connectionUrls: WebSocket URLs used for connection
- connect(): Connect to WebSocket
- disconnect(): Disconnect from WebSocket
- startStreaming(): Start audio recording
- stopStreaming(): Stop audio recording$3
Props:
-
config: VoicebotConfig object
- callbacks?: Optional callbacks
- className?: CSS class name
- showTranscripts?: Show transcript panel (default: true)
- showControls?`: Show control buttons (default: true)MIT# e c h o - v o i c e b o t