Getting Started

Getting Started

Everything runs locally with no external services — the database is embedded Postgres (PGlite), so setup is four commands.

npm install
npm run build          # shared → sdk → dashboard → extension
npm run seed           # creates the demo project; prints its admin key + demo HMAC
npm start              # http://localhost:8787 serves API + dashboard + demo + SDK

Then open:

• Demo product — http://localhost:8787/demo/ (leave feedback; it persists to the API)
• Triage board — http://localhost:8787/dashboard/?key=<admin key from npm run seed>

Embed the SDK in your product

<script src="https://cdn.loupe.dev/v1.js"></script>
<script>
  Loupe.init({
    projectKey: "pk_live_…",
    user: { id: "u_92", name: "Sara", email: "sara@acme.com" },
    userHmac: "…" // HMAC-SHA256(user.id, PROJECT_SECRET), computed server-side
  });
</script>

Or via npm:

npm i @loupe/sdk

import { init } from "@loupe/sdk";
init({ projectKey: "pk_live_…", user: currentUser, userHmac });

The toolbar renders only for the identified user. See Authentication for how the HMAC works.

Configuration

Field	Required	Notes
projectKey	yes	Public project key from the backend
user	yes	{ id, name, email? } — the authenticated host-app user
userHmac	prod	Server-computed HMAC that authorizes the user
apiBase	no	Backend URL. Omitted → localStorage (offline mode)
autoOpen	no	Start with the inspector active
captureScreenshot	no	Override capture (the extension uses this for pixel-perfect shots)

Point Claude Code at the feedback

See MCP Integration.