Build for the Hub.

Spin up an app that plugs into VibeProSoft Hub in an afternoon. Copy the quickstart below into Claude, Cursor, or any LLM-driven coding tool — it has everything an agent needs to scaffold a hub-compatible app end to end.

Health probes

Hub does GET / on your launch URL every 5 min. Anything under 500 in <3s is healthy.

SSO

Use Clerk on your app with the same instance as the Hub. Users sign in once at hub.vibeprosoft.com and land on your app already authenticated.

Entitlements

Call /api/entitlements/:key with a Hub session cookie or OAT to check what the user can do.

Catalog

Once your app is ready, an admin imports it from the Cloudflare account or registers it by URL at /admin/apps.

Prompt preview

This is the exact text the Copy button puts on your clipboard. Paste it into your LLM coding tool of choice and let it scaffold the integration.

You are building a new app that will live in the VibeProSoft Hub catalog at
https://hub.vibeprosoft.com. The Hub is the single sign-on portal where users sign in once and
launch every VibeProSoft tool. Your job is to scaffold a small web app that
satisfies the Hub's integration contract.

==============================================================================
THE HUB IN ONE PARAGRAPH
==============================================================================
VibeProSoft Hub is a Cloudflare-Workers + Hono + D1 control plane at
https://hub.vibeprosoft.com. It registers external apps by URL, runs health probes against
them every 5 minutes, signs users in with Clerk (single tenant — every app
in the catalog shares the same Clerk instance as the Hub), and exposes an
in-house entitlement engine + MCP server for agentic ops. The Hub does
NOT host or proxy your app — it just links to its launch URL.

==============================================================================
WHAT YOU ARE GOING TO BUILD
==============================================================================
A minimal HTTPS web app that:

1. Returns a fast healthy response on GET / (no auth required to probe).
2. Uses Clerk for sign-in via the SAME Clerk instance as the Hub
   (so a user signed in at https://hub.vibeprosoft.com is already signed in on your app).
3. Calls the Hub entitlement API to check what the user can do.
4. Matches the VibeProSoft Brand & Style Guide (dark, black bg, blue +
   amber accents) so it feels native in the catalog.
5. Deploys to Cloudflare Workers behind a custom domain (preferred) or
   Cloudflare Pages.

Stick to plain JS + Hono + Web Crypto where possible. The Hub itself runs
without a build step — keep yours small too.

==============================================================================
INTEGRATION CONTRACT — what the Hub expects
==============================================================================

(A) Health endpoint
    - The Hub probes your launch URL (the URL admins register, typically
      "https://your-app.example.com/") every 5 minutes.
    - Method: GET   Timeout: 6s   User-Agent: "VibeProSoftHub-HealthCheck/1.0"
    - Healthy:  status < 400 AND response time <= 3000 ms
    - Degraded: status 400..499  OR  response time > 3000 ms
    - Down:     status >= 500  OR  network/abort
    - DO NOT require auth or redirect on GET /. A static 200 with a tiny
      JSON body is ideal:
        { "status": "ok", "name": "<your-app-slug>", "version": "<semver>" }
    - DO NOT serve the marketing landing page on GET / if it is heavy.
      Either keep it light (<200 KB, <1s server time) or split health to
      GET /healthz and register THAT as the launch URL — but you usually
      want the launch URL to be where humans land too.

(B) Clerk SSO — one Clerk instance, every domain
    - There is exactly ONE Clerk instance behind the Hub and every app
      and every managed site in this ecosystem. You do not create your
      own Clerk app. Ask the Hub admin for the Hub's pk_/sk_ pair.
    - Your app's domain MUST be added as a "satellite domain" of that
      Clerk instance in the Clerk dashboard (Domains → Add satellite).
      Without this, the Clerk session cookie won't be valid on your
      origin and users will get bounced into a redirect loop.
    - Install @clerk/backend (Workers-compatible) and set as secrets:
        wrangler secret put CLERK_PUBLISHABLE_KEY
        wrangler secret put CLERK_SECRET_KEY
    - On every authenticated route, call:
        import { createClerkClient } from '@clerk/backend';
        const clerk = createClerkClient({
          secretKey: env.CLERK_SECRET_KEY,
          publishableKey: env.CLERK_PUBLISHABLE_KEY,
        });
        const state = await clerk.authenticateRequest(c.req.raw);
        if (!state.isAuthenticated) {
          const here = encodeURIComponent(c.req.url);
          return c.redirect('https://hub.vibeprosoft.com/sso/sign-in?next=' + here, 302);
        }
        const { userId } = state.toAuth();
    - When unauthenticated, ALWAYS redirect to
      "https://hub.vibeprosoft.com/sso/sign-in?next=<current-url>". Never host your own
      sign-in form. The Hub is the canonical sign-in surface; on success
      it lands the user back on your URL with the shared Clerk session
      cookie already set (because your domain is a Clerk satellite).
    - The same bounce closes the loop when a user hits your app's
      direct URL: missing session → redirect to the Hub → Clerk sign-in
      → back to your URL, now signed in. That's the "lockdown" the Hub
      expects you to enforce on your origin.
    - DO NOT implement your own password storage. DO NOT mint your own
      JWTs. The shared Clerk session is the source of truth.

(B.1) The Hub gateway URL
    - Once a Hub admin creates a deployment, the canonical entry point
      to your app for users of a managed site is:
        https://hub.vibeprosoft.com/site/<managed-site-slug>/apps/<your-app-slug>
      That URL enforces Clerk SSO + the deployment's license check
      (entitlement gate), then 302s to your launch_url. Managed-site
      pages should link to this gateway URL, not your direct URL.

(C) Entitlements (optional but recommended)
    - The Hub exposes `/api/entitlements/:key` for the currently signed-in
      user. It reads the Clerk session cookie or accepts a Hub-issued
      Organization Access Token (OAT) bearer.
    - Example check from your Worker (forward the request's cookie):
        const r = await fetch('https://hub.vibeprosoft.com/api/entitlements/' + key, {
          headers: { cookie: c.req.header('cookie') || '' },
        });
        const ent = await r.json();
        // ent = { key, allowed: boolean, limit?: number, used?: number, ... }
        if (!ent.allowed) return c.text('Upgrade required', 402);
    - For server-to-server checks (cron, background jobs), use an OAT
      issued at https://hub.vibeprosoft.com/admin/agents and send it as
      "Authorization: Bearer agent_xxx" on POST /mcp calls.
    - Define your entitlement keys up front (e.g. `myapp.runs_per_day`,
      `myapp.export_csv`) and ask the Hub admin to add them to the
      catalog seed migration.

(D) Branding
    - Pure-black background (#000), glass cards
      (bg-gray-900/50 + backdrop-blur), blue intelligence (#2563eb)
      primary, amber (#fcd34d) accents used sparingly.
    - Hero gradient: from-white via-blue-100 to-amber-200.
    - Tagline letter-spacing: 0.20em (nav) / 0.25em (mission) /
      0.30em (section labels) / 0.35em (hero tagline).
    - Optionally pull the Hub's active theme CSS for the managed site
      named "vibeprosoft" (or your own) by linking to
      https://hub.vibeprosoft.com/admin/sites/<site-slug>/themes/active.css — it is served
      publicly with Access-Control-Allow-Origin: *.

(E) Catalog registration + deployment
    - You don't register your app yourself — a Hub admin does, via
      https://hub.vibeprosoft.com/admin/apps. You supply: name, slug, tagline, description,
      category, launch URL, icon (PNG, square, &gt;= 256px),
      requires_auth (1 if Clerk-gated), and 1-5 `app_features` bullet
      points.
    - If you live on Cloudflare under the Hub's CF account, the admin
      can also import directly via https://hub.vibeprosoft.com/admin/import.
    - Once cataloged, the admin creates one or more "deployments" that
      tie your app to specific managed sites and (optionally) require
      a license entitlement key. Each deployment exposes the gateway URL
      https://hub.vibeprosoft.com/site/<site>/apps/<your-slug>. That's the link the
      managed site's UI uses; your direct URL stays as a fallback that
      bounces unauthed users back to the Hub for SSO.

==============================================================================
SUGGESTED STACK
==============================================================================
- Runtime: Cloudflare Workers (V8 isolate) — fits the Hub's footprint
- Router: Hono ^4.12 (the Hub uses 4.12)
- Identity: @clerk/backend (Workers-compatible)
- DB (optional): Cloudflare D1 with a dedicated database for your app
- Storage (optional): Cloudflare R2 bucket scoped to your app
- Build: none — plain JS + wrangler deploy. Target bundle <250 KB gzipped.
- Crypto: Web Crypto API (`crypto.subtle`, atob/btoa). No Node modules.

==============================================================================
FILE LAYOUT YOU SHOULD CREATE
==============================================================================
my-app/
  wrangler.toml
  package.json
  src/
    worker.js         # Hono entry, mounts routes
    auth.js           # Clerk verification middleware + redirect-to-hub helper
    hub.js            # Entitlement check helper that calls https://hub.vibeprosoft.com/api/entitlements
    pages/
      public.js       # GET /  (health + landing) — must be fast & unauthed-tolerant
      app.js          # GET /app, POST /app/...  — Clerk-gated routes
    brand.css         # VibeProSoft brand tokens (or fetch active.css at runtime)
  README.md
  migrations/         # only if you use D1

==============================================================================
WHAT YOU MUST NOT DO
==============================================================================
- Do NOT proxy or iframe https://hub.vibeprosoft.com. The Hub is a separate origin.
- Do NOT store passwords or run your own /signup. Use Clerk via the Hub.
- Do NOT hardcode user IDs. Always derive userId from
  `requestState.toAuth().userId` per-request.
- Do NOT block GET / on auth, DB calls > 1s, or external API calls.
  The health probe must always be fast.
- Do NOT use Node built-ins (`crypto`, `fs`, `path`). V8 isolate only.
- Do NOT exceed 250 KB gzipped bundle.

==============================================================================
ACCEPTANCE CRITERIA — your "definition of done"
==============================================================================
1. `wrangler deploy --dry-run` succeeds with bundle < 250 KB gzipped.
2. `curl https://your-app.example.com/` returns 2xx in < 3s and reports
   { "status": "ok", "name": "<slug>", ... }.
3. Visiting an authenticated page while signed out redirects to
   https://hub.vibeprosoft.com/sso/sign-in?redirect=...
4. Visiting an authenticated page while signed in to the Hub returns 200
   without a second login.
5. At least one feature is gated by a call to
   https://hub.vibeprosoft.com/api/entitlements/<your-key>.
6. The landing page passes the VibeProSoft Brand & Style Guide v1.0
   (dark bg, blue/amber accents, correct letter-spacing on taglines).
7. A README documents: launch URL, the entitlement keys used, the
   required wrangler secrets, and the contact for catalog registration.

==============================================================================
HAND-OFF
==============================================================================
When done, paste the launch URL and a brief description into
https://hub.vibeprosoft.com/admin/apps (admin will do this), or email it with the README
to the Hub maintainer. Your app will then appear in the catalog at
https://hub.vibeprosoft.com/apps and on every entitled user's dashboard.

Start by scaffolding the project (wrangler.toml + package.json + src/worker.js)
and the health endpoint, then layer in Clerk and one entitlement check.
Keep it lean. Augmented · by · design.

After your LLM has built the app

  1. Deploy it (Cloudflare Workers / Pages / anywhere reachable over HTTPS).
  2. Verify GET / returns 2xx within 3 seconds.
  3. Email contact@vibeprosoft.com or sign in and ask a hub admin to import it from /admin/apps.
  4. Once published, it appears in the Hub catalog and on every entitled user's dashboard.