create-whop-kit 0.3.0 → 0.4.1

package/README.md

@@ -1,41 +1,104 @@
 # create-whop-kit
 
-Scaffold a new [Whop](https://whop.com)-powered app with [whop-kit](https://www.npmjs.com/package/whop-kit).
+Scaffold and manage [Whop](https://whop.com)-powered apps with [whop-kit](https://www.npmjs.com/package/whop-kit).
 
-## Usage
+## Create a new project
 
 ```bash
 npx create-whop-kit my-app
 ```
 
-You'll be prompted to choose:
+Interactive prompts guide you through:
 
-1. **What you're building** — SaaS, Course, Community, or Blank
-2. **Framework** — Next.js (more coming soon)
-3. **Database** — Neon, Supabase, Local PostgreSQL, or configure later
+1. **What are you building?** — SaaS (full dashboard + billing) or Blank (just auth + webhooks)
+2. **Which framework?** — Next.js or Astro
+3. **Which database?** — Neon (auto-provisioned), Prisma Postgres (instant), Supabase, manual URL, or skip
+4. **Whop credentials** — App ID, API key, webhook secret (optional, can use setup wizard later)
 
-The CLI clones the template, installs dependencies, configures your `.env.local`, and initializes a git repo.
+The CLI clones a template, provisions your database, writes `.env.local`, installs dependencies, and initializes git.
 
-## Options
+### Non-interactive mode
 
 ```bash
-# Provide the project name as an argument
-npx create-whop-kit my-app
+# Skip all prompts
+npx create-whop-kit my-app --framework nextjs --type saas --db neon --yes
+
+# With credentials
+npx create-whop-kit my-app --framework nextjs --db later --app-id "app_xxx" --api-key "apik_xxx"
 
-# Or run interactively
-npx create-whop-kit
+# Preview without creating files
+npx create-whop-kit my-app --framework nextjs --db later --dry-run
 ```
 
+### All flags
+
+| Flag | Description |
+|------|-------------|
+| `--framework` | `nextjs` or `astro` |
+| `--type` | `saas` or `blank` (default: `saas`) |
+| `--db` | `neon`, `prisma-postgres`, `supabase`, `manual`, `later` |
+| `--db-url` | PostgreSQL connection URL (skips DB provisioning) |
+| `--app-id` | Whop App ID |
+| `--api-key` | Whop API Key |
+| `--webhook-secret` | Whop webhook secret |
+| `-y, --yes` | Skip optional prompts |
+| `--dry-run` | Show what would be created |
+| `--verbose` | Detailed output |
+
+## Manage your project
+
+After creating a project, use `whop-kit` to add features and check status:
+
+```bash
+# Check project health
+npx whop-kit status
+
+# Add email (Resend or SendGrid)
+npx whop-kit add email
+
+# Add analytics (PostHog, Google Analytics, or Plausible)
+npx whop-kit add analytics
+
+# Add a webhook event handler
+npx whop-kit add webhook-event
+
+# Open provider dashboards
+npx whop-kit open whop
+npx whop-kit open neon
+npx whop-kit open vercel
+
+# Update whop-kit to latest
+npx whop-kit upgrade
+```
+
+## Database provisioning
+
+The CLI can provision databases automatically — no need to leave the terminal:
+
+| Provider | How it works |
+|----------|-------------|
+| **Neon** | Installs `neonctl` → authenticates (browser) → creates project → gets connection string |
+| **Prisma Postgres** | Runs `npx create-db` → instant database, no account needed |
+| **Supabase** | Installs CLI → authenticates → creates project → guides you to get connection string |
+
 ## Templates
 
-| Template | Framework | Status |
-|----------|-----------|--------|
-| SaaS | Next.js | Available |
-| SaaS | Astro | Coming soon |
-| SaaS | TanStack Start | Coming soon |
-| Course | — | Coming soon |
-| Community | — | Coming soon |
-| Blank | — | Coming soon |
+| App Type | Framework | Template | Status |
+|----------|-----------|----------|--------|
+| SaaS | Next.js | Full dashboard, pricing, billing, docs | Available |
+| SaaS | Astro | Auth, payments, webhooks | Available |
+| Blank | Next.js | Just auth + webhooks — build anything | Available |
+| Course | — | — | Coming soon |
+| Community | — | — | Coming soon |
+
+## How it works
+
+1. **Template** — clones a starter repo from GitHub
+2. **Database** — optionally provisions via provider CLI
+3. **Environment** — writes `.env.local` from the template's `.env.example`
+4. **Manifest** — creates `.whop/config.json` tracking your project state
+5. **Dependencies** — installs with your preferred package manager
+6. **Git** — initializes a fresh repo
 
 ## License
 

package/dist/{chunk-M4AXERQP.js → chunk-KO52YVBE.js}

@@ -15,6 +15,14 @@ function exec(cmd, cwd) {
     return { stdout: "", success: false };
   }
 }
+function execInteractive(cmd, cwd) {
+  try {
+    execSync(cmd, { cwd, stdio: "inherit", timeout: 3e5 });
+    return true;
+  } catch {
+    return false;
+  }
+}
 function hasCommand(cmd) {
   return exec(`which ${cmd}`).success;
 }
@@ -65,6 +73,7 @@ function addFeatureToManifest(projectDir, feature) {
 
 export {
   exec,
+  execInteractive,
   hasCommand,
   detectPackageManager,
   createManifest,

package/dist/cli-create.js

@@ -3,8 +3,9 @@ import {
   createManifest,
   detectPackageManager,
   exec,
+  execInteractive,
   hasCommand
-} from "./chunk-M4AXERQP.js";
+} from "./chunk-KO52YVBE.js";
 
 // src/cli-create.ts
 import { runMain } from "citty";
@@ -17,38 +18,62 @@ import pc5 from "picocolors";
 import { defineCommand } from "citty";
 
 // src/templates.ts
-var TEMPLATES = {
+var FRAMEWORKS = {
   nextjs: {
     name: "Next.js",
     description: "Full-stack React with App Router, SSR, and API routes",
-    repo: "colinmcdermott/whop-saas-starter-v2",
     available: true
   },
   astro: {
     name: "Astro",
     description: "Content-focused with islands architecture",
-    repo: "colinmcdermott/whop-astro-starter",
     available: true
   },
   tanstack: {
     name: "TanStack Start",
     description: "Full-stack React with TanStack Router",
-    repo: "",
     available: false
   },
   vite: {
     name: "Vite + React",
     description: "Lightweight SPA with Vite bundler",
-    repo: "",
     available: false
   }
 };
+var TEMPLATES = {
+  "saas:nextjs": {
+    name: "Next.js SaaS",
+    description: "Full SaaS with dashboard, pricing, billing, and docs",
+    repo: "colinmcdermott/whop-saas-starter-v2",
+    available: true
+  },
+  "saas:astro": {
+    name: "Astro SaaS",
+    description: "SaaS with auth, payments, and webhooks",
+    repo: "colinmcdermott/whop-astro-starter",
+    available: true
+  },
+  "blank:nextjs": {
+    name: "Next.js Blank",
+    description: "Just auth + webhooks \u2014 build anything",
+    repo: "colinmcdermott/whop-blank-starter",
+    available: true
+  }
+};
+function getTemplate(appType, framework) {
+  return TEMPLATES[`${appType}:${framework}`] ?? null;
+}
 var APP_TYPES = {
   saas: {
     name: "SaaS",
     description: "Subscription tiers, dashboard, billing portal",
     available: true
   },
+  blank: {
+    name: "Blank",
+    description: "Just auth + payments, you build the rest",
+    available: true
+  },
   course: {
     name: "Course",
     description: "Lessons, progress tracking, drip content",
@@ -58,33 +83,6 @@ var APP_TYPES = {
     name: "Community",
     description: "Member feeds, gated content, roles",
     available: false
-  },
-  blank: {
-    name: "Blank",
-    description: "Just auth + payments, you build the rest",
-    available: false
-  }
-};
-var DB_OPTIONS = {
-  neon: {
-    name: "Neon",
-    description: "Serverless Postgres (recommended)",
-    envVarHint: "postgresql://user:pass@ep-xxx.us-east-2.aws.neon.tech/dbname?sslmode=require"
-  },
-  supabase: {
-    name: "Supabase",
-    description: "Open-source Firebase alternative",
-    envVarHint: "postgresql://postgres.xxx:pass@aws-0-us-east-1.pooler.supabase.com:6543/postgres"
-  },
-  local: {
-    name: "Local PostgreSQL",
-    description: "Your own Postgres instance",
-    envVarHint: "postgresql://postgres:postgres@localhost:5432/myapp"
-  },
-  later: {
-    name: "Configure later",
-    description: "Skip database setup for now",
-    envVarHint: ""
   }
 };
 
@@ -111,38 +109,72 @@ var neonProvider = {
   },
   async provision(projectName) {
     const cli = hasCommand("neonctl") ? "neonctl" : "neon";
-    const whoami = exec(`${cli} me`);
+    const whoami = exec(`${cli} me --output json`);
     if (!whoami.success) {
-      p.log.info("You need to authenticate with Neon.");
-      p.log.info(`Running ${pc.bold(`${cli} auth`)} \u2014 this will open your browser.`);
-      const authResult = exec(`${cli} auth`);
-      if (!authResult.success) {
+      p.log.info("You need to authenticate with Neon. This will open your browser.");
+      console.log("");
+      const authOk = execInteractive(`${cli} auth`);
+      if (!authOk) {
         p.log.error("Neon authentication failed. Try running manually:");
         p.log.info(pc.bold(`  ${cli} auth`));
         return null;
       }
+      console.log("");
     }
-    const s = p.spinner();
-    s.start(`Creating Neon project "${projectName}"...`);
-    const createResult = exec(
-      `${cli} projects create --name "${projectName}" --set-context --output json`
+    p.log.info(`Creating Neon project "${projectName}"...`);
+    console.log("");
+    const createOk = execInteractive(
+      `${cli} projects create --name "${projectName}" --set-context`
     );
-    if (!createResult.success) {
-      s.stop("Failed to create Neon project");
-      p.log.error("Try creating manually at https://console.neon.tech");
+    if (!createOk) {
+      p.log.error("Failed to create Neon project. Try manually at https://console.neon.tech");
       return null;
     }
-    s.stop("Neon project created");
-    s.start("Getting connection string...");
-    const connResult = exec(`${cli} connection-string --prisma`);
-    if (!connResult.success) {
-      s.stop("Could not retrieve connection string");
-      p.log.error("Get it from: https://console.neon.tech");
+    console.log("");
+    p.log.success("Neon project created");
+    let connString = "";
+    const connResult = exec(`${cli} connection-string --prisma --output json`);
+    if (connResult.success) {
+      try {
+        const parsed = JSON.parse(connResult.stdout);
+        connString = parsed.connection_string || parsed.connectionString || connResult.stdout;
+      } catch {
+        connString = connResult.stdout.trim();
+      }
+    }
+    if (!connString) {
+      const fallback = exec(`${cli} connection-string --prisma`);
+      if (fallback.success && fallback.stdout.startsWith("postgres")) {
+        connString = fallback.stdout.trim();
+      }
+    }
+    if (!connString) {
+      const raw = exec(`${cli} connection-string`);
+      if (raw.success && raw.stdout.startsWith("postgres")) {
+        connString = raw.stdout.trim();
+      }
+    }
+    if (!connString) {
+      p.log.warning("Could not extract connection string automatically.");
+      console.log("");
+      execInteractive(`${cli} connection-string`);
+      console.log("");
+      const manual = await p.text({
+        message: "Paste the connection string shown above",
+        placeholder: "postgresql://...",
+        validate: (v) => {
+          if (!v?.startsWith("postgres")) return "Must be a PostgreSQL connection string";
+        }
+      });
+      if (p.isCancel(manual)) return null;
+      connString = manual;
+    }
+    if (!connString) {
+      p.log.error("Could not get connection string. Get it from: https://console.neon.tech");
       return null;
     }
-    s.stop("Connection string retrieved");
     return {
-      connectionString: connResult.stdout,
+      connectionString: connString,
       provider: "neon"
     };
   }
@@ -546,11 +578,11 @@ var init_default = defineCommand({
     if (!framework) {
       const result = await p5.select({
         message: "Which framework?",
-        options: Object.entries(TEMPLATES).map(([value, t]) => ({
+        options: Object.entries(FRAMEWORKS).map(([value, f]) => ({
           value,
-          label: t.available ? t.name : `${t.name} ${pc5.dim("(coming soon)")}`,
-          hint: t.description,
-          disabled: !t.available
+          label: f.available ? f.name : `${f.name} ${pc5.dim("(coming soon)")}`,
+          hint: f.description,
+          disabled: !f.available
         }))
       });
       if (isCancelled(result)) {
@@ -559,9 +591,9 @@ var init_default = defineCommand({
       }
       framework = result;
     }
-    const template = TEMPLATES[framework];
+    const template = getTemplate(appType, framework);
     if (!template || !template.available) {
-      p5.log.error(`Framework "${framework}" is not available. Options: ${Object.keys(TEMPLATES).filter((k) => TEMPLATES[k].available).join(", ")}`);
+      p5.log.error(`No template available for ${appType} + ${framework}. Try a different combination.`);
       process.exit(1);
     }
     let database = args.db;
@@ -667,7 +699,7 @@ var init_default = defineCommand({
       console.log(`  ${pc5.bold("Project:")}     ${projectName}`);
       console.log(`  ${pc5.bold("Framework:")}   ${template.name}`);
       console.log(`  ${pc5.bold("App type:")}    ${APP_TYPES[appType]?.name ?? appType}`);
-      console.log(`  ${pc5.bold("Database:")}    ${DB_OPTIONS[database]?.name ?? database}`);
+      console.log(`  ${pc5.bold("Database:")}    ${database}`);
       console.log(`  ${pc5.bold("Template:")}    github.com/${template.repo}`);
       if (dbUrl) console.log(`  ${pc5.bold("DB URL:")}      ${dbUrl.substring(0, 30)}...`);
       if (appId) console.log(`  ${pc5.bold("Whop App:")}    ${appId}`);
@@ -736,7 +768,7 @@ var init_default = defineCommand({
     if (missing.length > 0) {
       summary += `${pc5.yellow("\u25CB")} Missing: ${missing.join(", ")}
 `;
-      summary += `  ${pc5.dim("Configure via the setup wizard or .env.local")}
+      summary += `  ${pc5.dim("The setup wizard at http://localhost:3000 will guide you through it")}
 `;
     }
     if (dbNote) {
@@ -748,10 +780,14 @@ var init_default = defineCommand({
     summary += `  ${pc5.bold("cd")} ${basename2(projectName)}
 `;
     if (dbUrl) {
-      summary += `  ${pc5.bold(`${pm} run db:push`)}
+      summary += `  ${pc5.bold(`${pm} run db:push`)}   ${pc5.dim("# push schema to database")}
 `;
     }
-    summary += `  ${pc5.bold(`${pm} run dev`)}`;
+    summary += `  ${pc5.bold(`${pm} run dev`)}      ${pc5.dim("# start dev server")}
+`;
+    summary += `
+`;
+    summary += `  ${pc5.dim("Then open http://localhost:3000")}`;
     p5.note(summary, "Your app is ready");
     p5.outro(`${pc5.green("Happy building!")} ${pc5.dim("\u2014 whop-kit")}`);
   }

package/dist/cli-kit.js

@@ -4,7 +4,7 @@ import {
   detectPackageManager,
   exec,
   readManifest
-} from "./chunk-M4AXERQP.js";
+} from "./chunk-KO52YVBE.js";
 
 // src/cli-kit.ts
 import { defineCommand as defineCommand5, runMain } from "citty";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-whop-kit",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Scaffold and manage Whop-powered apps with whop-kit",
   "type": "module",
   "license": "MIT",