Build with the AppPilot API

# React 18/19 apps (Vite, Next.js, Remix)
npm install @apppilot/react@1.0.0

# Framework-free browser SDK (widget loader + REST client)
npm install @apppilot/widget@1.0.0

# Node/server: signed end-user sessions + webhook verification
npm install @apppilot/node@1.0.0

<!-- Paste before </body>. Replace the slug with your workspace slug. -->
<script
  src="https://apppilot.tech/widget.js"
  data-slug="your-workspace-slug"
  data-label="Ask AI"
  data-debug="false"
  defer
></script>

<!-- Control it once loaded -->
<script>
  window.addEventListener("apppilot:ready", () => {
    AppPilot.on("message", (e) => console.log("user asked:", e.detail));
    document.querySelector("#help")?.addEventListener("click", () => AppPilot.open());
  });
</script>

// npm install @apppilot/react
import { AppPilotProvider, useAppPilot, useAppPilotEvent } from "@apppilot/react";

export default function App() {
  return (
    <AppPilotProvider slug="your-workspace-slug" label="Ask AI" position="right">
      <HelpButton />
    </AppPilotProvider>
  );
}

function HelpButton() {
  const { open, ready, identify } = useAppPilot();
  useAppPilotEvent("conversation-submit", (detail) => console.log(detail));
  return <button onClick={open} disabled={!ready}>Need help?</button>;
}

// No provider? Mount it directly (it takes its own slug):
// import { AppPilotWidget } from "@apppilot/react";
// <AppPilotWidget slug="your-workspace-slug" unmountOnCleanup />

import { useEffect } from "react";

export function AppPilotWidget({ slug = "your-workspace-slug", label = "Ask AI" }) {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://apppilot.tech/widget.js";
    s.async = true;
    s.dataset.slug = slug;
    s.dataset.label = label;
    document.body.appendChild(s);
    return () => {
      s.remove();
      window.AppPilot?.destroy?.();
    };
  }, [slug, label]);
  return null;
}

// Anywhere in the app:
// <button onClick={() => window.AppPilot?.open()}>Need help?</button>

<!-- Static branding: every style is a data-* attribute -->
<script
  src="https://apppilot.tech/widget.js"
  data-slug="your-workspace-slug"
  data-label="Ask Acme"
  data-accent="#0f766e"
  data-text-color="#ecfdf5"
  data-font="'Inter', system-ui, sans-serif"
  data-radius="12px"
  data-position="left"
  data-offset="28"
  defer
></script>

// Runtime restyle (dark mode, per-tenant brands) — no reload:
AppPilot.theme({ accent: "#22d3ee", textColor: "#082f49", radius: "999px", position: "right", offset: 76 });

// React: theme props are reactive, and useAppPilot() exposes theme()
<AppPilotProvider slug="your-workspace-slug" accent="#0f766e" font="'Inter', sans-serif" radius="12px" position="left" offset={24}>

// Defaults: accent #6366f1 · textColor #ffffff · font system-ui · radius 999px · label "Ask AI" · position right · offset 20
// Workspace-wide defaults (logo, name, colors, greeting) live in Admin portal → Branding.

// Browser / any bundler that allows remote imports
import { loadAppPilot } from "https://apppilot.tech/sdk/v1/widget.mjs";

const pilot = await loadAppPilot({ slug: "your-workspace-slug", label: "Ask AI" });
pilot.open();

// React bindings over the same module
// (keeps "react" external, so use it from a bundler such as Vite/Next)
import { AppPilotProvider } from "https://apppilot.tech/sdk/v1/react.mjs";

// Plain HTML, no bundler at all:
// <script type="module">
//   import { loadAppPilot } from "https://apppilot.tech/sdk/v1/widget.mjs";
//   await loadAppPilot({ slug: "your-workspace-slug" });
// </script>

// npm install @apppilot/node   (Node 18+, server only — never ship your keys to the browser)
import { AppPilotClient, signUserToken, verifyWebhookSignature } from "@apppilot/node";

// 1. Typed REST client
const client = new AppPilotClient({ apiKey: process.env.APPPILOT_SECRET_KEY });
const { results } = await client.search("refund policy", { limit: 5 });

// 2. Signed end-user session handed to the widget
const jwt = await signUserToken(process.env.APPPILOT_SIGNING_SECRET, {
  userId: user.id,
  email: user.email,
  name: user.name,
});

// 3. Webhook verification (constant-time, rejects stale timestamps)
const ok = await verifyWebhookSignature({
  payload: await request.text(),
  signature: request.headers.get("x-apppilot-signature"),
  timestamp: request.headers.get("x-apppilot-timestamp") ?? undefined,
  secret: process.env.APPPILOT_WEBHOOK_SECRET,
});

import { createHmac, timingSafeEqual } from "node:crypto";

// 1. REST call with your secret key
const res = await fetch("https://apppilot.tech/api/public/v1/search", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    authorization: `Bearer ${process.env.APPPILOT_SECRET_KEY}`,
  },
  body: JSON.stringify({ query: "refund policy", limit: 5 }),
});
if (!res.ok) throw new Error(`AppPilot ${res.status}: ${await res.text()}`);
const { results } = await res.json();

// 2. Signed end-user session for the widget (never sign in the browser)
const b64 = (o) => Buffer.from(JSON.stringify(o)).toString("base64url");
const header = b64({ alg: "HS256", typ: "JWT" });
const payload = b64({
  sub: user.id,
  email: user.email,
  name: user.name,
  exp: Math.floor(Date.now() / 1000) + 3600,
});
const signature = createHmac("sha256", process.env.APPPILOT_WIDGET_SECRET)
  .update(`${header}.${payload}`)
  .digest("base64url");
const token = `${header}.${payload}.${signature}`;
// pass it to the browser: <script ... data-user-token="${token}">

// 3. Webhook verification — on the RAW body, before JSON.parse
const expected = createHmac("sha256", process.env.APPPILOT_WEBHOOK_SECRET)
  .update(`${req.headers["x-apppilot-timestamp"]}.${rawBody}`)
  .digest("hex");
const got = req.headers["x-apppilot-signature"];
const ok =
  got?.length === expected.length &&
  timingSafeEqual(Buffer.from(got), Buffer.from(expected));

import { useEffect } from "react";

declare global {
  interface Window {
    AppPilot?: {
      open(): void;
      close(): void;
      destroy?(): void;
      on(event: string, handler: (detail: unknown) => void): () => void;
    };
  }
}

export function AppPilotWidget() {
  useEffect(() => {
    if (document.querySelector("script[data-apppilot-widget]")) return;

    const script = document.createElement("script");
    script.src = "https://apppilot.tech/widget.js";
    script.dataset.apppilotWidget = "true";
    script.dataset.slug = "your-workspace-slug";
    script.dataset.label = "Ask AI";
    script.dataset.debug = import.meta.env.DEV ? "true" : "false";
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      window.AppPilot?.destroy?.();
      script.remove();
    };
  }, []);

  return null;
}

import { AppPilotWidget } from "./components/AppPilotWidget";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <AppPilotWidget />
    </>
  );
}

<script
  src="https://apppilot.tech/widget.js"
  data-slug="your-workspace-slug"
  data-label="Ask AI"
  data-debug="true"
  defer
></script>

<script
  src="https://apppilot.tech/widget.js"
  data-slug="your-workspace-slug"
  data-label="Ask AI"
  defer
></script>

"use client";
import { useEffect } from "react";

export function AppPilotWidget({ slug }: { slug: string }) {
  useEffect(() => {
    if (document.querySelector("script[data-apppilot]")) return;
    const script = document.createElement("script");
    script.src = "https://apppilot.tech/widget.js";
    script.dataset.apppilot = "true";
    script.dataset.slug = slug;
    script.dataset.label = "Ask AI";
    script.defer = true;
    document.body.appendChild(script);
    return () => {
      script.remove();
      (window as any).AppPilot?.destroy?.();
    };
  }, [slug]);

  return null;
}

curl -I https://apppilot.tech/widget.js
# expect: HTTP/2 200 and content-type: application/javascript