houndify-react-ui

Simple React components to interact with the Houndify API.

📦Installation

npm install houndify-react-ui

🔨 Usage

Before starting:

Before you use this package, you'll need to create a free account on Houndify, provision a client, and get a Client ID and Client Key.

Components

Recorder

The Recorder component renders a microphone on the page that can be used to send voice requests to the Houndify API, and receive JSON responses back.

Example Snippet

import { Recorder } from 'houndify-react-ui';

<Recorder
  clientId="YOUR_CLIENT_ID"
  clientKey="YOUR_CLIENT_KEY"
  requestInfo={{
    UserID: 'test_user',
    Latitude: 37.388309,
    Longitude: -121.973968,
  }}
  conversationState={{}}
  authenticationEndpoint="http://localhost:3446/houndifyAuth"
  // This will be called as the user is speaking with partial transcription strings.
  onTranscriptionUpdate={transcript => {
    setQuery(transcript.PartialTranscript);
  }}
  // This will be called if there is an error.
  onError={error => {
    setError(error);
  }}
  // This will be called when the final response is returned by the Houndify API.
  onResponse={(response, info) => {
    console.log(response);
  }}
  // Enable voice-activity-detection.
  // This will auto-close the mic if it notices that the user has stopped speaking.
  enableVAD
  showPartialTranscription
/>;

Props

The props accepted by this component are the same as the arguments required by the Houndify.VoiceRequest() method.

For more information on these props, refer to the Houndify JavaScript SDK documentation.

| Props | Description | Type | | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | | clientId | Your Houndify Client ID | string | | clientKey | Your Houndify ClientKey (not recommended in production) | string | | conversationState | Pass the current ConversationState stored from previous queries, see: https://www.houndify.com/docs#conversation-state | object | | authenticationEndpoint | An endpoint on your server for handling the authentication, see: SDK's server-side method HoundifyExpress.createAuthenticationHandler() | string | | requestInfo | Request Info JSON, see: https://houndify.com/reference/RequestInfo | object | | onTranscriptionUpdate | Paritial Speech to Text transcription callback | function(transcript) | | onResponse | Response callback | function(response,info) | | onError | Error callback | function(error) | | enableVAD | Enable Voice Activity Detection, default true | boolean | | showPartialTranscription | Enable showing partial transcription text while speaking | boolean | | showStatusText | Enable showing status text for the recorder | boolean | | showResponse | Enable showing the response json object | boolean | | MicComponent | Custom Mic Component to replace the default | React Component | | micStyle | Customize css styling for the default mic icon | object | | micStyleClass | css class for the default mic | string |

Use your own Mic Component

You can also pass in your own mic component for customization

For example:

const CustomMic = props => <button onClick={props.onClick}>Talk</button>;

Then you can pass this into the MicComponent prop of the Recorder componet.

In the props of your custom mic component, you will have the following:

• active: whether the recorder is in the active state
• status: 'STARTED' |'PROCESSING' | 'ENDED' | 'ERRORED' 'READY'
• onClick: handle the start of the voice request.

Textbox

The Textbox React component renders an text input on the page that can be used to send Text Requests to the Houndify API.

import { Textbox } from 'houndify-ui-react';

<Textbox
  clientId={clientId}
  clientKey={clientKey}
  requestInfo={requestInfo}
  conversationState={convoState}
  authenticationEndpoint={authenticationEndpoint}
  onError={error => {
    setError(error);
  }}
  onResponse={(response, info) => {
    setConvoState(response.AllResults[0].ConversationState);
    setResponse(response);
  }}
  onQueryChange={q => setQuery(q)}
  query={query}
  proxy={{
    method: 'POST',
    url: 'http://localhost:3446/textSearchProxy',
    // headers: {}
    // ... More proxy options can be added as needed
  }}
/>;

Props

The props accepted by this component are the same as the arguments required by the Houndify.TextRequest() method.

For more information on these props, refer to the Houndify JavaScript SDK documentation.

| Property | Description | Type | | :--------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | | query | Text query | string | | clientId | Your Houndify Client ID | string | | clientKey | Your Houndify ClientKey (not recommended in production) | string | | conversationState | Pass the current ConversationState stored from previous queries, see: https://www.houndify.com/docs#conversation-state | object | | authenticationEndpoint | An endpoint on your server for handling the authentication, see: SDK's server-side method HoundifyExpress.createAuthenticationHandler() | string | | requestInfo | Request Info JSON, see: https://houndify.com/reference/RequestInfo | object | | proxy | Need endpoint in your server to handle proxying text search http requests to Houndify backend. See: SDK's server-side method HoundifyExpress.createTextProxyHandler() | object | | onResponse | Response callback | function(response,info) | | onError | Error callback | function(error) |

To Use it with Nodejs backend:

See Houndify's Javascript SDK for the instruction of setting up