Skip to content

Commit 690261f

Browse files
committed
[docs sprint] Updates docs for react quickstart
1 parent e1f6fbd commit 690261f

File tree

1 file changed

+11
-23
lines changed

1 file changed

+11
-23
lines changed

docs/open-source/react-quickstart.mdx

+11-23
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Or, start from our [Replit template](https://replit.com/@vocode/Simple-Conversat
1313

1414
## Setting up the conversation
1515

16-
Our self-hosted backend allows you to expose a websocket route in the same format that our hosted backend does. This allows you to deploy any agent you'd like into the conversation.
16+
Our self-hosted backend allows you to expose a websocket route that operates like `StreamingConversation`.
1717

1818
To get started, clone the Vocode repo or copy the [client backend app](https://github.com/vocodedev/vocode-python/tree/main/apps/client_backend) directory.
1919

@@ -57,34 +57,22 @@ uvicorn main:app --port 3000
5757
You now have a server with a Vocode websocket route at localhost:3000! You can now use the `useConversation` hook with your self-hosted backend as follows:
5858

5959
```javascript
60-
const { status, start, stop, analyserNode } = useConversation({
60+
const { status, start, stop, error, analyserNode } = useConversation({
6161
backendUrl: "<YOUR_BACKEND_URL>", // looks like ws://localhost:3000/conversation or wss://asdf1234.ngrok.app/conversation if using ngrok
6262
audioDeviceConfig: {},
6363
});
6464
```
6565

66-
# Demo installation and setup
66+
Use the `status`, `start`, and `stop` objects within your React components to control conversations with your self-hosted backend, e.g.
6767

68-
Clone the `vocode-react-demo` [repository](https://github.com/vocodedev/vocode-react-demo).
69-
70-
```
71-
$ git clone https://github.com/vocodedev/vocode-react-demo.git
72-
```
73-
74-
Run npm install inside the directory to download all of the dependencies.
75-
76-
```
77-
$ npm install
7868
```
69+
<>
70+
{status === "idle" && <p>Press me to talk!</p>}
71+
{status == "error" && error && <p>{error.message}</p>}
7972
80-
Set your Client SDK key inside of your `.env`
81-
82-
```
83-
REACT_APP_VOCODE_API_KEY=YOUR KEY HERE
84-
```
85-
86-
Start the application
87-
88-
```
89-
$ npm start
73+
<button
74+
disabled={["connecting"].includes(status)}
75+
onClick={status === "connected" ? stop : start}
76+
></button>
77+
</>
9078
```

0 commit comments

Comments
 (0)