> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bryel.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# @bryel/browser

> Client-side tracing for AI-SDK apps that run the agent in the browser.

API reference for the browser SDK's exports and options. For end-to-end setup, see the [Browser guide](/frameworks/browser).

## Install

<CodeGroup>
  ```bash bun theme={"theme":{"light":"github-light","dark":"github-dark"}}
  bun add @bryel/browser
  ```

  ```bash npm theme={"theme":{"light":"github-light","dark":"github-dark"}}
  npm i @bryel/browser
  ```

  ```bash pnpm theme={"theme":{"light":"github-light","dark":"github-dark"}}
  pnpm add @bryel/browser
  ```

  ```bash yarn theme={"theme":{"light":"github-light","dark":"github-dark"}}
  yarn add @bryel/browser
  ```
</CodeGroup>

## createBryelTracer

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
createBryelTracer(options): Tracer
```

Returns an OpenTelemetry `Tracer` to pass into the AI SDK's `experimental_telemetry.tracer`. No global registration — build it where you trace, so there is no app-boot cost.

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
import { createBryelTracer } from "@bryel/browser";

const tracer = createBryelTracer({ apiKey: "bkp_…", serviceName: "studio-agent" });

await streamText({
  model,
  experimental_telemetry: { isEnabled: true, tracer, metadata: { sessionId, userId } },
  prompt,
});
```

## registerBryelBrowser

```ts theme={"theme":{"light":"github-light","dark":"github-dark"}}
registerBryelBrowser(options): WebTracerProvider
```

Registers a global browser tracer provider. Use only when the app has no other OpenTelemetry setup; then `experimental_telemetry: { isEnabled: true }` (without a `tracer`) routes through bryel. Returns the provider so you can `forceFlush()` / `shutdown()` on unload.

## Options

Both functions take the same options.

<ParamField path="apiKey" type="string" required>
  A **publishable** key (`bkp_…`) — write-only and origin-locked. Never a secret `bk_` key; a browser bundle is public.
</ParamField>

<ParamField path="endpoint" type="string" default="https://ingest.eu.bryel.ai/v1/traces">
  OTLP/HTTP traces endpoint. Override for self-hosting.
</ParamField>

<ParamField path="serviceName" type="string">
  OpenTelemetry `service.name` stamped on the resource.
</ParamField>

<ParamField path="headers" type="Record<string, string>">
  Extra headers, merged after the auth header.
</ParamField>

## Telemetry metadata

The same `metadata` fields as the server SDK group and join your data:

<ParamField path="sessionId" type="string">
  Groups multiple calls into one conversation.
</ParamField>

<ParamField path="userId" type="string">
  The end user behind the run.
</ParamField>

<ParamField path="messageId" type="string">
  A per-turn id you mint, used to attach [feedback](/guides/feedback).
</ParamField>

<Note>The browser SDK reuses the `@bryel/vercel` mapper, so a browser-emitted span lands in bryel identically to a server one.</Note>