@solo3li/client-react 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @solo3li/client-react
|
|
2
|
+
|
|
3
|
+
The official React SDK for connecting your web applications to the **Voice AI CPaaS**. This library provides a seamless React Hook (`useOmniAgent`) to handle WebRTC connections, audio routing, and state management for your AI Voice Agents.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @solo3li/client-react
|
|
9
|
+
```
|
|
10
|
+
*Note: This package requires `react` and `livekit-client` as peer dependencies.*
|
|
11
|
+
|
|
12
|
+
## Quick Start
|
|
13
|
+
|
|
14
|
+
The SDK is designed to be extremely simple. All you need is the `token` and `livekitUrl` generated by your backend server using `@solo3li/backend-node`.
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import React from 'react';
|
|
18
|
+
import { useOmniAgent } from '@solo3li/client-react';
|
|
19
|
+
|
|
20
|
+
interface CallScreenProps {
|
|
21
|
+
token: string;
|
|
22
|
+
livekitUrl: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const CallScreen: React.FC<CallScreenProps> = ({ token, livekitUrl }) => {
|
|
26
|
+
// 1. Initialize the AI Agent Hook
|
|
27
|
+
const { isConnected, isAgentSpeaking, disconnect } = useOmniAgent({
|
|
28
|
+
token,
|
|
29
|
+
livekitUrl,
|
|
30
|
+
onAgentConnected: () => console.log('AI Agent joined the room!'),
|
|
31
|
+
onAgentDisconnected: () => console.log('AI Agent left the room.'),
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<div style={{ textAlign: 'center', padding: '50px' }}>
|
|
36
|
+
<h2>Voice AI Assistant</h2>
|
|
37
|
+
|
|
38
|
+
{/* Connection Status */}
|
|
39
|
+
<p>
|
|
40
|
+
Status: {isConnected ? '🟢 Connected' : '🔴 Disconnected'}
|
|
41
|
+
</p>
|
|
42
|
+
|
|
43
|
+
{/* Speaking Indicator */}
|
|
44
|
+
{isConnected && (
|
|
45
|
+
<div style={{ margin: '20px' }}>
|
|
46
|
+
{isAgentSpeaking ? '🗣️ Agent is speaking...' : '👂 Agent is listening...'}
|
|
47
|
+
</div>
|
|
48
|
+
)}
|
|
49
|
+
|
|
50
|
+
{/* End Call Button */}
|
|
51
|
+
{isConnected && (
|
|
52
|
+
<button onClick={disconnect} style={{ color: 'red' }}>
|
|
53
|
+
End Call
|
|
54
|
+
</button>
|
|
55
|
+
)}
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Features
|
|
62
|
+
- **Auto Audio Routing:** Automatically attaches remote audio tracks to the DOM so you don't have to manage `<audio>` elements manually.
|
|
63
|
+
- **Active Speaker Detection:** Easily bind UI animations to the `isAgentSpeaking` state.
|
|
64
|
+
- **Microphone Management:** Automatically requests microphone permissions and publishes the local audio track upon connection.
|
|
65
|
+
|
|
66
|
+
## License
|
|
67
|
+
MIT
|