> ## Documentation Index
> Fetch the complete documentation index at: https://docs.moss.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React components

> Drop the Founding Agent voice UI onto your site with the React provider and bubble.

## 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](/docs/founding-agent/embed/server-token-route); it defaults to `/api/moss-token`.

<CodeGroup>
  ```tsx Next.js App Router theme={null}
  // 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>
    );
  }
  ```

  ```tsx Any React app theme={null}
  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>
    );
  }
  ```
</CodeGroup>

## MossFoundingAgentProvider

<ParamField path="publishableKey" type="string" required>
  Your `pk_...` key. Safe to expose in the browser.
</ParamField>

<ParamField path="tokenEndpoint" type="string" default="/api/moss-token">
  Your server route that mints the session (see the [server token route](/docs/founding-agent/embed/server-token-route) page).
</ParamField>

<ParamField path="serviceUrl" type="string">
  Optional override of the Moss service base. Leave unset in production.
</ParamField>

## MossFoundingAgentBubble

<ParamField path="position" type="&#x22;inline&#x22; | &#x22;fixed&#x22;">
  Inline renders the bubble in the page flow; fixed pins it to a corner of the viewport.
</ParamField>

<ParamField path="color" type="string" default="violet">
  Orb color preset. One of `violet`, `cobalt`, `teal`, `emerald`, `coral`, or `amber`.
</ParamField>

<ParamField path="themeMode" type="&#x22;light&#x22; | &#x22;dark&#x22; | &#x22;system&#x22;">
  Color scheme for the widget.
</ParamField>

<ParamField path="hideOnSelector" type="string">
  Optional CSS selector. The bubble hides while a matching element is visible on the page.
</ParamField>

## Live transcript

Add `<MossLiveTranscript />` as a child of the provider to render the running transcript.

```tsx theme={null}
// 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

<Note>
  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.
</Note>

## Next steps

<CardGroup cols={1}>
  <Card title="Demo booking" icon="calendar" href="/docs/founding-agent/embed/booking">
    Let visitors book a demo by voice, backed by your Cal.com calendar.
  </Card>
</CardGroup>