​
PonderProvider

You can integrate Ponder into your application by wrapping your app in the PonderProvider. This is usually done in the _app.js file, but depends on your react framework.

​
Params

​
assistantId
string
required

ID of the assistant you created on Ponder dashboard

​
host
string
required

address of Ponder’s backend server

​
includePaths
string

a list of paths where the Ponder widget should be rendered. If not provided then render everywhere

​
headless
boolean
default:"false"

if true then the Ponder widget will NOT be rendered and its upto you to build a custom UI for the agent using the usePonder hooks

_app.js example
import { PonderProvider } from '@ponderai/react';

function App({ Component, pageProps }) {
      return (
        <PonderProvider assistantId="YOUR_ASSISTANT_ID" host={"https://api.useponder.ai"} includePaths={["/"]}>
          <Component {...pageProps} />
        </PonderProvider>
      );
}

export default App;

​
usePonder

The usePonder hook exposes the core functionality of Ponder. You can access it on any component that is a child of the PonderProvider

example
const {
  setActions,
  setInstructions,
  togglePonder,
  connect,
  isListening,
  setOnSpeechStart,
  setOnSpeechEnd,
  setOnMessagesChange,
} = usePonder();

​
Returns

​
togglePonder
function

show / hide the Ponder widget on the bottom right, not applicable in headless mode

​
connect
function

starts a voice session. closes the session if called when one is already active.

​
isListening
boolean

true when the session is active and the agent is listening, false otherwise

​
setInstructions
function

lets you set the instructions and context of the agent dynamically

​
setActions
function

lets you set the functions that the agent can call

example
setActions([
  {
    name: "searchDocs",
    description: "Call this function if the user wants to search the docs for something specific",
    arguments: [
      {
        name: "query",
        description: "The search query",
        type: "string",
        required: true
      }
    ],
    function: searchDocs // <-- the actual js function to call
  },
])
​
setOnSpeechStart
function

lets you set a function to be called whenever user speech start is detected
does not have any arguments

example
setOnSpeechStart(() => {console.log("speech started")})
​
setOnSpeechEnd
function

lets you set a function to be called whenever user is done speaking
does not have any arguments

example
setOnSpeechEnd(() => {console.log("speech ended")})
​
setOnMessagesChanged
function

lets you set a function to be called whenever the messages in the conversation change
for example when the user’s speech is transcribed, or when the agent’s response is recieved

example
setOnMessagesChange((messages) => {console.log(messages)})
// [{"role": "user", "text": "Hello there"}, 
//  {"role": "assistant", "text": "Hi! How can I help?"}, ...]