@prismai/record-api

v0.1.3

Published

8 months ago

Public API package for Prism recording. This package exposes a clean, stable API surface for integrating Prism recording into React applications.

0High
0Medium
0Low

rajitk

landkittipak

aliu19

@prism/record-api

Public API package for Prism recording. This package exposes a clean, stable API surface for integrating Prism recording into React applications.

Basic Usage

import { PrismProvider, usePrismRecorder } from "@prism/record-api";

// In your app
function App() {
  return (
    <PrismProvider
      config={{
        projectId: "your-project-id",
        apiKey: "your-api-key",
      }}
    >
      <YourApp />
    </PrismProvider>
  );
}

// In your components
function RecordingControls() {
  const { stopRecording, isRecording, updateVisitorInfo } = usePrismRecorder();

  return (
    <div>
      {isRecording ? (
        <button onClick={stopRecording}>Stop Recording</button>
      ) : (
        <div>Recording stopped</div>
      )}

      <button
        onClick={() =>
          updateVisitorInfo({
            email: "[email protected]",
            name: "Example User",
          })
        }
      >
        Set User Info
      </button>
    </div>
  );
}

Framework Adapters

Next.js Page Router

For Next.js applications using the traditional Pages Router:

import { PrismProvider, PrismPageRouterProvider } from "@prism/record-api";

function App({ Component, pageProps }) {
  return (
    <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
      <PrismPageRouterProvider>
        <Component {...pageProps} />
      </PrismPageRouterProvider>
    </PrismProvider>
  );
}

Next.js App Router

For Next.js applications using the App Router:

import { PrismProvider, AppRouterAdapter } from "@prism/record-api";

function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
          <AppRouterAdapter>
            {children}
          </AppRouterAdapter>
        </PrismProvider>
      </body>
    </html>
  );
}

React Router

For applications using React Router (v5 or v6):

import { PrismProvider, ReactRouterAdapter } from "@prism/record-api";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
        <ReactRouterAdapter>
          <YourRoutes />
        </ReactRouterAdapter>
      </PrismProvider>
    </BrowserRouter>
  );
}

Generic SPA

For any other single-page application framework:

import { PrismProvider, GenericSPAAdapter } from "@prism/record-api";

function App() {
  return (
    <PrismProvider config={{ projectId: "your-project-id", apiKey: "your-api-key" }}>
      <GenericSPAAdapter>
        <YourApp />
      </GenericSPAAdapter>
    </PrismProvider>
  );
}

API Reference

This package includes:

Components

PrismProvider - The main provider that initializes the recording
PrismErrorBoundary - Error boundary to prevent recorder issues from affecting your app

Adapters

PrismPageRouterProvider - For Next.js Pages Router apps
AppRouterAdapter - For Next.js App Router apps
ReactRouterAdapter - For apps using React Router
GenericSPAAdapter - For other single-page applications

Hooks

usePrismRecorder - Main hook to control recording and update user info
usePageRouterRecorder - For advanced Page Router integration

Types

PrismConfig - Configuration options for the recorder
PrismSession - Recording session information
VisitorInfo - User/visitor identification information
PrismRecorderHook - Type for the object returned by usePrismRecorder

Enums

PrismEnvironment - Environment options (PRODUCTION, STAGING, LOCAL)