> ## 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.

# Build your first Elata App

> Scaffold a working app first, then use it as the reference point for deeper SDK integration.

Use this page if you are new to the SDK and want one successful scaffolded app
running locally before you integrate anything manually.

If you want the full map (**rPPG primary**, **EEG optional**, **Bluetooth to
connect a headset**) with scaffold vs step-by-step vs overview, use
[Build A Browser App](/sdk/overview).

The goal is simple: get a working app running locally, understand which
template maps to which sensor workflow, and know where to go next.

## What You Will Build

You will scaffold one of the published starter apps with
`@elata-biosciences/create-elata-demo`.

Pick the template that matches your goal:

* `rppg-demo`: **primary**: camera-based pulse/rPPG app
* `eeg-demo`: **optional**: browser EEG processing with synthetic data
* `eeg-ble` alias: **Bluetooth**: use the EEG starter app with the BLE-focused alias when you want a Muse-compatible headset flow

## Why Start Here

This is the recommended default because it gives you:

* a working app structure
* pinned compatible package versions
* a reference implementation you can compare your own app against

Do this before cloning repo demos or using internal maintainer workflows.

## Step 1: Choose A Template

Use this decision table:

| If you want to...                                             | Choose                         |
| ------------------------------------------------------------- | ------------------------------ |
| Build the default camera-based app (no extra hardware)        | `rppg-demo`                    |
| Add browser EEG only (synthetic or offline samples first)     | `eeg-demo`                     |
| Enable a Muse-compatible headset over Bluetooth (Chrome/Edge) | `eeg-ble` alias for `eeg-demo` |

If you are unsure, start with `rppg-demo`.

## Step 2: Scaffold The App

Start with the interactive chooser:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm create @elata-biosciences/elata-demo my-app
  ```

  ```bash npm theme={null}
  npm create @elata-biosciences/elata-demo my-app
  ```
</CodeGroup>

If you prefer the explicit default path instead, scaffold `rppg-demo`
directly:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm create @elata-biosciences/elata-demo my-app -- --template rppg
  ```

  ```bash npm theme={null}
  npm create @elata-biosciences/elata-demo my-app -- --template rppg
  ```
</CodeGroup>

If you want to see the full template list first:

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm dlx @elata-biosciences/create-elata-demo -- --list-templates
  ```

  ```bash npm theme={null}
  npx @elata-biosciences/create-elata-demo -- --list-templates
  ```
</CodeGroup>

The full alias and template matrix lives on [create-elata-demo](/sdk/create-elata-demo).

## Step 3: Install And Run

Copy **one** column (pnpm or npm), then run each line in order:

<CodeGroup>
  ```bash pnpm theme={null}
  cd my-app
  pnpm install
  pnpm run dev
  ```

  ```bash npm theme={null}
  cd my-app
  npm install
  npm run dev
  ```
</CodeGroup>

## Step 4: Confirm What You Have

Once the app starts, verify the expected behavior:

* `rppg-demo`: asks for camera access and starts a pulse-style session
* `eeg-demo`: loads EEG processing in the browser and shows synthetic-data-driven output
* `eeg-ble` alias for `eeg-demo`: adds Bluetooth pairing and streaming guidance for a supported Muse-compatible headset on top of EEG

If your goal is just evaluation, stop here first and learn from the generated
app before integrating into an existing codebase.

## Step 5: Understand The Generated App

Each scaffolded app gives you:

* a minimal Vite + React shell
* Elata packages already wired in
* a `README.md` with template-specific notes
* a `build` script so you can confirm the app compiles cleanly

This is meant to be your known-good baseline.

When a manual integration goes wrong later, compare your app against this
generated one before assuming the package is broken.

## Common Gotcha: Scaffolding Inside Another `pnpm` Workspace

If you create `my-app` inside another repository that already has a
`pnpm-workspace.yaml`, `pnpm install` may attach to the parent workspace
instead of the generated app.

Run these **one line at a time** from the parent directory (adjust `my-app` if needed):

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm --dir my-app --ignore-workspace install
  pnpm --dir my-app --ignore-workspace run dev
  ```

  ```bash npm theme={null}
  cd my-app
  npm install
  npm run dev
  ```
</CodeGroup>

## Where To Go Next

You already have a running scaffold. The recommended order is **camera rPPG
first** (most people’s primary app), **browser EEG second if the product needs
brain signals**, then **Web Bluetooth to connect a headset** (transport on top
of EEG). Each step splits the same way: **stay on the scaffold** or **integrate
into an app you already have**.

### Next: Camera (rPPG): primary

Pick the row that matches you:

| Your situation                                                              | What to do next                                                                                                                                                                                                                       |
| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **New app**: you will keep building from the generated `rppg-demo` scaffold | Use [rPPG In A Browser App](/sdk/guides/rppg-browser) for the integration model, then [rppg-web](/sdk/rppg-web/getting-started) while you change the template. For scaffold CLI details: [create-elata-demo](/sdk/create-elata-demo). |
| **Existing app**: you need rPPG inside a codebase you already ship          | Follow [Add Camera-Based rPPG To An Existing Browser App](/sdk/tutorials/rppg-existing-app) step by step.                                                                                                                             |

### Then: Browser EEG: optional (no headset yet)

| Your situation                           | What to do next                                                                                                                                                 |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **New app**: extend or respin `eeg-demo` | [EEG In A Browser App](/sdk/guides/eeg-browser), then [eeg-web](/sdk/eeg-web/getting-started). Scaffold reference: [create-elata-demo](/sdk/create-elata-demo). |
| **Existing app**                         | [Add EEG To An Existing Browser App](/sdk/tutorials/eeg-existing-app).                                                                                          |

### Then: Enable Bluetooth headset (Muse-compatible)

| Your situation                                              | What to do next                                                                                                                                                        |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **New app**: extend `eeg-demo` via the `eeg-ble` alias path | [Web Bluetooth With Supported Devices](/sdk/guides/web-bluetooth), then [eeg-web-ble](/sdk/eeg-web-ble/getting-started) (and [eeg-web](/sdk/eeg-web/getting-started)). |
| **Existing app**                                            | [Stream Muse-Compatible EEG Over Web Bluetooth](/sdk/tutorials/eeg-ble-live-stream). If WASM is not wired yet, do the EEG row above first.                             |

### Full map

For the same choices in one place in **priority order** (rPPG, then EEG, then
Bluetooth), use [Build A Browser App](/sdk/overview).

### Example Apps

<CardGroup cols={2}>
  <Card title="Example Apps" icon="grid-2" iconType="light" href="/sdk/guides/example-apps">
    Full product-shaped reference implementations
  </Card>

  <Card title="Choose A Package" icon="compass" iconType="light" href="/sdk/guides/choose-the-right-package">
    Package decision guide
  </Card>
</CardGroup>