# Next.js: hosted browser module

The public `@bugtape/sdk` npm package is not published. Use the hosted browser module. This recipe adds no npm dependency and keeps the SDK out of server execution.

## Initialize once in the root layout

Create `app/bugtape-provider.tsx` and render `<BugTapeProvider />` once from `app/layout.tsx`, after applying your application's consent policy. Replace the placeholder with the project capture key shown in BugTape Setup.

```tsx
import Script from 'next/script';

export function BugTapeProvider() {
  return (
    <Script id="bugtape" type="module" strategy="afterInteractive">
      {`
        import { init } from 'https://app.bugtape.ai/bugtape.mjs';
        init({
          apiKey: 'YOUR_PROJECT_KEY',
          onSuccess(response) {
            console.info('BugTape capture accepted', response.id, response.captureId);
          },
          onError(error) {
            console.warn('BugTape capture failed', error.message);
          }
        });
      `}
    </Script>
  );
}
```

Next.js loads an `afterInteractive` script in the browser. The stable `id` supports its inline-script handling. See the [Next.js Script contract](https://nextjs.org/docs/app/api-reference/components/script).

This minimal recipe owns capture for the root layout's lifetime. If your application can withdraw recording consent or unmount the recording surface, keep the returned SDK instance in that lifecycle and call `destroy()` when recording stops. Do not render multiple providers or combine this recipe with a second global error reporter.

Do not put agent tokens, AI provider keys or encryption passphrases in the script. Project capture keys permit ingestion; they do not grant console access. `encryptionKey` is unsupported. An empty `onSubmit` callback replaces and suppresses default delivery; use `onSuccess` to observe acknowledgements.

## Verify the integration

Run your normal Next.js build. In a local or staging browser page, use a button to throw a uniquely named error. Confirm the acknowledgement, then inspect its matching occurrence and captured context in the correct BugTape project. A Setup console sample does not verify this installation. See the [quickstart verification steps](../../quickstart.md).

The local fresh-agent trial exercised the underlying hosted browser module. This Next.js recipe has been checked for syntax and against framework documentation; a full Next.js runtime trial remains a separate check.

## If you need a server proxy

A proxy must authenticate your app's users, apply request-size and rate limits, bind tenant context from the server session, propagate cancellation, and forward only to the configured BugTape origin. Keep its capture key server-side. It is not a way to grant users BugTape console access.

Point the browser SDK's `endpoint` at your reviewed proxy and handle its ingest response. Account for the SDK's related presence/summary requests or configure those features explicitly. The older provider/reporter/proxy files in the source repository are historical sketches, not the supported installation recipe; they are not published with this guide.