Examples
Runnable React and vanilla JS demos, plus inline snippets for the three most common use cases
Two end-to-end demos ship with the SDK repo at github.com/SigSentry/sdk. Use them as a starting point or to verify your API key works before integrating.
Runnable demos
React demo
Vite + React app showing widget, modal/slideout trigger, and a custom hook UI side-by-side. Lives at examples/react-demo in the SDK repo.
Embed demo
Plain HTML page using the vanilla JS embed. No build step. Lives at examples/embed-demo in the SDK repo.
Running the React demo
git clone https://github.com/SigSentry/sdk.git
cd sdk
pnpm install
cd examples/react-demo && pnpm devThen open http://localhost:5173. Set your API key in
examples/react-demo/src/App.tsx.
Running the embed demo
git clone https://github.com/SigSentry/sdk.git
cd sdk
pnpm install
pnpm build
open examples/embed-demo/index.htmlThe embed demo loads the prebuilt SDK directly from disk, so pnpm build
needs to run once before the HTML page works.
Common use cases
1. Drop-in widget
Simplest possible integration — provider plus widget.
import { SigSentryProvider, AnalysisWidget } from '@sigsentry/react';
export function App(): JSX.Element {
return (
<SigSentryProvider apiKey={process.env.NEXT_PUBLIC_SIGSENTRY_KEY!} theme="auto">
<AnalysisWidget defaultTimeRange="1h" showFollowUp />
</SigSentryProvider>
);
}2. Trigger button + modal
Hide the form behind a button. Best for support toolbars and floating action buttons.
import { SigSentryProvider, SigSentryTrigger } from '@sigsentry/react';
export function SupportToolbar(): JSX.Element {
return (
<SigSentryProvider apiKey={process.env.NEXT_PUBLIC_SIGSENTRY_KEY!}>
<SigSentryTrigger
mode="modal"
label="Diagnose Error"
defaultTimeRange="30m"
/>
</SigSentryProvider>
);
}3. Custom UI with the hook
Programmatic control — no bundled UI, just the analysis flow.
'use client';
import { useSigSentry, useSigSentryContext, AnalysisResultDisplay } from '@sigsentry/react';
export function CustomFlow(): JSX.Element {
const { client } = useSigSentryContext();
const { submitAnalysis, status, result, isLoading } = useSigSentry({ client });
async function run(): Promise<void> {
await submitAnalysis({
description: 'Checkout returning 500 errors',
timeStart: new Date(Date.now() - 60 * 60 * 1000),
timeEnd: new Date(),
});
}
return (
<div>
<button onClick={run} disabled={isLoading}>
{isLoading ? `Working… (${status})` : 'Run analysis'}
</button>
{result && <AnalysisResultDisplay result={result} />}
</div>
);
}4. Vanilla JS embed
One-script integration for non-React stacks.
<div id="diagnose"></div>
<script src="https://embed.sigsentry.com/v1/embed.js"></script>
<script>
SigSentry.init({
target: '#diagnose',
apiKey: 'ss_pub_...',
mode: 'inline',
theme: 'auto',
});
</script>