Platform Extensions Guide

Ship native-feel
apps. Let AI edit them.

Two systems that extend every Bloxx site — the PWA layer turns websites into installable apps, and the MCP server lets AI assistants read, write, and deploy content programmatically.

↓  PWA System ↓  MCP Server
◆ Progressive Web App

Every site becomes an installable app — zero app stores.

Deploy once and your customers get a home-screen icon, offline access, push notifications, and share-sheet integration. Generated at deploy time with no runtime dependencies.

📲

Install Prompts

Native Android install banner plus a custom iOS Safari tooltip with scroll + idle triggers. Smart cooldown prevents prompt fatigue — configurable from 1 to 90 days.

📡

Offline Support

Network-first for HTML pages with stale-while-revalidate for static assets. Precaches up to 8 pages, Bootstrap CSS, fonts, and your logo — your site works without a connection.

🔔

Push Notifications

VAPID-based Web Push with subscription management, endpoint validation for all major browsers, and rate-limited storage. Scaffolding ready — send endpoint coming soon.

🔗

Share Target

Users can share content directly to your PWA from the OS share sheet. GET-based — no backend needed. Shared data arrives as query params and fires analytics beacons.

🔄

Silent Updates

New deploys trigger service worker updates. Users see a non-intrusive toast with a refresh button. Auto-dismisses after 30 seconds. No action needed from the site owner.

📊

Built-in Analytics

10 lifecycle events tracked via beacons — from first eligibility check through install, dismiss, update, share, and push subscription. See exactly how your app funnel performs.

◆ How It Works

Pure-function generation at deploy time

Five generators read your site settings and produce all PWA artifacts as strings — manifest JSON, service worker JS, client script, and CSS. No runtime dependencies, no build step.

// deploy.ts reads settings, calls generators deploy.ts (orchestrator) ├── manifest-generator.ts → /manifest.json ├── service-worker-generator.ts → /sw.js ├── pwa-script-generator.ts → <script> in every page ├── pwa-styles-generator.ts → <style> in runtime CSS └── pwa-utils.ts → color math, font allowlist, URL validation // Artifacts injected into </head> and </body> or uploaded to R2

Service Worker Strategy

HTML — Network FirstTry network → cache on success → serve cached on failure → fall back to homepage → inline offline page
Assets — Stale-While-RevalidateServe cached immediately, fetch fresh copy in background, evict oldest 10 entries when cache exceeds 100
CORS AllowlistExact-match only: site origin, cdn.jsdelivr.net, Google Fonts. Custom domains passed via siteOrigins param

Precached Resources

Up to 8 HTML pagesHomepage + nav links, padded from all pages
Bootstrap CSS CDNFramework styles always available offline
Google Fonts CSSTypography loads even without connectivity
Logo + OG ImageBrand assets cached on first install
◆ Configuration

Admin settings for the PWA

All configurable from Settings → Mobile App. Numeric values are clamped server-side to prevent invalid inputs.

SettingDefaultRangeDescription
pwa.enabledtrueMaster toggle for all PWA features
pwa.scrollThreshold30050 – 1000Pixels scrolled before iOS tooltip shows
pwa.idleDelay155 – 60Seconds idle before iOS tooltip shows
pwa.dismissCooldown71 – 90Days before dismissed prompt returns
pwa.ctaTextOverride(auto)≤ 40 charsCustom CTA (overrides vertical default)
pwa.shareTargetfalseEnable OS share sheet integration
pwa.pushEnabledfalseEnable push notification subscription

Auto-generated CTA by vertical

🍽️ restaurant → "Order from {name}" 💇 salon → "Book with {name}" 🛒 ecommerce → "Shop {name}" 💻 saas → "Try {name}" 🏠 realestate → "Browse {name}" ✱ default → "Get {name}"
◆ Setup

Getting started with PWA

The core PWA works out of the box — just deploy. Push notifications require a few extra steps.

Basic PWA

Installs, offline, and updates. Zero config.

1

Deploy your site

The PWA manifest, service worker, and client script are generated automatically at deploy time. Nothing to configure.

2

Tune the prompts (optional)

Go to Settings → Mobile App. Adjust scroll threshold, idle delay, and dismiss cooldown to match your audience's behavior.

3

Customize the CTA (optional)

Override the auto-generated CTA text or leave it blank for vertical-based defaults like "Order from" or "Book with."

Push Notifications

Requires VAPID keys and a D1 migration.

1

Generate VAPID keys

terminal
npx web-push generate-vapid-keys
2

Set Cloudflare secrets

terminal
cd editor
echo "YOUR_PUBLIC_KEY" | wrangler pages secret put VAPID_PUBLIC_KEY
echo "YOUR_PRIVATE_KEY" | wrangler pages secret put VAPID_PRIVATE_KEY
3

Run D1 migration

terminal
wrangler d1 execute bloxx-db \
  --file=migrations/0073_push_subscriptions.sql \
  --remote
4

Enable in settings

Settings → Mobile App → Enable Push Notifications → ON, then redeploy.

◇ MCP Server

Let AI assistants build your site for you.

An 18-tool Model Context Protocol server that gives Claude, Cursor, and other AI clients full read/write/publish access to your Bloxx site — gated by API keys with granular permissions.

✏️

Content Editing

Read pages, inspect DOM structure, update sections by CSS selector, batch-update SEO metadata — all through structured tool calls with dry-run previews and ETag protection.

🔍

Intelligence Access

Pull AI citation health, competitor snapshots, page audits, and prioritized suggestions. Your AI assistant can diagnose problems and fix them in the same session.

🚀

One-Command Publish

Deploy all drafts or selectively push specific pages to live — with deploy locks preventing concurrent deploys from different sessions.

📦

Collections & CMS

List collections, query items with filters and pagination, upsert with schema validation. Full headless CMS access for AI-driven content workflows.

📝

Blog Generation

Enqueue AI blog posts asynchronously and track job status. Integrates with the Cloudflare Queue pipeline for reliable, rate-aware generation.

🔒

Granular Security

Three permission tiers (read / edit / publish), SHA-256 hashed keys, 60 req/min rate limiting, full audit logging, optional key expiry, and instant revocation.

◇ Tool Reference

18 tools across 6 modules

Every tool enforces permission checks, rate limits, and audit logging. Tools that modify content use ETag-based optimistic concurrency.

ToolPermissionDescription
content_list_pagesreadList pages with titles, slugs, word counts. Keyword filter + pagination.
content_get_page_structurereadLightweight DOM outline (~2-5KB). Use before editing.
content_get_pagereadFull HTML + SEO metadata + ETag.
content_update_pageeditUpdate section by CSS selector. Dry-run → apply with ETag.
content_revert_pageeditUndo last MCP edit (1-hour buffer, 1 level deep).
content_update_seoeditBatch SEO metadata — title, description, OG tags. Up to 20 pages.
Typical edit workflow:
content_get_page_structure → understand DOM
content_update_page (dry_run: true) → preview + get ETag
content_update_page (dry_run: false, expected_etag) → apply
ToolPermissionDescription
intel_citation_healthreadAI citation rate, provider breakdown, trend data, gaps, benchmarks.
intel_competitor_snapshotreadCompetitor citation comparison. Supports limit 1-10.
intel_page_auditreadSEO + accessibility audit. Score 0-100, letter grade, issues list.
intel_suggestionsreadPrioritized improvements with ready-to-execute tool calls.
ToolPermissionDescription
publish_deploypublishDeploy drafts to live. Optional page_slugs for selective deploy. Deploy locks prevent conflicts.
ToolModulePermissionDescription
blog_generateBlogeditEnqueue blog generation (async). Returns job ID. Boss plan required.
blog_get_statusBlogreadCheck blog generation job status.
collections_listCollectionsreadList all CMS collections with schemas + item counts.
collections_get_itemsCollectionsreadGet items. Filter by status, paginate. Returns ETag.
collections_upsert_itemCollectionseditCreate/update with schema validation + ETag protection.
settings_updateSettingseditUpdate name, branding, analytics, SEO settings.
◇ Setup

Connect your AI client in 3 steps

Works with Claude Code, Claude Desktop, Cursor, and Windsurf. Stateless HTTP — no WebSocket, no SSE.

Create & Connect

Generate a key, then configure your AI client.

1

Create an API key

In the Bloxx editor: Settings → MCP API Keys → Create Key. Choose a label and permission level (read, read+edit, or read+edit+publish). Copy the key — it's shown only once.

2

Configure your client

Add the MCP server to your AI client's config. See the code examples for Claude Code, Claude Desktop, and Cursor.

3

Verify the connection

Ask your AI: "List my pages." It should call content_list_pages and return your site data.

Client Configs

Copy-paste into your AI client's config file.

~/.claude.json — Claude Code
{
  "mcpServers": {
    "bloxx": {
      "type": "streamable-http",
      "url": "https://bloxx-mcp-server.bloxx-prod.workers.dev/mcp",
      "headers": {
        "Authorization": "Bearer blx_sk_YOUR_KEY"
      }
    }
  }
}
Cursor — Settings > MCP
Type:     HTTP
URL:      https://bloxx-mcp-server.bloxx-prod.workers.dev/mcp
Headers:  Authorization: Bearer blx_sk_YOUR_KEY
Health check
curl https://bloxx-mcp-server.bloxx-prod.workers.dev/health
# → {"ok":true,"version":"1.0.0"}
◈ Security

Security across both systems

Defense-in-depth from API key hashing to service worker CORS isolation.

🔑 Key Management

SHA-256 hashed storage, blx_sk_ prefix format, optional expiry, instant soft-delete revocation from the dashboard.

🚦 Rate Limiting

MCP: 60 req/min per API key with D1 bucketing. Push subscriptions: 10 req/min per IP. Both cleaned up by cron.

📋 Audit Trail

Every MCP tool call logged — tool name, duration, result code, input summary. 90-day retention with daily cron cleanup.

🛡️ Content Validation

MCP edits enforce Bootstrap-only HTML — no custom CSS, inline styles, script tags, or data: URIs allowed.

🌐 CORS Isolation

Service worker uses exact-origin allowlist — not prefix matching. Blocks cross-origin fetch hijacking.

🔐 Input Sanitization

CTA text escaped via JSON.stringify. Icon paths validated against traversal. Push endpoints checked against known browser origins.