fix: OG images return 0 bytes on Next 16 + hide AI button until opted in

OG images all rendered 200 but with empty body — the edge runtime export
broke ImageResponse on Next.js 16. Removing the export falls back to the
default node runtime, which renders correctly. Affects /opengraph-image,
/workflow/opengraph-image, /vs-books/opengraph-image,
/vs-tools/opengraph-image.

Also gate "Enhance with AI" behind NEXT_PUBLIC_AI_ENABLED=true so the
button doesn't show on deployments that haven't set ANTHROPIC_API_KEY.
Template-fill mode is unaffected. Set both env vars in Vercel when ready
to enable the AI path.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/opengraph-image.tsx

@@ -1,6 +1,5 @@
 import { ImageResponse } from "next/og";
 
-export const runtime = "edge";
 export const alt = "vibeprompt, Prompts, workflow & tools for vibe coders";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";

src/app/toolbox/page.tsx

@@ -81,14 +81,14 @@ export default function ToolboxPage() {
                 <span className="text-[11px] text-foreground/55">Open →</span>
               </div>
               <p className="mt-3 text-sm leading-relaxed text-foreground/80">
-                Fill in the blanks and download a ready-to-ship AGENTS.md or PRD. Or hit
-                &ldquo;Enhance with AI ✨&rdquo; and let Claude write a project-specific version
-                (5 free per hour, no API key needed).
+                Fill in the blanks and download a ready-to-ship AGENTS.md or PRD. Two modes
+                included in the source — template-fill (default) and a Claude-powered
+                enhance mode you can switch on with one env var if you self-host.
               </p>
               <div className="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-[11px] text-foreground/55">
-                <span>· Two modes: template fill, or AI-enhanced</span>
                 <span>· Saves to your browser</span>
                 <span>· No signup</span>
+                <span>· Open source</span>
               </div>
             </Link>
           </section>

src/app/vs-books/opengraph-image.tsx

@@ -1,6 +1,5 @@
 import { ImageResponse } from "next/og";
 
-export const runtime = "edge";
 export const alt = "vibeprompt vs. the vibe coding books — free, web-native, continuously updated";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";

src/app/vs-tools/opengraph-image.tsx

@@ -1,6 +1,5 @@
 import { ImageResponse } from "next/og";
 
-export const runtime = "edge";
 export const alt = "vibeprompt vs. the vibe coding tools — Replit, Lovable, Bolt, Cursor, Claude Code";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";

src/app/workflow/opengraph-image.tsx

@@ -1,6 +1,5 @@
 import { ImageResponse } from "next/og";
 
-export const runtime = "edge";
 export const alt = "vibeprompt workflow — 10-step interactive build loop from idea to shipped";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";

src/components/generator/generator-client.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from "react";
 type Kind = "agents" | "prd";
 
 const STORAGE_KEY = "vibeprompt-generator-v1";
+const AI_ENABLED = process.env.NEXT_PUBLIC_AI_ENABLED === "true";
 
 type FormData = {
   agents: {
@@ -358,38 +359,42 @@ function OutputPanel({
         {markdown}
       </pre>
 
-      <div className="mt-3 flex flex-wrap items-center gap-2">
-        {!isAi ? (
-          <button
-            type="button"
-            onClick={onEnhance}
-            disabled={aiState === "loading"}
-            className="inline-flex items-center gap-1.5 border border-foreground/45 bg-foreground/[0.04] px-3 py-1.5 text-[11px] font-semibold text-foreground transition-colors hover:bg-foreground/[0.08] disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {aiState === "loading" ? "Generating…" : "Enhance with AI ✨"}
-          </button>
-        ) : (
-          <button
-            type="button"
-            onClick={onRevertToTemplate}
-            className="inline-flex items-center gap-1.5 border border-foreground/25 px-3 py-1.5 text-[11px] font-semibold text-foreground/70 transition-colors hover:bg-foreground/[0.04]"
-          >
-            ← Revert to template
-          </button>
-        )}
-        <p className="text-[10px] text-foreground/40">
-          {isAi
-            ? "AI version — re-generates when you edit inputs."
-            : "AI version uses Claude Haiku. 5 per hour. Template version is free, unlimited."}
-        </p>
-      </div>
+      {AI_ENABLED && (
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          {!isAi ? (
+            <button
+              type="button"
+              onClick={onEnhance}
+              disabled={aiState === "loading"}
+              className="inline-flex items-center gap-1.5 border border-foreground/45 bg-foreground/[0.04] px-3 py-1.5 text-[11px] font-semibold text-foreground transition-colors hover:bg-foreground/[0.08] disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {aiState === "loading" ? "Generating…" : "Enhance with AI ✨"}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={onRevertToTemplate}
+              className="inline-flex items-center gap-1.5 border border-foreground/25 px-3 py-1.5 text-[11px] font-semibold text-foreground/70 transition-colors hover:bg-foreground/[0.04]"
+            >
+              ← Revert to template
+            </button>
+          )}
+          <p className="text-[10px] text-foreground/40">
+            {isAi
+              ? "AI version — re-generates when you edit inputs."
+              : "AI version uses Claude Haiku. 5 per hour. Template version is free, unlimited."}
+          </p>
+        </div>
+      )}
 
-      {aiError && (
+      {AI_ENABLED && aiError && (
         <p className="mt-2 text-[11px] text-red-500">{aiError}</p>
       )}
 
       <p className="mt-3 text-[10px] text-foreground/40">
-        Template inputs save to your browser. Nothing leaves your machine unless you tap &ldquo;Enhance with AI&rdquo;.
+        {AI_ENABLED
+          ? "Template inputs save to your browser. Nothing leaves your machine unless you tap “Enhance with AI”."
+          : "All inputs save to your browser. Nothing leaves your machine."}
       </p>
     </div>
   );