​
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
​
headingText
string
default:"Need help?"
text to display as heading
​
subHeadingText
string
default:"Talk to us"
text to display as sub heading
​
primaryColor
string
default:"#3b3b3b"
main background color of the widget
​
secondaryColor
string
default:"#f1f1f1"
text and accent color of the widget
path to the image file of the company logo
​
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,
  disconnect,
  onConnected,
  onDisconnected,
  onSpeechStart,
  onSpeechEnd,
  onMessage,
  onFunctionCall
} = usePonder();

​
Returns

​
togglePonder
function
show / hide the Ponder widget on the bottom right, not applicable in headless mode
​
connect
function
starts a web call
​
disconnect
function
stops a web call
​
onConnected
callback
callback function called when the call is connected and the agent is listening
​
onDisconnected
callback
callback function called when the call is disconnected and the agent is no longer listening
​
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
      }
    ],
  },
])
​
onSpeechStart
function
callback function for whenever user speech start is detected
does not have any arguments
example
onSpeechStart(() => {console.log("speech started")})
​
onSpeechEnd
function
callback function for whenever user is done speaking
does not have any arguments
example
onSpeechEnd(() => {console.log("speech ended")})
​
onMessage
function
callback for whenever there is a new message added to the conversation
for example when the user’s speech is transcribed, or when the agent’s response is recieved
example
onMessage((message) => {console.log(message)})
// {"role": "user", "text": "Hello there"}
​
onFunctionCall
function
callback for whenever the agent decides to call a function
has the name - function name and args - arguments of the function as parameters
example
onFunctionCall((name, args) => {console.log(name, args)})