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

# Web

> Set up Momentic for a web app and run your first test.

The wizard handles sign-in, install, a sample run, and editor setup. The manual
steps below cover the same setup if you'd rather do it yourself.

## Prerequisites

The wizard and manual setup both require:

* **Node.js** 22.12.0+ or 24.0.0+
* A `package.json` in your project (run `npm init -y` if you don't have one)
* A Momentic account; [sign up](https://app.momentic.ai) to generate an API key

```bash theme={null}
node -v  # need 22.12.0+ or 24.0.0+
```

## Install via the wizard (recommended)

Run the onboarding wizard in your terminal. It signs you in through the browser,
installs Momentic, runs a sample test, and sets up the editor MCP server.

```bash theme={null}
npx @momentic/wizard@latest
```

## Setup with coding agent

A coding agent can't complete the browser sign-in, so the agent path uses an API
key and runs the wizard non-interactively. Copy the prompt below into Cursor,
Claude, or another agent:

<Prompt description="Set up Momentic for a web project end to end via the onboarding wizard, non-interactively." actions={["copy", "cursor", "claude"]}>
  Set up Momentic for web testing in this project by running the onboarding
  wizard non-interactively.

  First, get an API key. Check whether one is already available:

  * If `MOMENTIC_API_KEY` is set in the environment, or `~/.momentic/auth.json`
    exists from a previous sign-in, reuse it and skip ahead to running the wizard.
  * Otherwise, you cannot sign in through the browser yourself. Ask me to sign up
    at [https://app.momentic.ai](https://app.momentic.ai), create an API key at
    [https://app.momentic.ai/settings/api-keys](https://app.momentic.ai/settings/api-keys), and paste it back. Wait for the
    key, then export it:

  ```bash theme={null}
  export MOMENTIC_API_KEY=<the key I give you>
  ```

  Then run the wizard non-interactively. `npx --yes` auto-confirms the one-time
  package download, and the wizard's own `-y` flag resolves every prompt from
  flags, env, and defaults (reading the API key from `MOMENTIC_API_KEY`), so the
  command never blocks on input:

  ```bash theme={null}
  npx --yes @momentic/wizard@latest -y --platform web --editor-tools skills
  ```

  This installs `momentic` as a dev dependency, scaffolds `momentic.config.yaml`
  plus a sample test under `web/`, installs Chromium, and runs the sample test end
  to end. `--editor-tools` controls coding-agent setup: pass a comma-separated
  list to register the Momentic MCP server and install skills (for example
  `cursor,skills` or `claude-code,skills`), `all` to configure every detected
  agent, or `none` to skip. Omit the flag to auto-detect installed agents.

  When it finishes, confirm the sample test passed and that `momentic.config.yaml`
  (plus the sample `web/add-to-cart.test.yaml`) was created in the project.
</Prompt>

## Manual setup

<div id="1-install" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"1. Install"}
</div>

```bash theme={null}
npm install --save-dev momentic
```

<div id="2-authenticate" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"2. Authenticate"}
</div>

**Option A**: sign in with your browser (recommended):

```bash theme={null}
npx momentic login
```

This opens a browser-based login flow and saves credentials to
`~/.momentic/auth.json`. The CLI automatically uses this file when
`MOMENTIC_API_KEY` is not set.

**Option B**: use an API key:

Create an API key in the [dashboard](https://app.momentic.ai/settings/api-keys),
then export it:

```bash theme={null}
export MOMENTIC_API_KEY=your-api-key-here
```

<Info>
  Persist the key by appending the `export` line to `~/.zshrc` (macOS) or
  `~/.bashrc` (Linux). In CI, set `MOMENTIC_API_KEY` as a secret environment
  variable.
</Info>

<div id="3-initialize" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"3. Initialize"}
</div>

```bash theme={null}
npx momentic init
```

This writes `momentic.config.yaml` to your project root. `init` does not
scaffold any tests; author your first one in the editor below. (For
pre-scaffolded sample tests, use the
[onboarding wizard](#install-via-the-wizard-recommended) instead.)

<div id="4-connect-your-coding-agent" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"4. Connect your coding agent"}
</div>

The wizard configures Momentic's MCP server and installs agent skills for you.
For manual setup, follow the [MCP setup guide](/docs/coding-agents/mcp-server) to
connect your editor and install the skills your coding agent needs.

<div id="5-install-browsers" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"5. Install browsers"}
</div>

Momentic runs your tests against a headless browser. Install Chromium:

```bash theme={null}
npx momentic install-browsers chromium
```

<div id="6-write-and-run-your-first-test" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"6. Write and run your first test"}
</div>

Open the [local editor](/docs/local-app):

```bash theme={null}
npx momentic app
```

Create a test with base URL
`https://practicetestautomation.com/practice-test-login/` and author a single
natural-language step (for example,
`Log in with username "student" and password "Password123", then confirm the success page loads.`).
Save it (the editor writes the `.test.yaml` to your project), run it from the
editor to verify, then run it from the CLI by name:

```bash theme={null}
npx momentic run <your-test-name>
```

<div id="7-verify" role="heading" aria-level={4} className="mt-8 text-lg font-semibold">
  {"7. Verify"}
</div>

* Check the `.test.yaml` you just authored exists in your project root
* Open the [dashboard](https://app.momentic.ai) and check **Runs** for the
  result

## Next steps

<CardGroup cols={3}>
  <Card title="Core concepts" icon="book" href="/docs/core-concepts/finding-elements">
    Finding elements, writing assertions, modules, variables
  </Card>

  <Card title="CI/CD" icon="play" href="/docs/running-tests/ci/github-actions">
    Run Momentic on every pull request
  </Card>

  <Card title="Best practices" icon="lightbulb" href="/docs/best-practices/maintainable-tests">
    Write tests that hold up over time
  </Card>
</CardGroup>

Clone
[momentic-ai/examples](https://github.com/momentic-ai/examples/tree/main/web)
for a full working example.