> ## 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.

# API Reference

> Reference documentation for Ponder's Web SDK

### Installation

Install the Ponder web sdk using NPM

`npm install @ponderai/web`

## `Ponder`

The `Ponder` class is the main class that exposes all Ponder's functionality

```javascript example
const ponder = new Ponder({ assistantId: assistantId, host: host })
```

### Params

<ResponseField name="assistantId" type="string">
  the id of the assistant that is created on the dashboard
</ResponseField>

<ResponseField name="host" type="string">
  url of the Ponder backend, usually [https://api.useponder.ai](https://api.useponder.ai) unless self hosted
</ResponseField>

<ResponseField name="instructions" type="string">
  instructions for the agent, these get added to the system prompt from the dashboard
</ResponseField>

<ResponseField name="actions" type="array">
  a list of actions / function the agent can call. format is the same as react sdk - refer it for schema
</ResponseField>

### Properties

<ResponseField name="connect" type="function">
  starts a web call

  ```javascript example
  ponder.connect()
  ```
</ResponseField>

<ResponseField name="disconnect" type="function">
  stops a web call

  ```javascript example
  ponder.disconnect()
  ```
</ResponseField>

<ResponseField name="onConnected" type="callback">
  callback function called when the call is connected and the agent is listening

  ```javascript example
  onConnected(() => {console.log("ponder connected")})
  ```
</ResponseField>

<ResponseField name="onDisconnected" type="callback">
  callback function called when the call is disconnected and the agent is no longer listening

  ```javascript example
  onDisconnected(() => {console.log("ponder disconnected")})
  ```
</ResponseField>

<ResponseField name="onSpeechStart" type="function">
  callback function for whenever user speech start is detected<br />
  does not have any arguments

  ```javascript example
  onSpeechStart(() => {console.log("speech started")})
  ```
</ResponseField>

<ResponseField name="onSpeechEnd" type="function">
  callback function for whenever user is done speaking <br />
  does not have any arguments

  ```javascript example
  onSpeechEnd(() => {console.log("speech ended")})
  ```
</ResponseField>

<ResponseField name="onMessage" type="function">
  callback for whenever there is a new message added to the conversation <br />
  for example when the user's speech is transcribed, or when the agent's response is recieved

  <Expandable title="params">
    <ResponseField name="callback" type="function">
      The function to be called when messages change. The callback takes a `message` argument
    </ResponseField>
  </Expandable>

  ```javascript example
  onMessage((message) => {console.log(message)})
  // {"role": "user", "text": "Hello there"}
  ```
</ResponseField>

<ResponseField name="onFunctionCall" type="function">
  callback for whenever the agent decides to call a function<br />
  has the `name` - function name and `args` - arguments of the function as parameters

  ```javascript example
  onFunctionCall((name, args) => {console.log(name, args)})
  ```
</ResponseField>