​
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)})