Build a White-Label Email Editor

npm install @brew.new/sdk@^13.0.0

// Server only. Never import this client into browser code.
import { createBrewClient } from '@brew.new/sdk'

const platform = createBrewClient({ apiKey: process.env.BREW_API_KEY! })

const created = await platform.brands.create(
  { url: 'https://example.com' },
  { idempotencyKey: 'customer-42-brand-onboarding-001' },
)

console.log(created.brandId, created.status)

const status = await platform.brands.waitForExtraction(created.brandId, {
  maxWaitMs: 300_000,
})
if (!status.ready) {
  throw new Error(status.error ?? `Brand is ${status.status}.`)
}

const customer = platform.withBrand(created.brandId)

const generated = await customer.emails.generate(
  {
    prompt: 'Create a product update for customers who subscribed to our newsletter.',
    subjectLine: 'What is new this month',
  },
  { idempotencyKey: 'customer-42-product-update-001' },
)
if (!('emailId' in generated)) {
  throw new Error(generated.response)
}

console.log(generated.emailId, generated.emailVersionId)

const edited = await customer.emails.edit({
  emailId: generated.emailId,
  prompt: 'Shorten the opening paragraph and make the main button say Explore the update.',
})
if (!('emailId' in edited)) {
  throw new Error(edited.response)
}

const session = await customer.canvas.sessions.create({
  target: { type: 'email', emailId: generated.emailId },
  user: { externalId: 'customer-42:user-7', name: 'Alex' },
  parentOrigin: 'https://admin.example.com',
  permissions: ['read', 'edit', 'presence'],
})

'use client'
import { useRef, useState } from 'react'
import { EmailCanvas, type EmailCanvasHandle } from '@brew.new/sdk/react'
import { createCanvasSessionProvider } from '@brew.new/sdk/embed'

type EditorProps = {
  emailId: string
  csrfToken: string
  onSaveComplete: () => void | Promise<void>
}

export function CustomerEmailEditor({ emailId, csrfToken, onSaveComplete }: EditorProps) {
  const canvas = useRef<EmailCanvasHandle>(null)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const getSession = createCanvasSessionProvider('/api/brew/canvas-session', {
    headers: () => ({ 'X-CSRF-Token': csrfToken }),
  })

  async function save() {
    if (!canvas.current) return
    setErrorMessage(null)
    try {
      await canvas.current.flush()
    } catch {
      setErrorMessage('Your edits could not be saved. Keep the editor open and try again.')
      return
    }
    try {
      await onSaveComplete() // Request HTML from your own authorized backend.
    } catch {
      setErrorMessage('Your edits are saved, but the HTML could not be retrieved. Try again.')
    }
  }

  return (
    <>
      <button type="button" onClick={save}>Save email</button>
      {errorMessage && <p role="alert">{errorMessage}</p>}
      <EmailCanvas
        ref={canvas}
        emailId={emailId}
        getSession={getSession}
        style={{ height: '80vh' }}
        onError={(error) => setErrorMessage(error.message)}
      />
    </>
  )
}

const saved = await customer.emails.get(generated.emailId, { include: 'html' })
if (saved.status !== 'ready' || !saved.html) {
  throw new Error('The email HTML is not ready.')
}

console.log(saved.emailId, saved.emailVersionId, saved.html)

Implement a private white-label email editor in this existing admin app.
Canonical guide: https://docs.brew.new/sdks/typescript/white-label-email-editor
Read the guide and inspect this app before editing. Use its existing auth,
tenant model, database, framework, CSRF protection, and test conventions.
Use @brew.new/sdk 13.0.0 or newer; upgrade an older installed dependency.
Do not add an auth provider, database, job system, or new framework. Use
existing background work only if this host cannot wait for email generation.

Build four small pieces:
1. A server-only @brew.new/sdk client using one organization API key from
BREW_API_KEY (brands and emails scopes), plus persisted tenant-to-brandId and
email ownership records. Create the brand once, persist its ID immediately,
and poll only while status is extracting. On any other status, stop polling;
continue only if ready is true, otherwise show the status/error, including
completed with ready false. Use brands.waitForExtraction with a bounded,
cancelable wait when the host allows it; otherwise expose brands.get through
the existing status path and poll with a deadline.
2. Authenticated generation/edit endpoints. Select the brand from trusted
tenant records through withBrand, generate one email without mandatory groups
or context reads, handle the response union, and persist email ownership.
PATCH edits have no replay protection: after an ambiguous timeout reconcile
saved versions and running state before any intentional paid retry.
EMAIL_RESULT_UNAVAILABLE means read the committed version's HTML, not rerun.
Persist its committed IDs in this tenant's ownership records before recovery.
3. A same-origin canvas session endpoint using the app's auth and CSRF checks.
Authorize the email against the caller's tenant on every create and renewal.
Store session ownership, target, brand, and permissions; verify all of them
before refresh. Never trust a browser tenant, brand, target, or session ID as
authority. Set parentOrigin from trusted deployment configuration, use stable
tenant-qualified user IDs, return direct JSON with Cache-Control: no-store,
and revoke grants on sign-out/access removal with the issuing API principal.
No public client IDs or Brew API credentials belong in this private browser UI.
4. One EmailCanvas emailId/getSession component with real CSRF header support.
Use createCanvasSessionProvider headers to read the current CSRF token on
each create and renewal. Your save action must await flush before
calling an authenticated server endpoint to read saved HTML. A save failure
keeps the editor mounted and reports visible, accessible feedback. Distinguish
failed flush from failed HTML retrieval after a successful save. A default
HTML read returns latest; for exact saved output, retain the canvas onSaved
emailId and non-null emailVersionId, authorize their ownership, and pin that
version in the backend GET. Flush does not promote a historical version.

Test with mocked Brew calls and local fixtures. Cover tenant and session-ID
substitution, missing/invalid CSRF, extraction failure/timeout, read-only and
revoked access, renewal, response variants, interrupted PATCH, flush failure,
successful persisted HTML, a historical saved-version read, and an HTML-read
failure after successful save.
No live API calls, paid generation, or sends.
Run the app's relevant checks and report changed files, tests, required server
configuration, installed SDK version, and remaining blockers.