# Add Session Recording

> |

- **Type:** Skill
- **Install:** `agentstack add skill-gotempsh-temps-add-session-recording`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [gotempsh](https://agentstack.voostack.com/s/gotempsh)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [gotempsh](https://github.com/gotempsh)
- **Source:** https://github.com/gotempsh/temps/tree/main/skills/add-session-recording
- **Website:** https://temps.sh/docs

## Install

```sh
agentstack add skill-gotempsh-temps-add-session-recording
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Add Session Recording

Implement privacy-aware session recording with `@temps-sdk/react-analytics` (rrweb under the hood).

> **Verified against the real published package.** A prior version of this skill documented `` and `startRecording`/`stopRecording`/`isRecording` — **none of those exist**. Confirm before changing:
> ```bash
> npm pack @temps-sdk/react-analytics@latest && tar -xzf temps-sdk-react-analytics-*.tgz \
>   && cat package/dist/types.d.ts package/dist/useSessionRecording.d.ts
> ```

## Installation

```bash
npm install @temps-sdk/react-analytics
```

## There are two ways to record — pick one

### A) Recommended: configure recording on the analytics provider

Recording is driven by the **main `TempsAnalyticsProvider`** via `enableSessionRecording` + `sessionRecordingConfig`. If the app already uses the analytics provider (see the `add-react-analytics` skill), just turn recording on — no second provider needed.

```tsx
// app/layout.tsx (Next App Router) — provider ships its own 'use client', layout stays a Server Component.
import { TempsAnalyticsProvider } from '@temps-sdk/react-analytics';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
          {children}
        
      
    
  );
}
```

> `basePath="/api/_temps"` is correct for apps deployed on Temps — the proxy ingests `/api/_temps/session-replay` directly. See the `add-react-analytics` skill for the full basePath explanation.

### B) User-toggleable recording (consent flows)

For an explicit on/off toggle, use the separate `SessionRecordingProvider`. **Its real props are only `defaultEnabled` and `persistPreference`** — masking/blocking is still configured on the analytics provider's `sessionRecordingConfig`.

```ts
// Real signatures:
function SessionRecordingProvider(props: {
  children: React.ReactNode;
  defaultEnabled?: boolean;
  persistPreference?: boolean;   // remember the user's choice in localStorage
}): JSX.Element;

function useSessionRecordingControl(defaultEnabled?: boolean): {
  isEnabled: boolean;
  enable: () => void;
  disable: () => void;
  toggle: () => void;
};
```

```tsx
'use client';
import { SessionRecordingProvider, useSessionRecordingControl } from '@temps-sdk/react-analytics';

export function RecordingRoot({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

function RecordingControls() {
  const { isEnabled, toggle } = useSessionRecordingControl();
  return (
    {isEnabled ? 'Stop' : 'Start'} Recording
  );
}
```

> ⚠️ The control hook returns `{ isEnabled, enable, disable, toggle }` — **not** `{ isRecording, startRecording, stopRecording, toggleRecording }`. `useSessionRecording()` (no "Control") returns `{ isRecordingEnabled, enableRecording, disableRecording, toggleRecording, sessionId }` instead.

## Privacy controls

Masking/blocking uses the CSS classes configured in `sessionRecordingConfig` (defaults: `rr-block`, `rr-mask`, `rr-ignore`).

```tsx
// Block entirely (placeholder in replay)

  
  

// Mask text content (asterisks in replay)
{socialSecurityNumber}

// Ignore from recording

```

> ⚠️ `data-rr-block` / `data-rr-mask` attribute selectors are **not** wired by default — use the configured CSS classes, or set custom selectors via `sessionRecordingConfig`.

## GDPR consent flow

```tsx
'use client';
import { useSessionRecordingControl } from '@temps-sdk/react-analytics';
import { useState, useEffect } from 'react';

function ConsentBanner() {
  const [show, setShow] = useState(false);
  const { enable, disable } = useSessionRecordingControl();

  useEffect(() => {
    const consent = localStorage.getItem('session_recording_consent');
    if (consent === null) setShow(true);
    else if (consent === 'true') enable();
  }, [enable]);

  if (!show) return null;
  return (
    
      We record sessions to improve your experience.
      
         { localStorage.setItem('session_recording_consent', 'true'); enable(); setShow(false); }}>Accept
         { localStorage.setItem('session_recording_consent', 'false'); disable(); setShow(false); }}>Decline
      
    
  );
}
```

## Conditional recording

```tsx
// Only in production (via the analytics provider)

// Only for some users — gate the SessionRecordingProvider default

// Exclude specific pages — use sessionRecordingConfig.excludedPaths instead of toggling per-route
sessionRecordingConfig={{ excludedPaths: ['/checkout', '/account/billing'] }}
```

## Verification

1. DevTools → Network: look for POSTs to `/api/_temps/session-replay`.
2. Interact with the app to generate events.
3. Open the session replay in the Temps dashboard.
4. Confirm masked/blocked elements are obscured in the replay.

> The ingest endpoint is `/api/_temps/session-replay` — **not** `/api/_temps/recordings`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [gotempsh](https://github.com/gotempsh)
- **Source:** [gotempsh/temps](https://github.com/gotempsh/temps)
- **License:** Apache-2.0
- **Homepage:** https://temps.sh/docs

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-gotempsh-temps-add-session-recording
- Seller: https://agentstack.voostack.com/s/gotempsh
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.