Loupe

npm install @loupeink/web-sdk

import { useEffect } from "react";
import { init, destroy } from "@loupeink/web-sdk";

export function App() {
  useEffect(() => {
    init({ apiKey: import.meta.env.VITE_LOUPE_API_KEY });
    return () => destroy();
  }, []);

  return <YourApp />;
}

// app/loupe.tsx  (App Router — client component)
"use client";
import { useEffect } from "react";
import { init, destroy } from "@loupeink/web-sdk";

export function Loupe() {
  useEffect(() => {
    init({ apiKey: process.env.NEXT_PUBLIC_LOUPE_API_KEY! });
    return () => destroy();
  }, []);
  return null;
}
// Render <Loupe /> once in app/layout.tsx

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import { init, destroy } from "@loupeink/web-sdk";

onMounted(() => init({ apiKey: import.meta.env.VITE_LOUPE_API_KEY }));
onUnmounted(() => destroy());
</script>

import { Component, OnDestroy, OnInit } from "@angular/core";
import { init, destroy } from "@loupeink/web-sdk";

// Standalone is the default in modern Angular — no `standalone: true` needed.
@Component({
  selector: "app-root",
  template: `<h1>My app</h1>`,
})
export class App implements OnInit, OnDestroy {
  ngOnInit() {
    init({ apiKey: "lp_your_project_api_key" });
  }

  ngOnDestroy() {
    destroy();
  }
}