@plott-ai/sdk-react

React SDK for Plott Analytics - easily track analytics events in your React applications.

Installation

npm install @plott/sdk-react
# or
yarn add @plott/sdk-react
# or
pnpm add @plott/sdk-react
# or
bun add @plott/sdk-react

Quick Start

1. Wrap your app with the provider

import { PlottAnalyticsProvider } from "@plott-ai/sdk-react";

function App() {
  return (
    <PlottAnalyticsProvider config={{ apiKey: "cpk_your_api_key" }}>
      <YourApp />
    </PlottAnalyticsProvider>
  );
}

2. Track events using hooks

import { useTrackMessage, useTrackEvent } from "@plott-ai/sdk-react";

function ChatComponent() {
  const trackMessage = useTrackMessage();

  const handleSend = (content: string) => {
    // Track user message
    trackMessage({
      role: "user",
      content,
      sessionId: "session-123",
    });
  };

  const handleAssistantResponse = (content: string) => {
    // Track assistant response
    trackMessage({
      role: "assistant",
      content,
      model: "gpt-4",
      tokenCount: 150,
    });
  };

  return <Chat onSend={handleSend} />;
}

API Reference

PlottAnalyticsProvider

Wrap your application with this provider to enable analytics tracking.

<PlottAnalyticsProvider
  config={{
    apiKey: "cpk_...",
    debug: true, // Optional: enable debug logging
  }}
>
  <App />
</PlottAnalyticsProvider>

usePlottAnalytics

Access the underlying PlottAnalytics client for advanced use cases.

const { client, isReady } = usePlottAnalytics();

useTrackEvent

Track any analytics event.

const trackEvent = useTrackEvent();
trackEvent({ type: "CUSTOM", value: { action: "custom" } });

useTrackMessage

Track message events (user, assistant, system messages).

const trackMessage = useTrackMessage();
trackMessage({
  role: "user",
  content: "Hello!",
  sessionId: "session-123",
});

useTrackUIEvent

Track UI interaction events.

const trackUI = useTrackUIEvent();
trackUI({
  action: "click",
  element: "submit-button",
});

useTrackErrorEvent

Track error events.

const trackError = useTrackErrorEvent();
trackError({
  error: { name: "ValidationError", message: "Invalid input" },
  severity: "medium",
});

License

MIT