Usable CMS for AI-built websites

Build a website your team can edit with Usable.

Bring your favorite AI coding tool, install the free Usable CMS Marketplace app, connect the site to cms.usable.dev, and deploy it anywhere suitable for your project.

Usable accountFree marketplace appAI-generated websiteAny suitable host

Start the recipe Copy the prompt

What you need first

Three pieces make the setup work.

Usable CMS is the editing and authorization layer. Your website is still your website, and your deployment platform is still your deployment platform.

A Usable account

Your CMS editors sign in with Usable. Workspace membership decides who can edit, publish, restore, or manage setup.

The free Usable CMS app

Install Usable CMS from the Usable Marketplace so the site can use the brokered login, file upload, publish, and version APIs.

A place to deploy

Use Vercel, Netlify, Render, Railway, Fly.io, Cloud Run, GitHub Pages for static sites, your own Kubernetes, or another host that fits your project.

Step-by-step setup

From blank idea to editable website.

The path is intentionally tool-agnostic. Your AI builder creates or adapts the code; Usable CMS provides the account, workspace, app authorization, and safe content operations.

Give the agent the setup prompt

Tell any coding agent: create a website that uses https://cms.usable.dev. The page prompt points it at capabilities, register, and the live skill index.

Agent logs in with device code

The agent calls /api/auth/device/start, shows the user code and login URL, then polls /api/auth/device/poll until Usable returns a setup token.

Register the CMS site

The agent calls /api/setup/register. Usable CMS creates or updates the workspace, global/page fragments, server token permissions, site id, public ucms_ key, binding, and manifest.

Implement public render and broker editor

The agent uses the default wysiwyg-login-gated-multi-page mode, then wires server-only public reads with cache and /cms?page=<page> broker editing with no-store.

Deploy and smoke test

The setup kit returns public/server env vars, broker snippet, manifest sync URL, skill URLs, and smoke commands. Server tokens stay server-only.

Manifest model

Flexible enough for many sites, strict enough to publish safely.

Manifest v2 is a strict, version-negotiated contract. Generic field and collection declarations compile deterministically, while the broker rejects unknown versions, undeclared paths, unsafe values, and index-addressed v2 collection edits before content is written.

Exact fields for fixed content

Declare stable paths such as hero.title, metadata.description, or customCss when there is only one editable value.

Wildcards for repeated entries

Use * as one complete path segment: hero.choices.*.text matches hero.choices.0.text, but not hero.choices.0.unsafeHtml.

Collections for reusable structure

In manifest v2, declare UUID item identity, fields, allowed block types, min/max constraints, and stable add/update/move/remove/restore operations.

Reject everything else

The broker keeps unknown siblings, broad prefixes, unsafe hrefs/images, invalid enums, and undeclared JSON branches outside the publish path.

Strict manifest v2 shape

{
  "version": 2,
  "schemaVersion": "cms-manifest.2",
  "compatibility": {
    "readableVersions": [1, 2],
    "writableVersions": [2],
    "minimumAdapterVersion": 2
  },
  "projectionCompatibility": {
    "keyVersion": 1,
    "legacyKey": "<workspace>:manifest:<site>",
    "retirement": {
      "allSitesOnVersion": 2,
      "allAdaptersSupportVersion": 2,
      "projectionRebuildVerified": false
    }
  },
  "regions": [],
  "fields": [
    { "id": "hero.title", "kind": "text", "label": "Hero title", "path": "hero.title" },
    { "id": "metadata", "kind": "object", "label": "Metadata", "path": "metadata",
      "properties": [{ "id": "description", "kind": "text", "label": "Description", "path": "description" }] }
  ],
  "collections": [
    {
      "id": "content.blocks",
      "label": "Content blocks",
      "path": "content.blocks",
      "itemIdentity": "stable-id",
      "itemIdentityPath": "id",
      "blockTypePath": "type",
      "allowedBlockTypes": ["text", "image"],
      "allowedOperations": ["add", "update", "move", "remove", "restore"],
      "constraints": { "minItems": 1, "maxItems": 40 },
      "fields": [
        { "id": "title", "kind": "text", "label": "Title", "path": "title" },
        { "id": "body", "kind": "text", "label": "Body", "path": "body" }
      ]
    }
  ]
}

Prompt any builder

Use the AI toolbox you already like.

The important part is not the brand of builder. Tell it to create a website that uses https://cms.usable.dev; the prompt below tells it to fetch the default WYSIWYG skill index and follow the setup flow.

Codex

Great for repository work: add the manifest, broker client, tests, build checks, and deployment configuration in the actual codebase.

Claude Code

Useful for adapting an existing app, keeping local patterns intact, and wiring the CMS model into real pages and routes.

Usable Chat

Use workspace context to shape the site brief, content model, prompt, and implementation checklist before or during code generation.

Lovable

Start from a polished generated website, then ask for the Usable CMS connection, editable regions, and deployment-ready environment variables.

Copy this prompt

Build a beautiful, useful website for <website name>.

Use https://cms.usable.dev for CMS editing.

Follow the Usable CMS agent-first setup flow:
- Fetch https://cms.usable.dev/api/setup/capabilities.
- Use the default setup mode: wysiwyg-login-gated-multi-page.
- Fetch https://cms.usable.dev/api/setup/skills and load only skills tagged ucms:setup-skill.
- Default to these setup skills when present: usable-cms-public-renderer and usable-cms-wysiwyg-broker-editor.
- If the site needs forms, orders, signups, bookings, or other server-stored data, also load usable-cms-backend-data from the skill catalog.
- If the site should let CMS editors create new pages from templates, also load usable-cms-page-templates from the skill catalog and register with features:["page-templates"] plus pageTemplates[].
- Treat usable-cms-wysiwyg-broker-editor as the default editor skill; it includes multi-page routing, login gate, publish feedback, local draft recovery, section ordering, image editing, and manifest sync requirements.
- Start Usable device login through /api/auth/device/start. Show both the manual verification_uri + user_code and the prefilled verification_uri_complete when present. Poll /api/auth/device/poll with both device_code and signed device_state, respect interval/slow_down until expires_at, and handle approved, denied, expired, consumed replay, and invalid as distinct terminal states.
- Register the site through /api/setup/register with site name, exact allowed origins, selected default skill ids, globalContent, pages, and an initial manifest when useful. When binding an existing Usable workspace, include its workspaceId; setup must then resolve types and write only in that workspace.
- Model content as one global config fragment plus one CMS Page fragment per page. Use manifest scope:"global" for shared config and scope:"page" with pageId for page-local fields.
- Treat /api/setup/register as idempotent. It succeeds only after durable exact-manifest readback. Reuse returned existing workspace/site/key/token metadata. Re-register with serverTokenAccess:"read-write" only when the site needs server-side writes to Usable, such as forms, orders, signups, CMS-created pages, or other submitted data. Never create a replacement token merely because its existing permissions need repair.
- Use the returned workspace id, site id, contentFragments.global.fragmentId, contentFragments.pages[].fragmentId, signed ucms1. public key, server-only USABLE_CMS_SERVER_TOKEN, broker snippet, skill URLs, manifest sync URL, and smoke commands.
- Write agent-visible project instructions in AGENTS.md and, when relevant, CLAUDE.md. If the target agent supports local skills, also write/install the native skill file in that agent's discoverable skill directory. Include how to fetch the Usable CMS skill index, selected skill URLs, a daily refresh rule to pull latest selected skills from /api/setup/skills, site id, workspace id, global and page fragment ids, manifest paths, env var names, cache rules, /cms route, validation commands, how to re-register setup, how to add new skills from the catalog, and how to create Usable fragment types for backend data such as forms or orders. Do not write secret token values into the spec.
- Build real multi-page public routes, not a SPA.
- Add /cms?page=<page> editor routes with the WYSIWYG broker editor as the default editing experience.
- When page templates are enabled, add a + Page flow in the WYSIWYG Pages tab: show template cards, validate title/slug/path, optionally add to navigation, create exactly one new CMS Page fragment server-side, sync page-scoped manifest entries with the full new fragment UUID, then navigate to /cms?page=<new-page-id>.
- Guard /cms before showing editor tools. Show a checking auth state first with a spinning or pulsing lock icon, then show the signed-out CMS login gate when needed. The Sign in action must use same-tab broker login, not popup/new-tab login.
- Render public pages with server-only Usable reads and sensible cache/revalidation.
- Render /cms with no-store.
- For forms/orders/data submissions, create server-only routes that use the read-write server token to create Usable memory fragments with dedicated fragment types. Never write submitted data from browser code.
- Model editable text, images, navigation, forms, sections, collections, and page content in the CMS manifest.
- For new collection/block integrations, send manifest version:2 with schemaVersion:"cms-manifest.2", compatibility and projectionCompatibility metadata, itemIdentity:"stable-id", a UUID itemIdentityPath, and add/update/move/remove/restore operations. Address items and move anchors by UUID, never by array index.
- Sync the complete final manifest through /api/setup/manifest with mode:"repair" and all five families: regions, pages, pageTemplates, fields, and collections. This endpoint repairs only the manifest and must not create setup resources. If it returns MANIFEST_SYNC_INCOMPLETE, use its phase/count/fingerprint/missing details, resend the complete declaration, and do not continue until readback succeeds.
- Validate editing, draft save, publish, page switching, signed-out login gate, public rendering, device-code replay, and a second registration that reuses every resource id.
- Keep USABLE_CMS_SERVER_TOKEN out of browser code and out of broker.js. Treat USABLE_CMS_RENDERER_READ_TOKEN as a legacy alias only; do not introduce it in new projects.

Deploy wherever the site fits

Free or paid depends on the host and the workload.

A usable-cms-enabled website can be static, server-rendered, or containerized. The key is that production has HTTPS, exact origins, safe environment variables, and a refresh strategy after content changes.

Fast Next.js hosting

Vercel and Netlify are natural fits for many public websites, especially when you want route handlers, server rendering, or revalidation.

App platforms

Render, Railway, Fly.io, Cloud Run, DigitalOcean App Platform, and similar hosts work well when your site needs a server or container.

Static hosting

GitHub Pages and other static hosts can work when the site exports static files and either rebuilds after publish or fetches safe public content.

Your own platform

Flowcore Kubernetes, another Kubernetes cluster, or a private VPS is fine as long as HTTPS, secrets, headers, and deploy automation are handled.

Auth Broker and write plane

A CMS layer without putting write tokens in your website.

Your deployed site owns the editing UI, routes, and hosting. cms.usable.dev handles Usable sign-in, workspace checks, draft/publish, uploads, version history, restore, and safe assistant actions.

Auth Broker production flow is live for in-site editors.

Public integrations use exact allowed origins and public ucms_ integration keys.

Torshavn Marathon, Favna, and KST use customer-site CMS routes backed by the broker.

In-site editing

Editors work inside the CMS experience your own site provides.

Assets and files

Upload images through Usable and reference safe CMS asset URLs from the website.

Structured content

Model news, pages, sponsors, navigation, footer links, nested sections, localized fields, and scalar lists.

Safe publish

Unknown paths, unsafe links, bad image references, and guarded deletes are rejected before write.

Brokered auth

Usable tokens stay on cms.usable.dev; customer-origin JavaScript receives only safe operation results.

Versioned recovery

Publish with restore points so editors can roll back content without redeploying code.

Enhance an existing website

Ask your coding tool to preserve the current design while adding a Usable CMS workspace, manifest, broker client, exact-origin setup, and deploy-time environment variables.

Launch with editing built in

Start a new AI-generated site with editable copy, collections, images, drafts, publish, restore, and a clear deployment checklist from day one.