Skip to content

Commit

Permalink
[docs sprint] Updates docs for react quickstart (#10)
Browse files Browse the repository at this point in the history
* [docs sprint] Updates docs for react quickstart

* PR feedback
  • Loading branch information
ajar98 authored Jun 12, 2024
1 parent 45b3749 commit 67eaf1f
Showing 1 changed file with 15 additions and 25 deletions.
40 changes: 15 additions & 25 deletions docs/open-source/react-quickstart.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Or, start from our [Replit template](https://replit.com/@vocode/Simple-Conversat

## Setting up the conversation

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.
Our self-hosted backend allows you to expose a websocket route that operates like `StreamingConversation`.

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.

Expand Down Expand Up @@ -56,35 +56,25 @@ uvicorn main:app --port 3000

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:

```javascript
const { status, start, stop, analyserNode } = useConversation({
```typescript
import { useConversation } from "vocode";

const { status, start, stop, error, analyserNode } = useConversation({
backendUrl: "<YOUR_BACKEND_URL>", // looks like ws://localhost:3000/conversation or wss://asdf1234.ngrok.app/conversation if using ngrok
audioDeviceConfig: {},
});
```

# Demo installation and setup

Clone the `vocode-react-demo` [repository](https://github.com/vocodedev/vocode-react-demo).

```
$ git clone https://github.com/vocodedev/vocode-react-demo.git
```

Run npm install inside the directory to download all of the dependencies.

```
$ npm install
```

Set your Client SDK key inside of your `.env`
Use the `status`, `start`, and `stop` objects within your React components to control conversations with your self-hosted backend, e.g.

```
REACT_APP_VOCODE_API_KEY=YOUR KEY HERE
```

Start the application
```jsx
<>
{status === "idle" && <p>Press me to talk!</p>}
{status == "error" && error && <p>{error.message}</p>}

```
$ npm start
<button
disabled={["connecting"].includes(status)}
onClick={status === "connected" ? stop : start}
></button>
</>
```

0 comments on commit 67eaf1f

Please sign in to comment.