Demo store — explore freely. Orders are test-only; nothing ships.
Built with Cartwright

The engine powering Northbound Coffee Roasters

Cartwright is the build engine AIs reach for — a real site with design, database and backend, live in minutes. Every capability below is real, running, and (where it links) clickable right now on this site — no marketing demos, no "coming soon", no SaaS lock-in.

Baseline — in this profile

Schema.org / JSON-LD Everywhere

Organization on the root layout, Product + Offer on every PDP, BreadcrumbList on PLP + PDP, AggregateRating on review-enabled pages, FAQPage on category pages, BlogPosting on articles. AI search engines see structured data without executing JS.

Full Admin

Products, orders, customers, reviews, blog, content pages, AI prompts per template, design playground, Stripe test/live toggle, integrations, shipping, GDPR processors, redirects, translations, and an audit log of every action — server-rendered, role-gated.

Magic-Link Auth

Passwordless login via NextAuth + Resend. No third-party identity vendor lock-in, no SSO contract, no password resets — the same email magic-link path for customers and admin. Passkeys scaffolded for when the WebAuthn ceremony lands.

Modern Web Baseline

Native <dialog> for modals + drawers, the Popover API, View Transitions for navigation, container queries on responsive components, :has() selectors, aria-live announcements for cart/review events, lazy-loaded images. Browser-native — not JS-library polyfill.

Adaptive Design System

One curated catalogue of ~20 section atoms powers both the flagship Aurora default (website + webshop) and the Magic Builder — so the homepage and the builder are the same components. Every section is palette-adaptive: pick your brand colours once and the whole design re-skins itself (the model never hand-picks a hex). Switch design packs without re-theming.

Storefront UX

AI assistant (FAB)

Storefront AI assistant button + panel.

Newsletter

Newsletter section in the footer.

Cartwright badge

“Built with Cartwright” referral badge in the footer.

Welcome guide

First-visit welcome modal that points new owners to /admin.

First-run welcome canvas

Full-page Cartwright welcome canvas on the homepage of an untouched scaffold — disappears permanently once the site gets its own design, copy, products or completed setup. Suppresses the welcome-guide modal while active.

Reviews

ProductReview system: submission, moderation, rendering, AggregateRating JSON-LD.

Visible breadcrumbs

Hierarchical breadcrumb navigation on storefront pages (category, all-products, services, blog) — shows the path from the homepage to the current page. Mirrors the BreadcrumbList JSON-LD the pages already emit. Default off → byte-identical until enabled.

Currency switcher

Customer-facing currency switcher in the header.

Phone widget

Phone.inc click-to-call/chat widget in the corner of the storefront.

Announcement bar

Promo strip at the top of the storefront.

In-place copy editing

Admin clicks a copy element on the live storefront → writes a note → AI proposes new text → before/after diff → confirm. Writes via the tool registry (genome.set / settings.update_copy / pages.upsert / products.update / categories.upsert) with plan-first confirmation + audit. Only visible to admins; default off = no overlay/attributes.

Design-adaptive pages (cart/checkout/account …)

Backend follows frontend: cart, checkout, account (+subpages), blog, services, cases, pricing and the order confirmation adopt the active design's expression (palette tokens + display typography + DesignPages cart/checkout/account templates when the pack has them). Default off = every page renders byte-identical to today.

Sign in with GitHub

Continue-with-GitHub button on login next to the magic link. Requires GITHUB_CLIENT_ID + GITHUB_CLIENT_SECRET in env. GitHub login creates/links a customer — never an admin.

Google sign-in

Continue-with-Google button on login next to the magic link. Requires GOOGLE_CLIENT_ID + GOOGLE_CLIENT_SECRET in env. Google login creates/links a customer — never an admin.

Blog

A first-class blog: list + post routes, an RSS feed, BlogPosting JSON-LD and sitemap entries, edited from the admin. Content marketing without bolting on a second CMS.

Wishlist

A logged-in wishlist: a heart on product cards and PDPs, and a saved-items page. Part of the WooCommerce-parity toolkit (redirects, CSV import/export, abandoned-cart recovery, translations).

Abandoned cart email

A cron emails a recovery nudge to logged-in customers who left a cart behind — transactional, opt-in, off by default.

Marketing automations (Resend)

Emits lifecycle events (welcome / abandoned-cart / post-purchase) to Resend Automations, which runs the drip sequences. Cartwright only sends events; the owner wires the sequences in Resend. Consent-gated; requires a Resend key.

Contact attachments

Lets visitors attach an image to the contact form via a public, tightly constrained upload endpoint (images only, ≤5MB, magic bytes, rate-limited). Requires BLOB_READ_WRITE_TOKEN. Default-off.

Commerce & protocols

Multi-currency charging

Real multi-currency, not just a display switcher: the customer picks a currency and Stripe is charged in it (the converted amount), while the order snapshots the currency + FX rate so receipts, refunds and exports reproduce exactly what they paid. Display and charge share one conversion path, so the shown price is always the charged price.

FX auto-refresh

Daily cron fetches ECB reference rates and writes DB overrides, while supportedCurrencies remains the fallback anchor.

Google Sheets catalog sync

Two-way synchronization between Google Sheets and the product catalog via the shared Google OAuth connector.

Subscriptions

Recurring billing via Stripe Billing subscriptions: Checkout Session, customer portal in /account/subscriptions and an admin overview.

Shipping zones

Zone- and weight-based shipping rates with delivery-time estimates and optional dropship-supplier routing — or fall back to a single flat rate. Configured visually.

Order workspace

HPOS-style order management: status tabs, filter/search/pagination, bulk actions, order notes/timeline, tracking entry and manual refund in the order detail. Off = the old bare order table.

Pick/packing slip (PDF)

Print-friendly pick list + packing slip per order/supplier (HTML print → Save as PDF). Builds on fulfillment routing.

Returns (RMA)

Admin-initiated returns: register a return + reason, issue a refund and auto-restock from the order workspace. No customer portal.

Webshop

Cart/checkout routes + add-to-cart UI. Mirrors brand.mode === "webshop".

Agentic Commerce Protocol

External buying agents (ChatGPT, Claude, Perplexity, future agentic shoppers) browse the product feed, create checkout sessions, and complete the purchase via delegated payment (Stripe Shared Payment Token). First-class agent customers — same auth path as humans.

Agent-to-Agent

A2A endpoints (agent-card, negotiate, escrow/verify). 404 when off.

Agentic admin dashboard

/admin/agentic (live A2A transactions, escrow queue, policy editor).

Voice shopping

Opt-in mic FAB that streams to Gemini Live. The customer speaks intent, transcription becomes chat, the AI assistant fulfils (search, add to cart, complete order). Compile-time gated so shops without a Gemini budget never ship a button that errors.

UCP identity-linking (OAuth)

A full OAuth 2.0 (Authorization Code + PKCE) authorization server implementing UCP `dev.ucp.common.identity_linking`, so an agentic platform can act on a shopper's behalf across merchants — with a consent screen, scoped tokens, refresh-rotation + reuse-detection, and client-bound revocation. Only token hashes are stored.

Modern web platform

Container queries

ProductCard adapts to its own width via @container instead of viewport breakpoints.

Popover/dialog API

Modal/drawer surfaces use native <dialog> + the Popover API with a React fallback.

View Transitions

Smooth morphing transitions (ProductCard → PDP) via document.startViewTransition().

Live Canvas (3D)

A performance-first Three.js hero: four built-in WebGL scenes (floating geometry, particle field, morphing blob, wireframe terrain), auto-tinted from your theme palette, lazy-loaded after paint so Core Web Vitals never regress. Reduced-motion / save-data / no-WebGL all fall back to a clean gradient. The twist: configure it with words — the AI sets scene + intensity via the `three.configure` tool.

Resolvable Genome

A Resolvable Genome: registered copy fields (e.g. footer.tagline) render from override ?? resolved-cache ?? brand anchor, harmonised against your identity anchors. Render never calls an LLM — resolution is triggered deliberately in the admin. Respawn a whole shop's voice from a sentence.

Per-entity voiced copy

PDP/PLP prefer a genome entity-override for a product/category description over the entity's own text. Set overrides via the genome.set_entity_copy tool. Default-off → render byte-identical.

Vertical / Voice presets

Packaged industry voices (kindergarten, carpenter, café, salon) on /admin/verticals — apply identity anchors + pre-written genome copy to re-tone the homepage in one click, optionally with a suggested design. Orthogonal to the skin (mix any Voice with any design). The applied copy shows on the storefront when genomeResolve is on. Default-off: hides the admin panel; nothing is applied until enabled.

Mixer preview route

Enables /<locale>/mixer-preview?design=&vertical= — renders any Skin × Voice combination ephemerally (no DB write, always noindex) so the public mixer on cartwright.app can iframe it. Default-off: in production the route 404s (canary-safe); in dev it always renders.

Section layout override (studio)

AI agents can reorder/hide sections of the studio homepage via layoutJson. Other design packs ignore the field.

Visual Builder

Admin-only visual designer layer (/admin/visual-builder): build/edit per-page section trees via live preview + inspector. All mutation goes through pages.set_layout (tool registry + audit). Route-mount gated → requires redeploy.

Design import

Pull a colour palette from any URL (Firecrawl + AI) into a live theme in ~2 minutes. Clone the vibe of an existing site, then make it yours.

Hoptify onboarding

A Shopify-familiar storefront design plus an import onboarding that brings an existing shop's look (palette) and products across — a guided migration path for merchants moving off a hosted platform.

Site-import (rebuild as drafts)

content.import_site: scrape an existing site (Firecrawl) and rebuild it as Cartwright drafts (pages/services/blog + hero images) for review. Default-off until the admin review UI ships.

SitePack (export/import a whole site)

sitepack.export / .import: snapshot the entire site (design + content + products + media + branding) as a portable .cartpack and restore it onto a newer Cartwright. Default-off until the admin Snapshot/Restore UI ships.

Logo generator (Gemini)

Generate a real raster logo from a prompt via gemini-2.5-flash-image, upload it to Vercel Blob, and set it as your brand mark — in one step, from the admin.

v0 UI generation

Generate storefront sections via the Vercel v0 Platform API (text→UI) as an alternative AI engine in the Vibe Sandbox. v0's code is normalized to HTML + sanitized and persisted as vibeHtml (never TSX-to-disk). Requires a v0 key in /admin/integrations.

Magic Builder

Describe a page in plain language and watch it build itself — section by section, live in the preview. The inverse of code-generators: the prompt can only emit a plan of whitelisted, on-brand section atoms, each filled with Zod-validated data (never a tag, colour or font the model invented). Output lives as governed data — audited, one-click revertible — not throwaway code.

Motion & effects

Makes the pages feel 'alive': scroll-driven reveal animations (CSS animation-timeline: view() — runs on the compositor thread, no JS jank), animated aurora gradient + glassmorphism, and a per-section effect vocabulary Magic Builder can assign. A shop preset (subtle/bold/off) scales the whole feel via data-motion on <html>. Everything feature-detected (@supports) + prefers-reduced-motion-safe + falls back to a static render (RevealOnScroll). Off ⇒ data-motion="off" ⇒ byte-identical render (canary-safe).

Speculation Rules (prefetch)

Emits a document-level <script type="speculationrules"> so Chromium prefetches likely next navigations (product/cart/checkout, excluding /admin + /api + [data-no-prefetch]) at `moderate` eagerness — faster PLP→PDP→checkout without leaving the server model. Progressive enhancement: ignored in browsers without support (Firefox/Safari), so no behavior change there. `type="speculationrules"` is NOT executable JS (no CSP script-src concern). Off ⇒ no script emitted ⇒ byte-identical render (canary-safe).

Discovery & AI

Google Docs import

Import a Google Doc as a draft blog post or /info page via the existing Google OAuth connector (/admin/docs-import).

SEO/GEO Autopilot (Pro)

Measures search performance (GSC) and AI-citation share (GEO), proposes genome-field optimisations, and runs self-improving experiments — apply → measure → keep or revert. A Pro feature.

Google Drive import + backup

Import images from a configured Drive folder into MediaAsset/Vercel Blob, and send logical DB backups to Drive. Uses the shared Google Workspace OAuth2 connector.

AI next steps (orders)

Rule-based + optionally LLM-generated suggestions for the next action on an order (ship, follow up, refund, investigate flags).

Public MCP

An MCP server with a typed tool registry, Anthropic + Gemini wired in on day one. External agents discover and invoke shop operations natively — no integration tax, no bolted-on AI layer.

WebMCP (in-browser tools)

WebMCP brings agent tools into the browser tab (document.modelContext — W3C draft, Chrome origin-trial, ChatGPT's built-in browser): site-wide search_products / get_cart / same-origin navigate, CONTEXTUAL per-route tools (the product page registers add_current_product_to_cart with live variants and stock; the cart page registers update/remove and go_to_checkout; the catalogue page registers list_visible_products and filter_products), declarative form tools (site_search, contact_store, newsletter_signup — the forms themselves), and design packs can ship their own (crema's calculate_brew_ratio). A test-enforced moat keeps the browser surface cart/catalogue-only: no order-placing tool exists — checkout is deliberately tool-free and stays the human's.

Media library

Central MediaAsset library + ProductMedia join.

AEO product content

Answer-first product content: summary, FAQ, use cases, comparison + FAQPage JSON-LD + answer-first sections on the PDP. The fields are nullable/lossless; the flag gates UI visibility + JSON-LD.

Google Merchant feed

Google Shopping XML product feed at /feed/google.xml (reuses the catalog feed). Off → 404. The operator registers the URL in Merchant Center themselves.

hreflang alternates

hreflang alternates (per-locale + x-default) on PDP + category metadata via i18n/routing. Auto-empty on single-locale shops.

AI lead triage

Priority, summary and a draft reply for incoming contact inquiries, generated AFTER the response is sent (after()) — never on the visitor's critical path. Requires an Anthropic key; without it the triage is silently skipped. Shown in /admin/leads.

AI alt text

Gemini vision-generated alt text/caption/geoSnippet/colors on upload, async via the cron /api/cron/media-ai (gated on this flag). Edited in /admin/media.

Component registry (public)

A public, shadcn-compatible component registry: every catalogue section exposes its prop JSON-Schema so external AI agents and IDEs can discover and target Cartwright sections. The design system is a hub other tools can read, not a closed silo.

Look sharing (public remix)

Serves this shop's look as a cartwright-composition-v1 artifact on GET /api/look — cosmetic fields only (skin, palette, scene, chrome); copy overrides, voice identity and the homepage layout are never exposed. Adds a 'Remix this look' block to /built-with-cartwright. 404 when off.

Registry: ship component source

Sub-flag for the component registry: in addition to schema, also serve actual MIT-licensed TSX (+ local sibling deps) for a curated, self-contained subset of Studio atoms (installable shadcn source via `npx shadcn add`). The source is embedded at build time (scripts/build-registry-source.ts → lib/magic/registry-source.ts). Never proprietary/server-importing/third-party code.

Registry: install statistics

Anonymous install counting on the public component registry: every served registry item (section key or svg item) increments a per-item counter — ONLY the item slug, never IP/UA/visitor data. Fire-and-forget (never blocks/fails the registry response); off ⇒ zero counter reads/writes. Read sorted at /admin/registry-stats + GET /api/admin/registry-stats. Run `pnpm db:push` (RegistryHit model) before enabling.

Compliance & privacy

Stripe Tax (VAT)

Managed multi-country VAT via Stripe Tax (EU OSS, VAT-ID validation) with invoicing — or the built-in single-rate when you don't need the managed path. VAT is computed correctly at checkout either way.

Cookie consent

EU 3-category cookie consent banner. Prerequisite for GA4.

Google Analytics 4

GA4 script — only loads after consent. Privacy-sensitive, hence build-time gated.

Platform

Cartwright Plus

Honor-system Pro-tier signal. Only affects the display of “⭐ Pro” badges in the admin.

Why this page exists

Northbound Coffee Roasters is one of three Cartwright canaries that prove the engine in production: a corporate-mode website, a coffee shop, and an eyewear shop. Each one is built from the same create-cartwright template that customers can scaffold themselves — npx create-cartwright@latest.

If you're considering Cartwright, the capabilities listed above are the ones this deployed profile actually ships. Choose the static site profile for public content without a database, or scaffold a managed or commerce profile when accounts, operations and checkout are part of the requirement.