Quickstart

Ponder is a tool that lets developers add voice assistants to their application with minimal effort.

With Ponder, you can build rich voice-based experiences via natural sounding assistants that can take actions such as calling functions, APIs, populating text, pressing buttons, scrolling, navigating, or basically anything that can be wrapped in a JavaScript function.

This lets your users get assistance by simply talking to your application, as they would with a human.

Traditionally, setting up a voice assistant meant wrestling with async websockets, integrating with language models, handling function calling on the frontend, keeping the voice realistic and contextual, and somehow getting the latency down to 400-500ms. Ponder takes away all that pain—so you can focus on building great user experiences, not maintaining complex infrastructure.

Step 1

Create an account and login to Ponder

Create a new assistant and give him/her a name

Create a system prompt that will govern your assistant's knowledge, tone and behaviour.
Fill this up as if instructing a customer service employee, the more detailed the better

Step 2

Install the Ponder react package

npm install @ponderai/react

Import the PonderProvider and wrap your app in it. Pass in the assistantID of the assistant that you just created
In this example we are wrapping it directly in _app.js so that the entire app has access to Ponder
If you want only specific pages to have access to Ponder then pass those paths using includePaths

For example this snippet will render the ponder button only on the home page:

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;

Congrats! Now have the Ponder box at the bottom right of the screen that you can talk to! 🎉🎉🎉

In the next step we will see how the assistant can take actions

Step 3

Now you can use the usePonder hook anywhere in your application to set actions and instructions for the assistant

const ponder = usePonder()

Ponder maintains two states - actions and instructions.

Actions are functions that the assistant can execute,
Instructions are appended to the system prompt and are used to guide the assistant's current context

Use the updateInstructions and updateActions methods to set them on any page
Here is an example:

import { useEffect } from "react";
import { usePonder } from "@ponderai/react";

function MyPage() {
  const ponder = usePonder();

  useEffect(() => {
    const ponderActions = [
      {
        name: "goToPricingPage",
        description: "Call this function if the user asks about pricing",
        arguments: [],
        function: () => {
          window.location.href = "/pricing";
        }
      },
      {
        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
          }
        ],
        function: searchDocs
      },
    ];

    ponder.updateInstructions("This is the home page of Ponder. Help the user understand the product better. Ask them if they are a developer.");
    ponder.updateActions(ponderActions);
  }, [ponder]);

  // ...rest of your component
}

Now the assistant will be able to take the actions that you defined above.

Make sure to update the actions and instructions states as the user navigates through your application.

That wraps up the quickstart! This is a simple example, but in practice you can pass any javascript function as an action.
You can also pass in arguments to the function, and if you tag them as required, the assistant will ask the user for them before executing the action.
You can also use the assistant to fill up forms, press buttons, scroll, navigate or anything else that you can do with javascript!