Step 1 — Connect real-time events

// app/posthog-provider.js  (or wherever your client-side init lives)
"use client";
import { useEffect } from "react";
import posthog from "posthog-js";

export default function PostHogProvider({ children }) {
  useEffect(() => {
    if (typeof window === "undefined" || posthog.__loaded) return;
    posthog.init("phc_YOUR_PROJECT_API_KEY", {
      api_host: "https://us.i.posthog.com",
      person_profiles: "identified_only",
      session_idle_timeout_seconds: 120,
      loaded: (ph) => {
        ph.identify("USER_ID_FROM_YOUR_AUTH", {
          product_id: "YOUR_AUTOPLAY_PRODUCT_ID",
          email: "user@theirdomain.com",
        });
        // Critical: makes email flow on every autocapture event.
        // Without this, ActionsPayload.email arrives as None.
        ph.register({ email: "user@theirdomain.com" });
      },
    });
  }, []);
  return children;
}

fun extractFromElementsChain(str, pattern) {
    try {
        if (empty(str)) { return '' }
        let startIdx := position(str, pattern)
        if (startIdx <= 0) { return '' }
        let sub := substring(str, startIdx + length(pattern), length(str) - startIdx - length(pattern) + 1)
        let endIdx := position(sub, '"')
        if (endIdx > 0) { return substring(sub, 1, endIdx - 1) }
        return ''
    } catch (err) {
        return ''
    }
}

let elements_chain := event.elements_chain ?? ''
let element_id := extractFromElementsChain(elements_chain, 'attr__id="')
let input_field_name := extractFromElementsChain(elements_chain, 'attr__name="')
let link_destination := extractFromElementsChain(elements_chain, 'attr__href="')
let button_or_link_text := extractFromElementsChain(elements_chain, 'text="')

let payload := {
    'event': event.event,
    'referrer': event.properties?.$referrer ?? '',
    'timestamp': event.timestamp ?? '',
    'element_id': element_id,
    'event_type': event.properties?.$event_type ?? '',
    'session_id': event.properties?.$session_id ?? '',
    'current_url': event.properties?.$current_url ?? '',
    'distinct_id': event.distinct_id ?? '',
    'email': event.properties?.email ?? '',
    'elements_chain': elements_chain,
    'input_field_name': input_field_name,
    'link_destination': link_destination,
    'button_or_link_text': button_or_link_text
}

let headers := {
    'Content-Type': 'application/json',
    'x-posthog-secret': inputs.headers['x-posthog-secret']
}

let req := { 'headers': headers, 'body': jsonStringify(payload), 'method': 'POST' }
let url := inputs.url

let res := fetch(url, req)
if (res.status >= 400) {
    throw Error(f'Webhook returned {res.status}: {res.body}')
}

import logging, os

import httpx
from dotenv import load_dotenv
from fastapi import FastAPI

load_dotenv()
logging.basicConfig(level=logging.INFO)
log = logging.getLogger("copilot")

CONNECTOR_URL = os.environ.get("CONNECTOR_URL", "https://mcp.autoplay.ai")
MCP_KEY = os.environ["MCP_KEY"]
PRODUCT_ID = os.environ["PRODUCT_ID"]
ACTIVITY_LIMIT = int(os.environ.get("ACTIVITY_LIMIT", "30"))

async def pull_live_activity(user_id: str) -> str:
    """Pull a user's recent activity from the Autoplay connector, synchronously.

    Called on demand — once per /context/{user_id} request — not on a timer
    and not from a background listener. A 5s timeout keeps a slow connector
    response from blocking the widget from opening.
    """
    url = f"{CONNECTOR_URL}/users/{PRODUCT_ID}/{user_id}/live-activity"
    try:
        async with httpx.AsyncClient(timeout=5) as client:
            resp = await client.get(
                url,
                params={"limit": ACTIVITY_LIMIT},
                headers={"Authorization": f"Bearer {MCP_KEY}"},
            )
    except httpx.HTTPError as exc:
        # Covers timeouts as well as connect/DNS/TLS failures — any of these
        # should degrade to no context, not a 500 on /context/{user_id}.
        log.warning("live-activity request failed for user=%s: %s", user_id, exc)
        return ""

    if resp.status_code == 401:
        log.error("live-activity 401 — check MCP_KEY")
        return ""
    if resp.status_code != 200:
        log.warning("live-activity returned %s for user=%s", resp.status_code, user_id)
        return ""

    actions = resp.json().get("actions", [])
    lines = [
        f"{a['title']} — {a['description']} ({a['canonical_url']})"
        for a in actions
    ]
    return "\n".join(lines)

@app.get("/healthz")
async def healthz():
    return {"status": "ok"}

@app.get("/context/{user_id}")
async def get_context(user_id: str):
    """Return the pulled Autoplay context for a user.

    The frontend calls this before mounting InkeepEmbeddedChat so it can
    pass the activity summary as introMessage. Returns has_activity=False
    when the user has no recent activity yet — the widget falls back to its
    default greeting in that case.
    """
    text = await pull_live_activity(user_id)
    return {
        "context": text,
        "has_activity": bool(text.strip()),
        "user_id": user_id,
    }

curl -s -X POST http://localhost:3002/manage/tenants/default/projects/nexus-cloud/agents \
  -H "Authorization: Bearer test-bypass-secret-for-ci" \
  -H "Content-Type: application/json" \
  -d '{
    "id": "onboarding-support",
    "name": "Onboarding Support Agent",
    "prompt": "You are a helpful onboarding assistant for Nexus Cloud.\n\nNexus Cloud onboarding has 5 steps:\n1. Connect Data Source — paste your API endpoint URL and API key, then click Test Connection.\n2. Invite Your Team — add teammate email addresses and choose their roles.\n3. Configure Workspace — set your workspace name, timezone, and branding.\n4. Set Up Alerts — configure thresholds and notification channels (email, Slack).\n5. Run First Sync — click Run Sync to verify everything is connected.\n\n## If a Current User Activity block is present\nUse it to give specific, context-aware answers. Pick up from where the user is — do not restart the flow from step 1 if they are already on step 4.\n\n## Answering questions\n- Be specific about which field or button to use.\n- Use numbered steps when explaining a flow.\n- If the user is stuck on a step, suggest the most common fix first.\n- Keep replies concise — under 120 words unless the question is complex."
  }'

curl -s -X POST \
  http://localhost:3002/manage/tenants/default/projects/nexus-cloud/agents/onboarding-support/sub-agents \
  -H "Authorization: Bearer test-bypass-secret-for-ci" \
  -H "Content-Type: application/json" \
  -d '{
    "id": "onboarding-worker",
    "name": "Onboarding Worker",
    "models": {"base": {"model": "anthropic/claude-sonnet-4-6"}},
    "prompt": "You are a helpful onboarding assistant for Nexus Cloud.\n\nNexus Cloud onboarding has 5 steps:\n1. Connect Data Source — paste your API endpoint URL and API key, then click Test Connection.\n2. Invite Your Team — add teammate email addresses and choose their roles.\n3. Configure Workspace — set your workspace name, timezone, and branding.\n4. Set Up Alerts — configure thresholds and notification channels (email, Slack).\n5. Run First Sync — click Run Sync to verify everything is connected.\n\n## If a Current User Activity block is present\nUse it to give specific, context-aware answers. Pick up from where the user is — do not restart the flow from step 1 if they are already on step 4.\n\n## Answering questions\n- Be specific about which field or button to use.\n- Use numbered steps when explaining a flow.\n- If the user is stuck on a step, suggest the most common fix first.\n- Keep replies concise — under 120 words unless the question is complex."
  }'

"use client";
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";

const InkeepEmbeddedChat = dynamic(
  () => import("@inkeep/agents-ui").then((m) => m.InkeepEmbeddedChat),
  { ssr: false }
);

const BASE_URL = process.env.NEXT_PUBLIC_INKEEP_BASE_URL ?? "http://localhost:3002";
const APP_ID = process.env.NEXT_PUBLIC_INKEEP_APP_ID ?? "app_playground";
const BRIDGE_URL = process.env.NEXT_PUBLIC_BRIDGE_URL ?? "http://localhost:8787";

type Props = {
  userId: string;
  contextKey?: string;
};

export function InkeepWidget({ userId, contextKey }: Props) {
  const [introMessage, setIntroMessage] = useState(
    "Hi! I'm your onboarding assistant. Ask me anything about setting up Nexus Cloud."
  );

  useEffect(() => {
    if (!userId) return;
    fetch(`${BRIDGE_URL}/context/${encodeURIComponent(userId)}`)
      .then((r) => r.json())
      .then((data) => {
        if (data.has_activity) {
          setIntroMessage(
            `I can see you've been working on the onboarding. ${data.context_hint ?? ""} What can I help with?`
          );
        }
      })
      .catch(() => {});
  }, [userId, contextKey]);

  return (
    <InkeepEmbeddedChat
      key={contextKey ?? "default"}
      baseSettings={{ primaryBrandColor: "#6366f1" }}
      aiChatSettings={{
        baseUrl: BASE_URL,
        appId: APP_ID,
        introMessage,
        placeholder: "Ask about any onboarding step…",
      }}
    />
  );
}

// app/onboarding/page.tsx  (simplified — your layout will differ)
"use client";
import { useState, useEffect } from "react";
import posthog from "posthog-js";
import { InkeepWidget } from "@/components/InkeepWidget";

export default function OnboardingPage() {
  const [userId, setUserId] = useState("");
  const [chatOpen, setChatOpen] = useState(false);

  useEffect(() => {
    setUserId(posthog.get_distinct_id() ?? "");
  }, []);

  return (
    <>
      {/* … your onboarding stepper UI … */}

      {/* Chat trigger button */}
      {!chatOpen && (
        <button onClick={() => setChatOpen(true)}>
          Need help?
        </button>
      )}

      {/* Chat panel */}
      {chatOpen && userId && (
        <InkeepWidget userId={userId} />
      )}
    </>
  );
}