🚀 Quickstart

Install the Glance Intelligent Detect SDK, stream live product activity, record a golden path, and surface in-app coach guidance — in a few lines of code.

Install the SDK

Prerequisites — Node.js 18+ (or any bundler that supports ES modules). The package works in modern browsers and SPA frameworks (React, Vue, Next, Vite, …).

npm install @glance/intelligent-detect
# or
pnpm add @glance/intelligent-detect
# or
yarn add @glance/intelligent-detect

Configure credentials

Create keys in the Glance Intelligent Detect Console, then keep the runtime key server-side when possible. The browser SDK needs a publishable / product-scoped key (never a master admin key).

# .env (names are conventional — use your platform’s env loader)
GLANCE_PRODUCT_ID=prod_xxxxxxxx
GLANCE_API_KEY=gid_live_xxxxxxxx
GLANCE_BASE_URL=https://gid.glance.com   # your Glance Intelligent Detect API origin

Initialize & identify

import { GlanceIntelligentDetect } from "@glance/intelligent-detect";

const gid = GlanceIntelligentDetect.init({
  productId: process.env.GLANCE_PRODUCT_ID,
  apiKey: process.env.GLANCE_API_KEY,
  baseUrl: process.env.GLANCE_BASE_URL,
});

// Call once the user is known (after login / session restore)
gid.identify({
  userId: "user_123",
  // optional traits for later memory / cohorts
  traits: { plan: "trial", role: "admin" },
});

init starts the collector (pageviews + clicks → POST /v1/events) and the coach client (polls /v1/proactive + /v1/playbook).

🎯 Step 1 — Connect your activity stream

Glance Intelligent Detect needs a live stream of what each user is doing before paths or coach can run. The SDK collector is the default path — no analytics webhook required.

Manual events (optional)

Most apps only need init + identify. For custom milestones, track explicitly:

gid.track({
  type: "custom",
  title: "Connected bank account",
  canonicalUrl: "/onboarding/bank",
  meta: { provider: "plaid" },
});

POST {baseUrl}/v1/events
Header: X-GID-Key: <apiKey>

{
  "product_id": "prod_xxxxxxxx",
  "user_id": "user_123",
  "type": "pageview",          // pageview | click | submit | custom
  "title": "Page: /settings",
  "description": "User viewed /settings",
  "raw_url": "https://app.example.com/settings",
  "canonical_url": "/settings",
  "timestamp": 1710000000.0,
  "meta": {}
}

🗺️ Step 2 — Record a golden path

This is where Glance Intelligent Detect learns what good looks like. In the Console: Record → perform the happy path in your product → Save. Paths are built from the same SDK event stream — Record does not invent a second collector.

🔔 Step 3 — Add the proactive coach

Steps 1–2 make detection possible. The SDK’s coach client asks the API when to offer help and what to show. You can use the built-in coach UI, or render your own surface from the guidance payload.

import { GlanceIntelligentDetect } from "@glance/intelligent-detect";

GlanceIntelligentDetect.init({
  productId: process.env.GLANCE_PRODUCT_ID,
  apiKey: process.env.GLANCE_API_KEY,
  baseUrl: process.env.GLANCE_BASE_URL,
  coach: {
    enabled: true,          // default true
    brandName: "Acme",      // optional label on the sheet
  },
});

GlanceIntelligentDetect.init({
  productId: process.env.GLANCE_PRODUCT_ID,
  apiKey: process.env.GLANCE_API_KEY,
  baseUrl: process.env.GLANCE_BASE_URL,
  coach: {
    enabled: false,
    onGuidance(guidance) {
      // guidance.title, guidance.steps[{ id, label, selector }]
      yourCoach.show(guidance);
    },
  },
});

🤖 Step 4 — Connect an AI support agent

Give your existing chatbot live context on what the user has been doing — pulled over MCP when the agent needs it. Recipes below are on the roadmap.

🗺️ What's next

• Console — connect activity, record paths, watch live sessions
• API reference — /v1/events, /v1/proactive, /v1/playbook Soon
• Agent skills for Cursor / Claude Soon