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

# React Setup

> Install the Milana SDK in a React app using MilanaProvider and hooks.

<Steps>
  <Step title="Get your Product ID and Client Key">
    Open your [Milana Settings](https://app.getmilana.ai/settings) page.

    Copy your **Product ID** (starts with `prd_`) and your **Client Key** (starts with `key_`).
  </Step>

  <Step title="Install the SDK">
    ```bash theme={null}
    npm install milana-js
    ```
  </Step>

  <Step title="Add the provider">
    Wrap your application with `MilanaProvider` near the root of the component tree:

    ```tsx theme={null}
    import { MilanaProvider } from "milana-js/react";

    function App() {
      return (
        <MilanaProvider
          productId="prd_YOUR_PRODUCT_ID"
          clientKey="key_YOUR_CLIENT_KEY"
          sessionInfo={{
            environment: "production",
            version: "1.0.0",
          }}
        >
          <YourApp />
        </MilanaProvider>
      );
    }
    ```

    <Note>
      Your Client Key is a public identifier meant to be included in client-side code. It does not grant access to your data.
    </Note>

    <Note>
      If your site sends a `Content-Security-Policy` header, add `https://in.getmilana.ai` to `connect-src` so the SDK can send recorded data.
    </Note>
  </Step>

  <Step title="Identify users">
    When user information is available, use the `useMilana()` hook to identify the user:

    ```tsx theme={null}
    import { useMilana } from "milana-js/react";

    function Dashboard() {
      const { user } = useAuth();
      const { identify } = useMilana();

      useEffect(() => {
        if (user) {
          void identify({
            userId: user.id,
            email: user.email,
            name: user.name,
            metadata: {
              createdAt: user.createdAt,
            },
          });
        }
      }, [user, identify]);

      return <>{/* ... */}</>;
    }
    ```
  </Step>

  <Step title="Verify in the dashboard">
    Open the [Integration](https://app.getmilana.ai/integration) page. Within a few seconds of loading a page with the SDK, a new session should appear under **Latest Sessions**.

    If you don't see sessions after a minute:

    * Open the browser console and look for `Milana:` log messages
    * Confirm you see `Milana: Ready` in the console
    * Check that your Product ID starts with `prd_` and your Client Key starts with `key_`
    * See the [Troubleshooting](/troubleshooting) guide for more help
  </Step>
</Steps>

***

## Feature-flagged rollout

To roll out Milana gradually or target specific user segments/flows, see the [Feature-flagged Rollout](/guides/rollout) guide.

***

## useMilana hook

| Property        | Type                                                             | Description                                                                                                  |
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `initialize`    | `() => Promise<{ success: boolean }>`                            | Trigger initialization manually (for deferred init). One-shot; subsequent calls return `{ success: false }`. |
| `isInitialized` | `boolean`                                                        | `true` after initialization has completed successfully.                                                      |
| `identify`      | `(input: IdentifyInput) => Promise<{ success: boolean }>`        | Associate the session with a known user. See [`identify`](/sdk/identify).                                    |
| `updateUser`    | `(user: UserUpdate) => Promise<{ success: boolean }>`            | Refresh user identity. See [`updateUser`](/sdk/update-user).                                                 |
| `updateSession` | `(session: SessionUpdate) => Promise<{ success: boolean }>`      | Push session metadata. See [`updateSession`](/sdk/update-session).                                           |
| `trackEvent`    | `(eventName: string, attributes?: TrackEventAttributes) => void` | Track a custom event. Calls are queued until initialization completes.                                       |
| `stopRecording` | `() => Promise<{ success: boolean }>`                            | End the current session; next `initialize()` starts a fresh one. See [`stopRecording`](/sdk/stop-recording). |
| `update`        | `(payload: UpdatePayload) => Promise<{ success: boolean }>`      | **Deprecated** — prefer `identify` / `updateUser` / `updateSession`. See [`update`](/sdk/update).            |

### useMilanaOptional

`useMilanaOptional()` returns `MilanaContextValue | null`. Returns `null` when used outside a `MilanaProvider`. Useful for shared components that may render in apps that don't use Milana.

***

## What's next

<CardGroup cols={2}>
  <Card title="Track custom events" icon="bolt" href="/sdk/track-events">
    Mark important actions so the AI can surface them in query results.
  </Card>

  <Card title="Privacy controls" icon="shield" href="/sdk/privacy">
    Block, mask, or ignore sensitive elements in recordings.
  </Card>
</CardGroup>