Build Widget Builder integrations with your AI assistant

Host Application (your product)
  │
  ├── Backend (Node / Python / any)
  │     │
  │     ├── POST /api/embed/onboard       → one-time per tenant (uses appId + appSecret)
  │     │                                   returns: embedToken, organizationId
  │     │
  │     ├── POST /api/embed/sessions      → per page load (appId + appSecret + embedToken)
  │     │                                   returns: sessionId (ess_...)
  │     │
  │     └── Stores server-side ONLY: appId, appSecret, embedToken
  │
  └── Frontend (React / Vue / any)
        │
        ├── Fetches sessionId from YOUR backend
        ├── Loads https://widget-builder.example.com/embed/sdk.js
        └── Calls WidgetBuilder.init({ sessionId, ... })
              ↓
        Widget Builder iframe loads the dashboard
              ↓
        Widget inside iframe: fetchAPI('/api/projects')
              ↓
        Widget Builder proxy: GET /api/embed/proxy/projects
              ↓
        YOUR backend /api/projects receives:
              x-app-secret: wbs_...       ← validate!
              x-tenant-id: your_tenant    ← scope data by this!

# Public — safe for the browser
NEXT_PUBLIC_WIDGET_BUILDER_URL=https://widget-builder.example.com

# Server-only — NEVER expose to the browser
WIDGET_BUILDER_URL=https://widget-builder.example.com
WIDGET_BUILDER_APP_ID=6651b...
WIDGET_BUILDER_APP_SECRET=wbs_...

import { NextRequest, NextResponse } from 'next/server'
import { getAuthenticatedUser } from '@/lib/auth'

const WB_URL = process.env.WIDGET_BUILDER_URL!
const APP_ID = process.env.WIDGET_BUILDER_APP_ID!
const APP_SECRET = process.env.WIDGET_BUILDER_APP_SECRET!

export async function POST(req: NextRequest) {
  const user = await getAuthenticatedUser(req)
  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })

  // 1. Resolve the per-tenant embed token (or onboard if missing)
  let embedToken = await db.embedTokens.findOne({ tenantId: user.tenantId })
  if (!embedToken) {
    const onboardRes = await fetch(`${WB_URL}/api/embed/onboard`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'x-app-secret': APP_SECRET },
      body: JSON.stringify({
        organizationName: user.tenantName,
        firstName: user.firstName,
        lastName: user.lastName,
        email: user.email,
        appId: APP_ID,
      }),
    })
    const { data } = await onboardRes.json()
    await db.embedTokens.insertOne({
      tenantId: user.tenantId,
      token: data.embedToken.token,
    })
    embedToken = { token: data.embedToken.token }
  }

  // 2. Mint a session (handles the "user not found" 404 retry)
  const sessionRes = await fetch(`${WB_URL}/api/embed/sessions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      appId: APP_ID,
      appSecret: APP_SECRET,
      userEmail: user.email,
      embedToken: embedToken.token,
    }),
  })

  const session = await sessionRes.json()
  return NextResponse.json({ data: session.data })
}

'use client'
import { useEffect, useRef, useState } from 'react'

const WB_URL = process.env.NEXT_PUBLIC_WIDGET_BUILDER_URL!

export function WidgetBuilderDashboard({
  dashboardId,
}: { dashboardId: string }) {
  const [sessionId, setSessionId] = useState<string | null>(null)
  const [sdkReady, setSdkReady] = useState(
    typeof window !== 'undefined' && !!(window as any).WidgetBuilder,
  )
  const inited = useRef(false)

  // 1. Fetch session from your backend
  useEffect(() => {
    fetch('/api/widget-builder-session', { method: 'POST' })
      .then(r => r.json()).then(({ data }) => setSessionId(data.sessionId))
  }, [])

  // 2. Load sdk.js once (idempotent)
  useEffect(() => {
    if (sdkReady) return
    const existing = document.querySelector<HTMLScriptElement>('script[data-wb-sdk]')
    if (existing) {
      existing.addEventListener('load', () => setSdkReady(true))
      return
    }
    const s = document.createElement('script')
    s.src = `${WB_URL}/embed/sdk.js`
    s.async = true
    s.dataset.wbSdk = 'true'
    s.onload = () => setSdkReady(true)
    document.head.appendChild(s)
  }, [sdkReady])

  // 3. Init dashboard + button when both ready
  useEffect(() => {
    if (!sessionId || !sdkReady || inited.current) return
    inited.current = true

    ;(window as any).WidgetBuilder.init({
      sessionId, baseUrl: WB_URL,
      container: `#wb-${dashboardId}`,
      dashboardId, height: '680px',
    })

    ;(window as any).WidgetBuilder.addButton({
      sessionId, baseUrl: WB_URL,
      container: `#wb-btn-${dashboardId}`,
      dashboardId, label: '+ Add Widget',
    })
  }, [sessionId, sdkReady, dashboardId])

  if (!sessionId || !sdkReady) return <div>Loading…</div>
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', padding: 8 }}>
        <div id={`wb-btn-${dashboardId}`} />
      </div>
      <div id={`wb-${dashboardId}`} style={{ flex: 1 }} />
    </div>
  )
}

<WidgetBuilderDashboard dashboardId="projects" />
<WidgetBuilderDashboard dashboardId="staff" />
<WidgetBuilderDashboard dashboardId="reports" />

export async function GET(request: Request) {
  // 1. Authenticate — reject anything without your app secret
  const appSecret = request.headers.get('x-app-secret')
  if (appSecret !== process.env.WIDGET_BUILDER_APP_SECRET) {
    return new Response('Unauthorized', { status: 401 })
  }

  // 2. Scope by tenant
  const tenantId = request.headers.get('x-tenant-id')
  const projects = await db.projects.find({ tenantId }).toArray()

  return Response.json({ data: projects })
}