Moss - Real-time Semantic Search for Conversational AI

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

string

required

Your pk_... key. Safe to expose in the browser.

string

default:"/api/moss-token"

Your server route that mints the session (see the server token route page).

string

Optional override of the Moss service base. Leave unset in production.

MossFoundingAgentBubble

"inline" | "fixed"

Inline renders the bubble in the page flow; fixed pins it to a corner of the viewport.

string

default:"violet"

Orb color preset. One of violet, cobalt, teal, emerald, coral, or amber.

"light" | "dark" | "system"

Color scheme for the widget.

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.

Getting Started

Build in the Portal

Embed on your site

Integrations & Billing

React components

Minimal example

MossFoundingAgentProvider

MossFoundingAgentBubble

Live transcript

Custom UI

Advanced experiences

Next steps

Demo booking

​Minimal example

​MossFoundingAgentProvider

​MossFoundingAgentBubble

​Live transcript

​Custom UI

​Advanced experiences

​Next steps

Demo booking

Minimal example

MossFoundingAgentProvider

MossFoundingAgentBubble

Live transcript

Custom UI

Advanced experiences

Next steps