# Quickstart

Source: https://docs.mirafive.io/quickstart

> Create a website source, add the script to your site, and see your first pageview and custom event arrive in MIRA FIVE.

This page takes you from nothing to a verified first event in about five minutes. It uses the hosted script, which works on any website. For a framework package, follow its page under [SDKs](https://docs.mirafive.io/sdks) instead; the steps are the same.

## Create a project

[Sign up at app.mirafive.io](https://app.mirafive.io/signup). Signing up creates your organization and walks you through your first project.

## Add a website source

In the project, go to **Data → Sources → Add source** and choose **Website**.

- **Allowed origins:** the site's address, for example `https://shop.example.com`. `www.` and the bare domain count as one site. `localhost` and `127.0.0.1` are always allowed, on any port.
- **Collection mode:** keep **Consentless** unless your site already has a consent banner. It needs no banner and stores nothing on the device. See [Consent](https://docs.mirafive.io/guides/consent).

Create the source. It comes with a **website key** (`mf_…`) and a ready snippet on the **Install** tab. More about keys: [Keys](https://docs.mirafive.io/keys).

## Add the script

**Script tag**

Paste into the `<head>` of every page, with your website key:

```html title="index.html"
<script>window.mirafive=window.mirafive||function(){(mirafive.q=mirafive.q||[]).push(arguments)}</script>
<script defer src="https://cdn.mirafive.io/mira.js" data-key="mf_…"></script>
```

The first line queues calls made before the script arrives. Pageviews are recorded on load and on every client-side navigation.

**npm**

```bash
npm install @mirafive/sdk-browser
```

```ts title="src/analytics.ts"
import { createMira } from '@mirafive/sdk-browser'
import { pageviews } from '@mirafive/sdk-browser/pageviews'

export const mira = createMira({
  key: import.meta.env.VITE_MIRAFIVE_KEY,
  plugins: [pageviews()],
})
```

Import this module once from your app's entry. Using React, Next.js, Vue, Nuxt or Astro? Their packages do this for you: see [SDKs](https://docs.mirafive.io/sdks).

## Track a custom event

Call `track` with an event name and optional properties where something happens:

**Script tag**

```html
<script>
  document.querySelector('#signup').addEventListener('submit', () => {
    mirafive('track', 'signup', { plan: 'pro' })
  })
</script>
```

**npm**

```ts
import { mira } from './analytics'

mira.track('signup', { plan: 'pro' })
```

Use short snake_case names for things that happened: `signup`, `checkout_started`, `invoice_paid`. See [Track events](https://docs.mirafive.io/guides/track-events).

## Verify

1. Open your site on its real domain. Events from `localhost` are dropped by default, so the script sends nothing during local development unless you allow it (`data-track-localhost` on the tag, `trackLocalhost: true` in the SDK).
2. Open the browser's network tab. Batches leave 5 seconds after the first event or when the tab is hidden. With the script tag you can send one now by running `mirafive('flush')` in the console.
3. Look for `POST https://events.mirafive.io/v1/batch/mf_…` answering `202`:

```json
{ "batch": "0192d4a8-7b1c-4e8a-9c1d-2b3e4f5a6b7c", "accepted": 2, "dropped": 0 }
```

4. In the dashboard, open **Data → Live**. Your pageview and the `signup` event show up within seconds, and the project's setup guide switches to **Receiving events**.

## Check a key from the terminal

To test the key and your network before touching the site, send the reserved `$install_check` event. MIRA FIVE answers but never stores or counts it:

```bash
curl -X POST https://events.mirafive.io/v1/batch/mf_… \
  -H "Content-Type: text/plain" \
  -d '{"v":1,"batch":"0192d4a8-7b1c-4e8a-9c1d-2b3e4f5a6b7c","mode":"consentless","events":[{"name":"$install_check"}]}'
```

```json
{ "batch": "0192d4a8-7b1c-4e8a-9c1d-2b3e4f5a6b7c", "accepted": 0, "dropped": 1, "reason": "install_check" }
```

A `401` means the key is wrong; a `403` names the problem. See [Verify and debug](https://docs.mirafive.io/guides/verify-and-debug).

## Next steps

- [Identify users](https://docs.mirafive.io/guides/identify-users) after login, behind your consent banner.
- Send events from your backend with a [secret key](https://docs.mirafive.io/keys#create-a-secret-key): [Server-side events](https://docs.mirafive.io/guides/server-side).
- Read [feature flags](https://docs.mirafive.io/guides/feature-flags) in the browser and on the server.
- Let an agent query your data through the [MCP server](https://docs.mirafive.io/mcp).