@alphatrait/react
v0.1.25
Published
Floating bug reporter UI for TesterKit — mounts the draggable bug icon, screenshots, and submit rail.
Readme
@alphatrait/react
Floating bug reporter UI for TesterKit — same draggable icon, action rail, screenshots, and submit flow as the stk demo.
BugKit.init() alone does not show any UI — you need this package.
Install
npm install @alphatrait/sdk@^0.1.2 @alphatrait/react@^0.1.2Use published npm packages only. Do not create local shims named @alphatrait/react.
Styles
Bundled in v0.1.2+ — no Tailwind @source required on customer sites.
If the reporter looks unstyled:
// app/layout.tsx
import "@alphatrait/react/styles.css";Environment
Ingest keys are publishable (browser-visible). All must be NEXT_PUBLIC_* in Next.js:
NEXT_PUBLIC_TESTERKIT_PROJECT_ID=your-project-id
NEXT_PUBLIC_TESTERKIT_API_URL=https://stk.alphatrait.com
NEXT_PUBLIC_ALPHA_STK_KEY=tk_...Redeploy after changing env. Do not use ALPHA_STK_KEY alone (causes 401).
Next.js App Router
next.config.ts:
transpilePackages: ["@alphatrait/react", "@alphatrait/sdk"],app/testerkit-provider.tsx:
"use client";
import { TesterKitReporter } from "@alphatrait/react";
export function TesterKitProvider({ children }: { children: React.ReactNode }) {
return (
<>
<TesterKitReporter
projectId={process.env.NEXT_PUBLIC_TESTERKIT_PROJECT_ID}
apiKey={process.env.NEXT_PUBLIC_ALPHA_STK_KEY}
apiBaseUrl={process.env.NEXT_PUBLIC_TESTERKIT_API_URL}
/>
{children}
</>
);
}app/layout.tsx:
import { TesterKitProvider } from "./testerkit-provider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<TesterKitProvider>{children}</TesterKitProvider>
</body>
</html>
);
}Read env in your provider file so Next.js inlines values at build time.
Do not call BugKit.init() separately.
Full checklist: docs/CUSTOMER-INTEGRATION.md (monorepo) or stk admin Generate key copy blocks.