Building your own UI - Ponder Docs

Wrap your _app.js or equivalent file in the PonderProvider - and pass in the headless prop, along with assistantId and host This will make the Ponder widget not render anywhere, but still give you access to its functionality

   import { PonderProvider } from "@ponderai/react";
   
   function App() {
     return (
       <PonderProvider
         assistantId="my‑assistant‑id"
         host="https://api.useponder.ai"   // or your self‑hosted server
         headless
       >
         <YourRoutes />
       </PonderProvider>
     );
   }

Now you can use the usePonder hook anywhere in your app for access the Ponder assistant. the usePonder hook exposes the following methods that will let you build your own UI :

connect() - Call this function to start a web call
disconnect() - Call this function to stop a web call
onConnected(() => {}) - Callback event called when the assistant is connected and starts listening
onDisconnected(() => {}) - Callback event called when the assistant is disconnected and stops listening
onSpeechStart(() => {}) - Callback function for the event when user speech start is detected
onSpeechEnd(() => {}) - same, but for when user speech end is detected
onMessage((msg) => {}) - Callback function whenever a new messages is added to the conversation
onFunctionCall((name, args) => {}) - Callback whenever the assistant decides to call a function

For example, here is a minimal “Talk to us” button

import { usePonder } from "@ponderai/react";
import { useState } from "react"
    
function App() {

  const ponder = usePonder()
  const [isListening, setIsListening] = useState(false)

  ponder.onConnected(() => {setIsListening(true)})
  ponder.onDisconnected(() => {setIsListening(false)})


  return (
    <div>
      <button onClick = {isListening ? ponder.disconnect : ponder.connect}>
        {isListening ? "..listening" : "Talk to us"}
      </button>
    </div>
  );
}

export default App;

Refer to the API Reference page for full reference.