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