Quickstart

npm install @ponderai/react

import { PonderProvider } from "@ponderai/react";

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

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

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

  const collectEmail = (email) => {
      //.. email collection logic
      //.. can include a call to your backend
  }

  const goToPricingPage = () => {
      window.location.href = "/pricing";
  }

  ponder.setActions([
    {
      name: "goToPricingPage",
      description: "Call this function if the user asks about pricing",
      arguments: [],
      
    },
    {
      name: "collectEmail",
      description: "Call this function if the user is a developer and collect their email",
      arguments: [
        {
          name: "email",
          description: "The email of the user",
          type: "string",
          required: true
        }
      ],
      
    },
  ]);

  ponder.setInstructions("This is the home page of Ponder. Help the user understand the product better. Ask them if they are a developer.");

  ponder.onFunctionCall((name, args) => {

      switch (name) {
        case "collectEmail":
          collectEmail(args.email)
          break;
        
        case "goToPricingPage"
          goToPricingPage()
          break;
          
        default:
          console.warn(`No handler for function: ${name}`);
}
})

// ...rest of your component
}