Echo Voicebot Library

A React TypeScript library for WebSocket-based voice interactions with real-time audio streaming and transcription support.

Installation

``bash
npm install echo-voicebot
`

Quick Start

$3

`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;
`

$3

`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 (


| 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)

License

MIT# echo-voicebot