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

# Add EEG to an existing browser app

> Step by step, wire Elata EEG processing into a browser app and verify the WASM path works.

Use this page if you already have a browser app and want the recommended
existing-app EEG integration path.

If you want the scaffold path instead, use [Quickstart](/sdk/tutorials/first-app). If you
only need the package model first, use [EEG In A Browser App](/sdk/guides/eeg-browser).

This tutorial shows the recommended path for adding
`@elata-biosciences/eeg-web` to an existing browser application.

EEG is **optional** in the typical Elata journey. **Camera rPPG** is the usual
primary integration unless your product needs brain-signal features.

Use this when your app needs EEG analysis APIs in the browser.
If you also need live headset transport, you will add
`@elata-biosciences/eeg-web-ble` after this tutorial.

## What You Will Build

You will:

1. install `@elata-biosciences/eeg-web`
2. initialize the EEG WASM runtime
3. run a simple analysis call
4. verify your app can serve the packaged WASM assets

## Step 1: Install The Package

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm add @elata-biosciences/eeg-web
  ```

  ```bash npm theme={null}
  npm install @elata-biosciences/eeg-web
  ```
</CodeGroup>

## Step 2: Create A Small EEG Module

Create a small module in your app so the integration stays isolated and easy to
test (for example `src/eeg.ts`):

```ts eeg.ts theme={null}
import { initEegWasm, band_powers } from "@elata-biosciences/eeg-web";

let eegInitPromise: Promise<void> | null = null;

async function ensureEegReady() {
  if (!eegInitPromise) {
    eegInitPromise = initEegWasm();
  }
  await eegInitPromise;
}

export async function analyzeExampleEeg() {
  await ensureEegReady();

  const eegData = new Float32Array([0.2, 0.5, 0.1, -0.3, -0.4, 0.1, 0.2, 0.6]);
  const powers = band_powers(eegData, 256);

  return powers;
}
```

Why this shape:

* `initEegWasm()` should run before using analysis helpers
* the module-level Promise avoids repeated initialization, including concurrent calls
* keeping it in one file makes it easier to swap in real samples later

## Step 3: Call It From Your UI

For example, in a component or entry file:

```ts theme={null}
import { analyzeExampleEeg } from "./eeg";

const powers = await analyzeExampleEeg();
console.log("alpha", powers.alpha);
console.log("beta", powers.beta);
```

At this stage you are not using a real headset yet. You are proving that the
browser app can load the runtime and execute the EEG functions correctly.

## Step 4: Verify The WASM Asset Path

Run your app in development and confirm the module initializes without errors.

If `initEegWasm()` fails, the most likely problem is that your bundler or app
deployment is not serving the packaged `wasm/` assets correctly.

This is the first thing to fix before adding more product logic.

If you are using Vite, the two common fixes are:

1. add `vite-plugin-wasm` and `vite-plugin-top-level-await`, then keep using
   `await initEegWasm()`
2. import the WASM asset URL directly and pass it to `initEegWasm(wasmUrl)`

The guide at [EEG In A Browser App](/sdk/guides/eeg-browser) shows both patterns.

If you are stuck, compare your app against the scaffolded `eeg-demo`
app before assuming the package itself is broken.

## Step 5: Replace Example Data With Real App Data

Once the example call works, swap the placeholder array with actual EEG sample
buffers from your app.

The common pattern is:

1. receive or load EEG samples
2. normalize them into typed arrays
3. call Elata analysis helpers
4. map the result into app state, feedback, scoring, or visualizations

That last step is where your product behavior lives.

## When To Add `eeg-web-ble`

Add `@elata-biosciences/eeg-web-ble` when you need live browser transport from
a supported Muse-compatible headset.

Do not start there if the plain EEG runtime is not working yet. Get WASM
loading working first, then add transport.

## Common Problems

* `initEegWasm()` throws: your app is probably not loading packaged `wasm/` assets correctly
* You expected device discovery: `eeg-web` does not do Bluetooth transport by itself
* You are evaluating the SDK from scratch: start with [Build Your First Elata App](/sdk/tutorials/first-app) instead of manual setup

## Next

<CardGroup cols={3}>
  <Card title="Add Web Bluetooth" icon="bluetooth" iconType="light" href="/sdk/tutorials/eeg-ble-live-stream">
    Stream Muse EEG over BLE
  </Card>

  <Card title="eeg-web Reference" icon="brain" iconType="light" href="/sdk/eeg-web/getting-started">
    Package API and exports
  </Card>

  <Card title="EEG In A Browser" icon="book-open" iconType="light" href="/sdk/guides/eeg-browser">
    Integration overview
  </Card>
</CardGroup>