Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs sprint] Updates docs for react quickstart #10

Merged
merged 2 commits into from
Jun 12, 2024
Merged

[docs sprint] Updates docs for react quickstart #10

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
690261f
[docs sprint] Updates docs for react quickstart
ajar98 Jun 6, 2024
ded5ba6
PR feedback
ajar98 Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 15 additions & 25 deletions docs/open-source/react-quickstart.mdx
View file
Open in desktop
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
<>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we add js formatting here?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or html? however we can format react nicely

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for future readers, mintlify uses prism for syntax highlighting: https://prismjs.com/#supported-languages

so I added jsx highlighting here

{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>
</>
```
Loading