> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useponder.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Building your own UI

> If you don't want to use the Ponder widget but build your own UI, follow this guide

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

```javascript
   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 :

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

For example, here is a minimal "Talk to us" button

```javascript
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.