add file storage, local and prod

create-agentic-app/template/src/app/api/diagnostics/route.ts

@@ -24,6 +24,10 @@ interface DiagnosticsResponse {
   ai: {
     configured: boolean;
   };
+  storage: {
+    configured: boolean;
+    type: "local" | "remote";
+  };
   overallStatus: StatusLevel;
 }
 
@@ -115,6 +119,10 @@ export async function GET(req: Request) {
     env.BETTER_AUTH_SECRET && env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET;
   const aiConfigured = env.OPENROUTER_API_KEY; // We avoid live-calling the AI provider here
 
+  // Storage configuration check
+  const storageConfigured = Boolean(process.env.BLOB_READ_WRITE_TOKEN);
+  const storageType: "local" | "remote" = storageConfigured ? "remote" : "local";
+
   const overallStatus: StatusLevel = (() => {
     if (!env.POSTGRES_URL || !dbConnected || !schemaApplied) return "error";
     if (!authConfigured) return "error";
@@ -138,6 +146,10 @@ export async function GET(req: Request) {
     ai: {
       configured: aiConfigured,
     },
+    storage: {
+      configured: storageConfigured,
+      type: storageType,
+    },
     overallStatus,
   };
 

create-agentic-app/template/src/app/page.tsx

@@ -43,7 +43,7 @@ export default function Home() {
             <div className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border">
               <iframe
                 className="absolute top-0 left-0 w-full h-full"
-                src="https://www.youtube.com/embed/T0zFZsr_d0Q"
+                src="https://www.youtube.com/embed/JQ86N3WOAh4"
                 title="Agentic Coding Boilerplate Tutorial"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen

create-agentic-app/template/src/components/setup-checklist.tsx

@@ -26,6 +26,10 @@ type DiagnosticsResponse = {
   ai: {
     configured: boolean;
   };
+  storage: {
+    configured: boolean;
+    type: "local" | "remote";
+  };
   overallStatus: "ok" | "warn" | "error";
 };
 
@@ -102,6 +106,16 @@ export function SetupChecklist() {
         ? "Set OPENROUTER_API_KEY for AI chat"
         : undefined,
     },
+    {
+      key: "storage",
+      label: "File storage (optional)",
+      ok: true, // Always considered "ok" since local storage works
+      detail: data?.storage
+        ? data.storage.type === "remote"
+          ? "Using Vercel Blob storage"
+          : "Using local storage (public/uploads/)"
+        : undefined,
+    },
   ] as const;
 
   const completed = steps.filter((s) => s.ok).length;

create-agentic-app/template/src/lib/storage.ts

@@ -0,0 +1,102 @@
+import { put, del } from "@vercel/blob";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+
+/**
+ * Result from uploading a file to storage
+ */
+export interface StorageResult {
+  url: string; // Public URL to access the file
+  pathname: string; // Path/key of the stored file
+}
+
+/**
+ * Uploads a file to storage (Vercel Blob or local filesystem)
+ * 
+ * @param buffer - File contents as a Buffer
+ * @param filename - Name of the file (e.g., "image.png")
+ * @param folder - Optional folder/prefix (e.g., "avatars")
+ * @returns StorageResult with url and pathname
+ * 
+ * @example
+ * ```ts
+ * const result = await upload(fileBuffer, "avatar.png", "avatars");
+ * console.log(result.url); // https://blob.vercel.io/... or /uploads/avatars/avatar.png
+ * ```
+ */
+export async function upload(
+  buffer: Buffer,
+  filename: string,
+  folder?: string
+): Promise<StorageResult> {
+  const hasVercelBlob = Boolean(process.env.BLOB_READ_WRITE_TOKEN);
+
+  if (hasVercelBlob) {
+    // Use Vercel Blob storage
+    const pathname = folder ? `${folder}/${filename}` : filename;
+    const blob = await put(pathname, buffer, {
+      access: "public",
+    });
+
+    return {
+      url: blob.url,
+      pathname: blob.pathname,
+    };
+  } else {
+    // Use local filesystem storage
+    const uploadsDir = join(process.cwd(), "public", "uploads");
+    const targetDir = folder ? join(uploadsDir, folder) : uploadsDir;
+
+    // Ensure the directory exists
+    if (!existsSync(targetDir)) {
+      await mkdir(targetDir, { recursive: true });
+    }
+
+    // Write the file
+    const filepath = join(targetDir, filename);
+    await writeFile(filepath, buffer);
+
+    // Return local URL
+    const pathname = folder ? `${folder}/${filename}` : filename;
+    const url = `/uploads/${pathname}`;
+
+    return {
+      url,
+      pathname,
+    };
+  }
+}
+
+/**
+ * Deletes a file from storage
+ * 
+ * @param url - The URL of the file to delete
+ * 
+ * @example
+ * ```ts
+ * await deleteFile("https://blob.vercel.io/...");
+ * // or
+ * await deleteFile("/uploads/avatars/avatar.png");
+ * ```
+ */
+export async function deleteFile(url: string): Promise<void> {
+  const hasVercelBlob = Boolean(process.env.BLOB_READ_WRITE_TOKEN);
+
+  if (hasVercelBlob) {
+    // Delete from Vercel Blob
+    await del(url);
+  } else {
+    // Delete from local filesystem
+    // Extract pathname from URL (e.g., /uploads/avatars/avatar.png -> avatars/avatar.png)
+    const pathname = url.replace(/^\/uploads\//, "");
+    const filepath = join(process.cwd(), "public", "uploads", pathname);
+
+    // Only attempt to delete if file exists
+    if (existsSync(filepath)) {
+      const { unlink } = await import("fs/promises");
+      await unlink(filepath);
+    }
+  }
+}
+