Skip to main content

​
Minimal example

Wrap your app in MossFoundingAgentProvider and place MossFoundingAgentBubble anywhere inside it. Both are exported from the /react subpath. Point tokenEndpoint at your server token route; it defaults to /api/moss-token. 
// app/layout.tsx
"use client";
import {
  MossFoundingAgentBubble,
  MossFoundingAgentProvider,
} from "@moss-tools/founding-agent/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <MossFoundingAgentProvider publishableKey="pk_your_publishable_key">
      {children}
      <MossFoundingAgentBubble color="emerald" />
    </MossFoundingAgentProvider>
  );
}

import {
  MossFoundingAgentBubble,
  MossFoundingAgentProvider,
} from "@moss-tools/founding-agent/react";

export default function App() {
  return (
    <MossFoundingAgentProvider
      publishableKey="pk_your_publishable_key"
      tokenEndpoint="/your/token/endpoint"
    >
      <MossFoundingAgentBubble color="emerald" />
    </MossFoundingAgentProvider>
  );
}

​
MossFoundingAgentProvider

​
publishableKey
string
required
Your pk_... key. Safe to expose in the browser.
​
tokenEndpoint
string
default:"/api/moss-token"
Your server route that mints the session (see the server token route page).
​
serviceUrl
string
Optional override of the Moss service base. Leave unset in production.

​
MossFoundingAgentBubble

​
position
"inline" | "fixed"
Inline renders the bubble in the page flow; fixed pins it to a corner of the viewport.
​
color
string
default:"violet"
Orb color preset. One of violet, cobalt, teal, emerald, coral, or amber.
​
themeMode
"light" | "dark" | "system"
Color scheme for the widget.
​
hideOnSelector
string
Optional CSS selector. The bubble hides while a matching element is visible on the page.

​
Live transcript

Add <MossLiveTranscript /> as a child of the provider to render the running transcript. 
// app/layout.tsx
"use client";
import {
  MossFoundingAgentBubble,
  MossFoundingAgentProvider,
  MossLiveTranscript,
} from "@moss-tools/founding-agent/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <MossFoundingAgentProvider publishableKey="pk_your_publishable_key">
      {children}
      <MossFoundingAgentBubble color="emerald" />
      <MossLiveTranscript />
    </MossFoundingAgentProvider>
  );
}

​
Custom UI

If you want to build your own controls, useVoiceAgentStore from @moss-tools/founding-agent/react exposes read-only state including connectionState, voiceState, and transcript. Import the hook inside a component that is already wrapped by the provider.

​
Advanced experiences

Guided, conversation-driven site control (scrolling and navigating your site from within the call) is possible with Moss. Contact the Moss team to enable it.

​
Next steps

Demo booking

Let visitors book a demo by voice, backed by your Cal.com calendar.