Platform integration

import { pixero } from "@/lib/pixero";

/**
 * Mint the token that the widget runs on. Server side only: it needs your API
 * key, and the token it returns is the thing that is safe to send to a
 * browser.
 *
 * Mint one per page render rather than storing it. They expire, and a fresh
 * one costs a single call.
 */
export async function mintAdsToken(customer: {
  id: string;
  websiteUrl: string;
  businessName?: string;
}) {
  const mcp = await pixero();
  const result = await mcp.call("create_embed_token", {
    vendorRef: customer.id,          // your own id for this customer
    websiteUrl: customer.websiteUrl, // required
    businessName: customer.businessName,
    dailyBudget: 20,                 // starting value; the user can change it
  });
  if (!result.ok) throw new Error(result.error);

  // The origin comes back with the token rather than being configured
  // separately. Two settings that have to agree is one more than there
  // should be: point PIXERO_MCP_URL at a local or preview server, mint a
  // token there, and a hardcoded production iframe loads a page that token
  // is not valid for.
  return {
    token: result.data.token as string,
    origin: new URL(process.env.PIXERO_MCP_URL || "https://pixero.ai").origin,
  };
}

"use client";

import { useEffect, useRef, useState } from "react";

/**
 * The whole integration, in React.
 *
 * An iframe rather than the <script> tag: React does not execute injected
 * script elements, and an iframe keeps the widget's DOM and styles isolated
 * from yours either way.
 *
 * The widget posts its height out as its content changes, because an iframe
 * cannot size itself.
 */
export function PixeroAds({
  token,
  origin,
}: {
  token: string;
  /** Where the token was minted. Comes back from mintAdsToken. */
  origin: string;
}) {
  const [height, setHeight] = useState(180);
  const frame = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      if (event.origin !== origin) return;
      if (event.data?.type === "pixero:height") {
        setHeight(Math.max(120, event.data.height + 8));
      }
    };
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [origin]);

  return (
    <iframe
      ref={frame}
      src={`${origin}/embed/ads?token=${encodeURIComponent(token)}`}
      title="Ads"
      style={{ width: "100%", border: 0, height }}
    />
  );
}

import { mintAdsToken } from "@/lib/pixero-ads";
import { PixeroAds } from "@/components/pixero-ads";

/**
 * A server component: mint on the server, render on the client. Two lines of
 * your own code, and the button, status, spend, pause and budget all come
 * from the widget.
 */
export default async function CustomerAdsPage({ customer }: { customer: any }) {
  const { token, origin } = await mintAdsToken(customer);
  return <PixeroAds token={token} origin={origin} />;
}

/**
 * Minimal MCP client for the Pixero server. Dependency-free on purpose: an
 * integration is four JSON-RPC calls over one HTTP endpoint, and an SDK hides
 * that.
 */
const MCP_URL = process.env.PIXERO_MCP_URL || "https://pixero.ai/api/mcp";
const API_KEY = process.env.PIXERO_API_KEY || "";

export type ToolResult =
  | { ok: true; data: any }
  | { ok: false; error: string };

class McpSession {
  private sessionId: string | null = null;

  private async rpc(method: string, params: unknown, notification = false) {
    const body = notification
      ? { jsonrpc: "2.0", method, params }
      : { jsonrpc: "2.0", id: Math.floor(Math.random() * 1e9), method, params };

    const res = await fetch(MCP_URL, {
      method: "POST",
      headers: {
        "content-type": "application/json",
        accept: "application/json, text/event-stream",
        authorization: `Bearer ${API_KEY}`,
        ...(this.sessionId ? { "mcp-session-id": this.sessionId } : {}),
      },
      body: JSON.stringify(body),
    });

    const sid = res.headers.get("mcp-session-id");
    if (sid) this.sessionId = sid;
    if (notification) return null;

    // Streamable HTTP may answer as SSE; the payload is the last data: line.
    const text = await res.text();
    const lines = text
      .split("\n")
      .filter((line) => line.startsWith("data:"))
      .map((line) => line.slice(5).trim());
    const payload = lines.length ? lines[lines.length - 1] : text;
    try {
      return JSON.parse(payload);
    } catch {
      throw new Error(`Bad MCP response (${res.status}): ${text.slice(0, 300)}`);
    }
  }

  async open() {
    const init = await this.rpc("initialize", {
      protocolVersion: "2025-06-18",
      capabilities: {},
      clientInfo: { name: "your-platform", version: "1.0.0" },
    });
    if (init?.error) throw new Error(`MCP initialize failed: ${init.error.message}`);
    await this.rpc("notifications/initialized", {}, true);
  }

  async call(name: string, args: Record<string, unknown> = {}): Promise<ToolResult> {
    const res = await this.rpc("tools/call", { name, arguments: args });
    if (res?.error) return { ok: false, error: res.error.message || "MCP error" };
    const result = res?.result;
    const text = result?.content?.[0]?.text ?? "";
    if (result?.isError) return { ok: false, error: text || "Tool returned an error" };
    try {
      return { ok: true, data: JSON.parse(text) };
    } catch {
      return { ok: true, data: text };
    }
  }
}

export async function pixero() {
  if (!API_KEY) throw new Error("PIXERO_API_KEY is not set.");
  const session = new McpSession();
  await session.open();
  return session;
}

import { pixero } from "@/lib/pixero";
import { db } from "@/lib/db";
import { requireSession } from "@/lib/auth";

/**
 * What the Launch ads button calls.
 *
 * customerId is YOUR id for this business. It becomes vendorRef on the
 * campaign, which is the only thing tying that campaign back to your user, and
 * it cannot be attached afterwards.
 */
export async function launchAdsFor(customerId: string, dailyBudget: number) {
  // The id arrives from the browser, so ownership has to be proved here.
  // Without this check any signed-in account can start ad spend on someone
  // else's business, and read their leads back through the status route.
  const session = await requireSession();
  const customer = await db.customer.findFirst({
    where: { id: customerId, accountId: session.accountId },
  });
  if (!customer) throw new Error("Unknown customer");

  // Three things come from YOUR database, and only three:
  //   customer.id          → vendorRef, how this campaign stays attributable
  //   customer.websiteUrl  → required, everything else is derived from it
  //   customer.name        → optional; fall back to the domain
  // Find where these already live in your schema rather than adding new
  // columns for them.
  if (!customer.websiteUrl) throw new Error("A website URL is required");
  const businessName =
    customer.businessName?.trim() ||
    new URL(customer.websiteUrl).hostname.replace(/^www\./, "");

  const mcp = await pixero();

  // 1. Their workspace. Call this on EVERY launch, not just the first: it is
  //    idempotent by name, so an existing customer resolves to the workspace
  //    they already have. Nothing to remember, no first-run branch.
  const created = await mcp.call("create_brand_workspace", {
    name: businessName,
    integration: process.env.PIXERO_INTEGRATION!,
  });
  if (!created.ok) throw new Error(created.error);
  const workspaceId = created.data.workspaceId;

  // Store it. Every later call for this customer needs it, and looking it up
  // by name again is how two customers with similar names get mixed up.
  await db.customer.update({
    where: { id: customerId },
    data: { pixeroWorkspaceId: workspaceId },
  });

  // 2. Their brand profile, from their own site. Skip if you already did it:
  //    re-submitting corrects rather than duplicating, but it costs time.
  if (!customer.pixeroProfileSubmitted) {
    const draft = await mcp.call("analyze_brand_website", {
      url: customer.websiteUrl,
    });
    if (!draft.ok) throw new Error(draft.error);

    const saved = await mcp.call("submit_brand_profile", {
      url: customer.websiteUrl,
      workspaceId,
      // Correct anything you already know better than a website scrape, but
      // only within the accepted fields: anything else is dropped. The
      // business name is not one of them; it comes from the workspace name
      // you passed to create_brand_workspace.
      answers: {
        ...draft.data.answers,
        service_areas: customer.serviceAreas ?? draft.data.answers.service_areas,
      },
    });
    if (!saved.ok) throw new Error(saved.error);
    await db.customer.update({
      where: { id: customerId },
      data: { pixeroProfileSubmitted: true },
    });
  }

  // 3. Launch. The idempotency key must be STABLE for this launch attempt: on
  //    a retry, the same key resumes; a new one starts a second live campaign.
  const idempotencyKey = `launch-${customerId}-${customer.launchAttempt}`;

  const launched = await mcp.call("autopilot_launch_campaign", {
    workspaceId,
    brief: `Lead-gen for ${businessName}. ${customer.pitch}`,
    // The number the user typed, not a stored default.
    dailyBudget,
    vendorRef: customerId,
    idempotencyKey,
    confirm: true,
  });
  if (!launched.ok) throw new Error(launched.error);

  // Store the canvasId permanently, not just for the resume. It is the handle
  // for stopping and pausing later, and there is no way to look it up from a
  // campaign id afterwards. Throwing it away is how a customer ends up with a
  // campaign they cannot turn off.
  await db.customer.update({
    where: { id: customerId },
    data: { pixeroCanvasId: launched.data.canvasId },
  });

  // A long launch can exceed one request. It returns the stage it reached;
  // call again with the SAME key to carry on.
  if (launched.data.stage && !launched.data.campaignId) {
    return { status: "in_progress", stage: launched.data.stage, idempotencyKey };
  }

  return { status: "live", campaignId: launched.data.campaignId };
}

import { pixero } from "@/lib/pixero";
import { db } from "@/lib/db";
import { requireSession } from "@/lib/auth";

/**
 * What renders next to the button: is it running, and what has come in.
 * Scoped to one customer by the id your platform already knows them by.
 */
export async function statusFor(customerId: string) {
  // Same ownership check as launch. This route returns leads, which are
  // personal data belonging to someone else's business.
  const session = await requireSession();
  const owned = await db.customer.findFirst({
    where: { id: customerId, accountId: session.accountId },
  });
  if (!owned) throw new Error("Unknown customer");

  const mcp = await pixero();
  const result = await mcp.call("get_vendor_status", {
    vendorRef: customerId,
    leadLimit: 25,
  });
  if (!result.ok) throw new Error(result.error);

  return {
    live: result.data.live,
    campaigns: result.data.campaigns,
    leads: result.data.leads,
  };
}

import { pixero } from "@/lib/pixero";
import { db } from "@/lib/db";
import { requireSession } from "@/lib/auth";

/**
 * Stop and pause. They are different things and both are needed.
 *
 *   stop   — the launch is still running. Halts it before it creates anything
 *            else. Whatever already reached Meta stays there with delivery
 *            off, and is reused if you launch again.
 *   pause  — the campaign is live. Turns delivery off. Nothing is deleted and
 *            it can be turned back on.
 *
 * Both act on the canvasId stored at launch, which is why it has to be kept.
 */
export async function setBudget(customerId: string, dailyBudget: number) {
  const session = await requireSession();
  const customer = await db.customer.findFirst({
    where: { id: customerId, accountId: session.accountId },
  });
  if (!customer) throw new Error("Unknown customer");

  const mcp = await pixero();
  // Changes the live campaign in place. The integration's ceiling is enforced
  // server side, so an over-cap value comes back as an error rather than
  // quietly spending more.
  const result = await mcp.call("set_vendor_budget", {
    vendorRef: customerId,
    dailyBudget,
  });
  if (!result.ok) throw new Error(result.error);
  return result.data;
}

export async function controlAds(
  customerId: string,
  action: "stop" | "pause" | "resume",
) {
  const session = await requireSession();
  const customer = await db.customer.findFirst({
    where: { id: customerId, accountId: session.accountId },
  });
  if (!customer?.pixeroCanvasId) throw new Error("Nothing to control");

  const mcp = await pixero();
  const result = await mcp.call("meta_launch_action", {
    canvasId: customer.pixeroCanvasId,
    // "cancel" is the mid-launch stop; "pause" and "activate" act on
    // delivery once the campaign exists.
    action:
      action === "stop" ? "cancel" : action === "pause" ? "pause" : "activate",
    ...(action === "resume" ? { confirm: true } : {}),
  });

  // Stopping a launch that already finished is the ordinary race, not an
  // error: the run completed between the click and this call.
  if (!result.ok && action === "stop" && /not publishing/i.test(result.error)) {
    return { ok: true, note: "Already finished; nothing was running to stop." };
  }
  if (!result.ok) throw new Error(result.error);
  return { ok: true };
}

import crypto from "node:crypto";
import { db } from "@/lib/db";

/**
 * Where leads land. Register this URL once with set_lead_destination, which
 * returns the signing secret.
 *
 * Read the RAW body. Parsing first and re-stringifying changes the bytes and
 * the signature will never match.
 */
export async function POST(request: Request) {
  const raw = await request.text();
  const signature = request.headers.get("x-pixero-signature") || "";

  const expected =
    "sha256=" +
    crypto
      .createHmac("sha256", process.env.PIXERO_WEBHOOK_SECRET!)
      .update(raw)
      .digest("hex");

  // Constant-time, and length-checked first because timingSafeEqual throws on
  // a length mismatch.
  const valid =
    signature.length === expected.length &&
    crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
  if (!valid) return new Response("Bad signature", { status: 401 });

  const payload = JSON.parse(raw);

  // vendorRef is the id you launched with, so no campaign map is needed.
  // Upsert, not create: Meta redelivers and Pixero retries, so the same lead
  // arrives more than once and a plain insert turns that into duplicates.
  await db.lead.upsert({
    where: { leadgenId: payload.lead.leadgen_id },
    create: {
      leadgenId: payload.lead.leadgen_id,
      customerId: payload.vendorRef,
      name: payload.lead.full_name,
      email: payload.lead.email,
      phone: payload.lead.phone,
      raw: payload.lead,
    },
    update: {},
  });

  // Answer 200 quickly. Slow handlers get retried, and a retry you have
  // already stored becomes a duplicate lead.
  return Response.json({ received: true });
}

"use client";

import { useState, useEffect } from "react";

/**
 * One customer's ads: the control surface beside your Launch button.
 *
 * What it deliberately does NOT ask for: the business name and the website.
 * Your platform already has both. Making a user retype what you know is the
 * fastest way to make a one-click feature feel like a form.
 *
 * What it must have: a daily budget the user sets, what has been spent, and a
 * way to stop. Pause becomes Resume once delivery is off, because a paused
 * campaign with no way back is a dead end.
 */
export function LaunchAds({ customerId }: { customerId: string }) {
  const [status, setStatus] = useState<any>(null);
  const [dailyBudget, setDailyBudget] = useState(20);
  const [busy, setBusy] = useState<string | null>(null);

  const refresh = async () => {
    const res = await fetch(`/api/ads/status?customerId=${customerId}`);
    const body = await res.json();
    setStatus(body);
    if (body?.dailyBudget) setDailyBudget(body.dailyBudget);
  };

  useEffect(() => {
    void refresh();
    // Meta takes a minute or two to report delivery and spend.
    const timer = setInterval(refresh, 30000);
    return () => clearInterval(timer);
  }, [customerId]);

  const post = async (path: string, body: object, label: string) => {
    setBusy(label);
    await fetch(path, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(body),
    });
    setBusy(null);
    void refresh();
  };

  const launching = busy === "launch";
  const hasCampaign = Boolean(status?.campaigns?.length);
  const money = (value: number | null) =>
    value == null ? "—" : `$${value.toFixed(2)}`;

  return (
    <div>
      {/* The budget is the user's decision and the only number they set. */}
      <label>
        Daily budget
        <input
          type="number"
          min={1}
          value={dailyBudget}
          onChange={(event) => setDailyBudget(Number(event.target.value))}
        />
      </label>

      {hasCampaign && (
        <div>
          <strong>{status.live ? "Ads are running" : "Ads are paused"}</strong>
          <div>Spent {money(status.totalSpend)} of {money(status.dailyBudget)} a day</div>
          <div>{status.leadCount} leads so far</div>
          <ul>
            {status.leads.map((lead: any, i: number) => (
              <li key={i}>
                {lead.name} — {lead.email || lead.phone}
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Stop halts a launch that is still building. Pause turns delivery off
          once it is live, and flips to Resume so it can be turned back on. */}
      {launching ? (
        <button onClick={() => post("/api/ads/control", { customerId, action: "stop" }, "stop")}>
          Stop
        </button>
      ) : hasCampaign && status?.live ? (
        <button onClick={() => post("/api/ads/control", { customerId, action: "pause" }, "pause")}>
          Pause
        </button>
      ) : hasCampaign ? (
        <button onClick={() => post("/api/ads/control", { customerId, action: "resume" }, "resume")}>
          Resume
        </button>
      ) : null}

      {/* Editing the budget on a live campaign, without relaunching. */}
      {hasCampaign && (
        <button
          onClick={() => post("/api/ads/budget", { customerId, dailyBudget }, "budget")}
          disabled={busy !== null}
        >
          Save budget
        </button>
      )}

      {/* Stays available: a paused customer, or one who wants a second
          campaign, has nowhere else to go. */}
      <button
        onClick={() => post("/api/ads/launch", { customerId, dailyBudget }, "launch")}
        disabled={busy !== null}
      >
        {launching ? "Launching…" : hasCampaign ? "Launch another" : "Launch ads"}
      </button>
    </div>
  );
}