Broker implementation demo

This is what the site-owned CMS should feel like.

The website owns the editor UI. Usable CMS supplies the marketplace app, login, workspace checks, safe write operations, uploads, publish, and restore through the broker.

View the editor shape See broker wiring

Site-owned editor

An in-context CMS entry point hosted by the customer site.

A generated or hand-built /cms route can use the same components, content model, and preview state as the public website while delegating auth and writes to cms.usable.dev.

Spring collection

Make room for calmer workdays.

Plan the week, publish updates, and keep the team moving with content that feels at home in the website.

home.hero.titlegallery image

Auth Broker boundary

The browser sees operation results, not Usable secrets.

The public integration key identifies the site and allowed origin. Usable tokens, role checks, CSRF protection, draft writes, publishes, uploads, and restores stay behind cms.usable.dev.

Usable session verified on cms.usable.dev

Workspace role allows draft and publish

Origin matches the registered production URL

Public ucms_ key identifies the site only

Draft, publish, asset, version, restore, and safe assistant requests are routed through /api/broker/*.

Implementation shape

Prompt your builder for a real CMS route.

Ask Codex, Claude Code, Usable Chat, Lovable, or another code generator to create the editor inside your site, load broker.js, define the manifest, and deploy with exact origins.

Public ucms_ keyServer-held secrets

Broker client sketch

const broker = new window.UsableCmsBroker({
  site: "northstar-studio",
  token: process.env.NEXT_PUBLIC_USABLE_CMS_TOKEN,
  cmsOrigin: "https://cms.usable.dev"
});

await broker.connect();
const content = await broker.content({
  fragmentIds: ["site-content"]
});