@farm.js/create-app 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/index.mjs

@@ -2,7 +2,2659 @@ import { logger, showBanner } from "./utils.mjs";
 import prompts from "prompts";
 import path from "path";
 import fs from "fs/promises";
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import path$1 from "node:path";
+//#region ../farm-cli/src/ui-feature-registry.ts
+async function installUIFeature(input) {
+	const feature = input.definition.ui;
+	if (!feature) {
+		input.result.notes.push(`No --ui feature pack is available for ${input.definition.provider} yet.`);
+		return;
+	}
+	input.result.ui = {
+		feature: feature.name,
+		components: [...feature.components],
+		files: []
+	};
+	input.result.notes.push(`Installed ${feature.description} with shadcn-style local source components.`, ...feature.notes || []);
+	await ensureComponentsJson({
+		root: input.root,
+		dryRun: input.dryRun,
+		result: input.result
+	});
+	await ensureShadcnGlobals({
+		root: input.root,
+		dryRun: input.dryRun,
+		result: input.result
+	});
+	await ensureTsconfigAlias({
+		root: input.root,
+		dryRun: input.dryRun,
+		result: input.result
+	});
+	if (!input.skipPackageJson) await updateUIPackageJson({
+		root: input.root,
+		dryRun: input.dryRun,
+		result: input.result
+	});
+	await writeGeneratedFile({
+		root: input.root,
+		relativePath: path$1.join("src", "lib", "utils.ts"),
+		source: shadcnUtilsTemplate(),
+		dryRun: input.dryRun,
+		force: input.force,
+		result: input.result
+	});
+	for (const component of feature.components) await writeGeneratedFile({
+		root: input.root,
+		relativePath: path$1.join("src", "components", "ui", `${component}.tsx`),
+		source: shadcnComponentTemplate(component),
+		dryRun: input.dryRun,
+		force: input.force,
+		result: input.result
+	});
+	if (feature.needsApiClient !== false) await writeGeneratedFile({
+		root: input.root,
+		relativePath: path$1.join("src", "lib", "api.ts"),
+		source: apiClientTemplate(),
+		dryRun: input.dryRun,
+		force: input.force,
+		result: input.result
+	});
+	for (const file of feature.files({
+		key: input.key,
+		provider: input.definition.provider
+	})) await writeGeneratedFile({
+		root: input.root,
+		relativePath: file.path,
+		source: file.source,
+		dryRun: input.dryRun,
+		force: input.force,
+		result: input.result
+	});
+}
+function stripeBillingUIFeature() {
+	return billingUIFeature({
+		provider: "stripe",
+		label: "Stripe"
+	});
+}
+function polarBillingUIFeature() {
+	return billingUIFeature({
+		provider: "polar",
+		label: "Polar"
+	});
+}
+function autumnBillingUIFeature() {
+	return billingUIFeature({
+		provider: "autumn",
+		label: "Autumn"
+	});
+}
+function aiChatUIFeature() {
+	return {
+		name: "ai-chat",
+		description: "AI chat UI",
+		components: [
+			"badge",
+			"button",
+			"card",
+			"input"
+		],
+		needsApiClient: false,
+		notes: ["Open \"/integrations/ai\" to try the generated chat UI."],
+		files: () => [componentFile("ai-chat.tsx", aiChatTemplate()), integrationPageFile("ai", "AIChat", "ai-chat")]
+	};
+}
+function supabaseAuthUIFeature() {
+	return {
+		name: "supabase-auth",
+		description: "Supabase auth UI",
+		components: [
+			"badge",
+			"button",
+			"card",
+			"input",
+			"label"
+		],
+		notes: ["Open \"/integrations/supabase\" to try the generated auth UI."],
+		files: (input) => [componentFile("supabase-auth-panel.tsx", supabaseAuthTemplate(input.key)), integrationPageFile("supabase", "SupabaseAuthPanel")]
+	};
+}
+function workosAuthUIFeature() {
+	return {
+		name: "workos-auth",
+		description: "WorkOS auth UI",
+		components: [
+			"badge",
+			"button",
+			"card"
+		],
+		notes: ["Open \"/integrations/workos\" to try the generated auth UI."],
+		files: (input) => [componentFile("workos-auth-panel.tsx", hostedAuthTemplate({
+			key: input.key,
+			provider: "WorkOS",
+			componentName: "WorkOSAuthPanel",
+			statusCall: "session",
+			statusMethod: "get",
+			logoutCall: "logout",
+			logoutMethod: "post",
+			loginHref: "/login?returnTo=/dashboard",
+			signupHref: "/signup?returnTo=/dashboard",
+			statusLabel: "Session"
+		})), integrationPageFile("workos", "WorkOSAuthPanel", "workos-auth-panel")]
+	};
+}
+function auth0AuthUIFeature() {
+	return authRouteShellUIFeature({
+		provider: "auth0",
+		label: "Auth0",
+		componentName: "Auth0AuthPanel",
+		signInHref: "/auth/login?returnTo=/dashboard",
+		signUpHref: "/auth/signup?returnTo=/dashboard",
+		sessionHref: "/auth/profile"
+	});
+}
+function clerkAuthUIFeature() {
+	return authRouteShellUIFeature({
+		provider: "clerk",
+		label: "Clerk",
+		componentName: "ClerkAuthPanel",
+		signInHref: "/sign-in",
+		signUpHref: "/sign-up",
+		sessionHref: "/dashboard"
+	});
+}
+function betterAuthUIFeature() {
+	return {
+		name: "better-auth-auth",
+		description: "Better Auth email and password UI",
+		components: [
+			"badge",
+			"button",
+			"card",
+			"input",
+			"label"
+		],
+		needsApiClient: false,
+		notes: ["Open \"/integrations/better-auth\" to try the generated auth UI."],
+		files: () => [
+			{
+				path: path$1.join("src", "lib", "auth-client.ts"),
+				source: betterAuthClientTemplate()
+			},
+			componentFile("better-auth-panel.tsx", betterAuthPanelTemplate()),
+			integrationPageFile("better-auth", "BetterAuthPanel")
+		]
+	};
+}
+function authjsUIFeature() {
+	return authRouteShellUIFeature({
+		provider: "authjs",
+		label: "Auth.js",
+		componentName: "AuthJsPanel",
+		signInHref: "/api/auth/signin",
+		signUpHref: "/api/auth/signin",
+		sessionHref: "/api/auth/session"
+	});
+}
+function resendEmailUIFeature() {
+	return {
+		name: "resend-email",
+		description: "Resend email console UI",
+		components: [
+			"badge",
+			"button",
+			"card",
+			"input",
+			"label"
+		],
+		notes: ["Open \"/integrations/resend\" to try the generated email UI."],
+		files: (input) => [componentFile("resend-email-console.tsx", resendEmailTemplate(input.key)), integrationPageFile("resend", "ResendEmailConsole")]
+	};
+}
+function jobsUIFeature(provider) {
+	const label = provider === "inngest" ? "Inngest" : "Trigger.dev";
+	return {
+		name: `${provider}-jobs`,
+		description: `${label} jobs console UI`,
+		components: [
+			"badge",
+			"button",
+			"card",
+			"input",
+			"label"
+		],
+		notes: [`Open "/integrations/jobs-${provider}" to try the generated jobs UI.`],
+		files: (input) => [componentFile(`${provider}-jobs-console.tsx`, jobsConsoleTemplate(input.key, label, provider)), integrationPageFile(`jobs-${provider}`, `${pascalCase(provider)}JobsConsole`)]
+	};
+}
+function unkeyApiKeysUIFeature() {
+	return {
+		name: "unkey-api-keys",
+		description: "Unkey protected route UI",
+		components: ["badge", "card"],
+		needsApiClient: false,
+		notes: ["Open \"/integrations/unkey\" to test the generated protected API route."],
+		files: () => [
+			componentFile("unkey-api-keys-console.tsx", unkeyApiKeysTemplate()),
+			integrationPageFile("unkey", "UnkeyApiKeysConsole"),
+			{
+				path: path$1.join("src", "app", "api", "protected", "route.ts"),
+				source: unkeyProtectedRouteTemplate()
+			}
+		]
+	};
+}
+function billingUIFeature(input) {
+	return {
+		name: `${input.provider}-billing`,
+		description: `${input.label} pricing and checkout UI`,
+		components: [
+			"badge",
+			"button",
+			"card"
+		],
+		notes: [`Open "/integrations/${input.provider}" to try the generated ${input.label} billing UI.`],
+		files: (templateInput) => [componentFile(`${input.provider}-billing.tsx`, billingPricingTemplate({
+			key: templateInput.key,
+			provider: input.provider,
+			label: input.label,
+			componentName: `${pascalCase(input.provider)}Billing`
+		})), integrationPageFile(input.provider, `${pascalCase(input.provider)}Billing`)]
+	};
+}
+function authRouteShellUIFeature(input) {
+	return {
+		name: `${input.provider}-auth`,
+		description: `${input.label} auth UI`,
+		components: [
+			"badge",
+			"button",
+			"card"
+		],
+		needsApiClient: false,
+		notes: [`Open "/integrations/${input.provider}" to try the generated auth UI.`],
+		files: () => [componentFile(`${input.provider}-auth-panel.tsx`, authRouteShellTemplate({
+			provider: input.label,
+			componentName: input.componentName,
+			signInHref: input.signInHref,
+			signUpHref: input.signUpHref,
+			sessionHref: input.sessionHref
+		})), integrationPageFile(input.provider, input.componentName, input.provider === "authjs" ? "authjs-auth-panel" : void 0)]
+	};
+}
+function componentFile(fileName, source) {
+	return {
+		path: path$1.join("src", "components", "farm", fileName),
+		source
+	};
+}
+function integrationPageFile(provider, componentName, sourceFileName = kebabCase(componentName)) {
+	return {
+		path: path$1.join("src", "app", "integrations", provider, "page.tsx"),
+		source: `import { ${componentName} } from "@/components/farm/${sourceFileName}";
+
+export default function ${componentName}Page() {
+  return <${componentName} />;
+}
+`
+	};
+}
+async function writeGeneratedFile(input) {
+	const absolutePath = path$1.join(input.root, input.relativePath);
+	const exists = existsSync(absolutePath);
+	const source = resolveGeneratedAliases(input.source, input.relativePath);
+	input.result.ui?.files.push(absolutePath);
+	if (exists && !input.force) {
+		pushResultPath(input.result.skipped, absolutePath);
+		return;
+	}
+	if (!input.dryRun) {
+		await mkdir(path$1.dirname(absolutePath), { recursive: true });
+		await writeFile(absolutePath, source, "utf8");
+	}
+	pushResultPath(exists ? input.result.updated : input.result.created, absolutePath);
+}
+function resolveGeneratedAliases(source, relativePath) {
+	const sourceDirectory = path$1.dirname(relativePath);
+	return source.replace(/(["'])@\/([^"']+)\1/g, (_match, quote, target) => {
+		const relativeTarget = path$1.relative(sourceDirectory, path$1.join("src", target)).split(path$1.sep).join("/");
+		return `${quote}${relativeTarget.startsWith(".") ? relativeTarget : `./${relativeTarget}`}${quote}`;
+	});
+}
+async function ensureComponentsJson(input) {
+	const componentsJsonPath = path$1.join(input.root, "components.json");
+	input.result.ui?.files.push(componentsJsonPath);
+	const defaults = createComponentsJson();
+	if (!existsSync(componentsJsonPath)) {
+		if (!input.dryRun) await writeFile(componentsJsonPath, `${JSON.stringify(defaults, null, 2)}\n`, "utf8");
+		pushResultPath(input.result.created, componentsJsonPath);
+		return;
+	}
+	let current;
+	try {
+		current = JSON.parse(await readFile(componentsJsonPath, "utf8"));
+	} catch {
+		pushResultPath(input.result.skipped, componentsJsonPath);
+		input.result.notes.push("components.json could not be parsed. Keep shadcn aliases pointed at src/components and src/lib/utils.");
+		return;
+	}
+	const next = mergeComponentsJson(current, defaults);
+	if (JSON.stringify(current) === JSON.stringify(next)) {
+		pushResultPath(input.result.skipped, componentsJsonPath);
+		return;
+	}
+	if (!input.dryRun) await writeFile(componentsJsonPath, `${JSON.stringify(next, null, 2)}\n`, "utf8");
+	pushResultPath(input.result.updated, componentsJsonPath);
+}
+async function ensureShadcnGlobals(input) {
+	const globalsPath = path$1.join(input.root, "src", "app", "globals.css");
+	input.result.ui?.files.push(globalsPath);
+	if (!existsSync(globalsPath)) {
+		const source = `@import "tailwindcss";
+
+${SHADCN_THEME_CSS}
+`;
+		if (!input.dryRun) {
+			await mkdir(path$1.dirname(globalsPath), { recursive: true });
+			await writeFile(globalsPath, source, "utf8");
+		}
+		pushResultPath(input.result.created, globalsPath);
+		return;
+	}
+	const source = await readFile(globalsPath, "utf8");
+	const hasTailwindImport = source.includes("@import \"tailwindcss\"");
+	const hasTheme = source.includes("--color-background") || source.includes("--background:");
+	if (hasTailwindImport && hasTheme) {
+		pushResultPath(input.result.skipped, globalsPath);
+		return;
+	}
+	const nextSource = `${hasTailwindImport ? "" : "@import \"tailwindcss\";\n\n"}${source.trimEnd()}${hasTheme ? "\n" : `
+
+${SHADCN_THEME_CSS}
+`}`;
+	if (!input.dryRun) await writeFile(globalsPath, nextSource, "utf8");
+	pushResultPath(input.result.updated, globalsPath);
+}
+async function ensureTsconfigAlias(input) {
+	const tsconfigPath = path$1.join(input.root, "tsconfig.json");
+	input.result.ui?.files.push(tsconfigPath);
+	const defaults = { compilerOptions: {
+		baseUrl: ".",
+		paths: { "@/*": ["./src/*"] }
+	} };
+	if (!existsSync(tsconfigPath)) {
+		if (!input.dryRun) await writeFile(tsconfigPath, `${JSON.stringify(defaults, null, 2)}\n`, "utf8");
+		pushResultPath(input.result.created, tsconfigPath);
+		return;
+	}
+	let tsconfig;
+	try {
+		tsconfig = JSON.parse(await readFile(tsconfigPath, "utf8"));
+	} catch {
+		pushResultPath(input.result.skipped, tsconfigPath);
+		input.result.notes.push("tsconfig.json could not be parsed. Add paths: { \"@/*\": [\"./src/*\"] } manually.");
+		return;
+	}
+	const compilerOptions = readObject(tsconfig.compilerOptions);
+	const paths = readObject(compilerOptions.paths);
+	const nextCompilerOptions = {
+		...compilerOptions,
+		baseUrl: typeof compilerOptions.baseUrl === "string" ? compilerOptions.baseUrl : ".",
+		paths: {
+			...paths,
+			"@/*": ["./src/*"]
+		}
+	};
+	const nextTsconfig = {
+		...tsconfig,
+		compilerOptions: nextCompilerOptions
+	};
+	if (JSON.stringify(tsconfig) === JSON.stringify(nextTsconfig)) {
+		pushResultPath(input.result.skipped, tsconfigPath);
+		return;
+	}
+	if (!input.dryRun) await writeFile(tsconfigPath, `${JSON.stringify(nextTsconfig, null, 2)}\n`, "utf8");
+	pushResultPath(input.result.updated, tsconfigPath);
+}
+async function updateUIPackageJson(input) {
+	const packageJsonPath = path$1.join(input.root, "package.json");
+	input.result.ui?.files.push(packageJsonPath);
+	if (!existsSync(packageJsonPath)) {
+		pushResultPath(input.result.skipped, packageJsonPath);
+		return;
+	}
+	const source = await readFile(packageJsonPath, "utf8");
+	const manifest = JSON.parse(source);
+	let changed = false;
+	for (const [dependency, version] of Object.entries(UI_DEPENDENCIES)) {
+		if (hasPackageDependency$1(manifest, dependency)) continue;
+		manifest.dependencies = {
+			...manifest.dependencies,
+			[dependency]: version
+		};
+		changed = true;
+	}
+	if (!changed) {
+		pushResultPath(input.result.skipped, packageJsonPath);
+		return;
+	}
+	if (!input.dryRun) await writeFile(packageJsonPath, `${JSON.stringify(manifest, null, 2)}\n`, "utf8");
+	input.result.packageJson = packageJsonPath;
+	pushResultPath(input.result.updated, packageJsonPath);
+}
+const UI_DEPENDENCIES = {
+	"class-variance-authority": "^0.7.1",
+	clsx: "^2.1.1",
+	"tailwind-merge": "^3.3.1",
+	tailwindcss: "^4.1.18"
+};
+const SHADCN_THEME_CSS = `@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+:root,
+[data-theme="light"] {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+[data-theme="dark"] {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}`;
+function createComponentsJson() {
+	return {
+		$schema: "https://ui.shadcn.com/schema.json",
+		style: "new-york",
+		rsc: true,
+		tsx: true,
+		tailwind: {
+			config: "",
+			css: "src/app/globals.css",
+			baseColor: "zinc",
+			cssVariables: true
+		},
+		aliases: {
+			components: "@/components",
+			utils: "@/lib/utils",
+			ui: "@/components/ui",
+			lib: "@/lib",
+			hooks: "@/hooks"
+		},
+		registries: { farm: { url: "https://farmjs.dev/r/{name}.json" } }
+	};
+}
+function mergeComponentsJson(current, defaults) {
+	const aliases = readObject(current.aliases);
+	const tailwind = readObject(current.tailwind);
+	const registries = readObject(current.registries);
+	return {
+		...current,
+		$schema: typeof current.$schema === "string" ? current.$schema : defaults.$schema,
+		style: typeof current.style === "string" ? current.style : defaults.style,
+		rsc: typeof current.rsc === "boolean" ? current.rsc : defaults.rsc,
+		tsx: typeof current.tsx === "boolean" ? current.tsx : defaults.tsx,
+		tailwind: {
+			...defaults.tailwind,
+			...tailwind
+		},
+		aliases: {
+			...defaults.aliases,
+			...aliases
+		},
+		registries: {
+			...registries,
+			farm: readObject(registries.farm).url ? registries.farm : defaults.registries.farm
+		}
+	};
+}
+function shadcnUtilsTemplate() {
+	return `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+}
+function apiClientTemplate() {
+	return `import { createIntegrations } from "@farm.js/core/client";
+import type { AppIntegrations } from "./integrations";
+
+export const { api, apiClient } = createIntegrations<AppIntegrations>();
+`;
+}
+function shadcnComponentTemplate(component) {
+	switch (component) {
+		case "badge": return `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { badgeVariants };
+`;
+		case "button": return `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { buttonVariants };
+`;
+		case "card": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-normal", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+`;
+		case "input": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+`;
+		case "label": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";
+`;
+	}
+}
+function billingPricingTemplate(input) {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { apiClient } from "@/lib/api";
+
+type BillingProduct = NonNullable<Awaited<ReturnType<typeof apiClient.${input.key}.products>>["data"]>[number];
+
+export function ${input.componentName}() {
+  const [products, setProducts] = React.useState<BillingProduct[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [checkingOut, setCheckingOut] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let active = true;
+
+    async function loadProducts() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await apiClient.${input.key}.products();
+        if (response.error) {
+          throw new Error(readErrorMessage(response.error, "${input.label} request failed."));
+        }
+
+        if (active) {
+          setProducts(Array.from(response.data ?? []));
+        }
+      } catch (cause) {
+        if (active) {
+          setError(cause instanceof Error ? cause.message : "Could not load ${input.label} products.");
+        }
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void loadProducts();
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  async function startCheckout(product: BillingProduct) {
+    const productId = String(readProductField(product, "id") ?? "");
+    if (!productId) {
+      setError("This Stripe product is missing an id.");
+      return;
+    }
+
+    setCheckingOut(productId);
+    setError(null);
+
+    try {
+      const response = await apiClient.${input.key}.checkout({
+        body: {
+          productId,
+          successPath: "/billing/success",
+          cancelPath: "/integrations/${input.provider}",
+        },
+      });
+      if (response.error) {
+        throw new Error(readErrorMessage(response.error, "${input.label} checkout failed."));
+      }
+
+      const redirectTo = response.data?.redirectTo;
+      if (!redirectTo) {
+        throw new Error("${input.label} checkout did not return a redirect URL.");
+      }
+
+      window.location.assign(redirectTo);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "Could not start ${input.label} checkout.");
+      setCheckingOut(null);
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-5xl flex-col gap-8">
+        <div className="max-w-2xl space-y-3">
+          <Badge variant="secondary">${input.label}</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">${input.label} billing</h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            Plans, checkout, and customer billing actions in one place.
+          </p>
+        </div>
+
+        {error ? (
+          <div className="rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            {error}
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <Card key={index} className="min-h-[220px] animate-pulse" />
+            ))}
+          </div>
+        ) : products.length ? (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {products.map((product) => {
+              const productId = String(readProductField(product, "id") ?? "");
+              const fallbackName = productId || "Product";
+              const name = String(readProductField(product, "name") ?? fallbackName);
+              const description =
+                readProductField(product, "description") ?? "Connected to your Stripe catalog.";
+
+              return (
+                <Card key={productId || name} className="flex min-h-[260px] flex-col">
+                  <CardHeader>
+                    <CardTitle className="text-xl">{name}</CardTitle>
+                    <CardDescription>{String(description)}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="flex-1">
+                    <div className="text-3xl font-semibold">{formatProductPrice(product)}</div>
+                  </CardContent>
+                  <CardFooter>
+                    <Button
+                      className="w-full"
+                      disabled={!productId || checkingOut === productId}
+                      onClick={() => void startCheckout(product)}
+                    >
+                      {checkingOut === productId ? "Starting checkout..." : "Checkout"}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              );
+            })}
+          </div>
+        ) : (
+          <Card>
+            <CardHeader>
+              <CardTitle>No products yet</CardTitle>
+              <CardDescription>
+                Add products to the generated ${input.label} integration template or provider dashboard.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        )}
+      </section>
+    </main>
+  );
+}
+
+function readProductField(product: BillingProduct, field: string) {
+  return (product as Record<string, unknown>)[field];
+}
+
+function formatProductPrice(product: BillingProduct) {
+  const amount = readProductField(product, "amount") ?? readProductField(product, "unitAmount");
+  const currency = String(readProductField(product, "currency") ?? "USD").toUpperCase();
+  const interval = readProductField(product, "interval");
+
+  if (typeof amount === "number" && Number.isFinite(amount)) {
+    const formatted = new Intl.NumberFormat("en", {
+      style: "currency",
+      currency,
+    }).format(amount / 100);
+
+    return interval ? \`\${formatted}/\${String(interval)}\` : formatted;
+  }
+
+  return "Custom";
+}
+
+function readErrorMessage(error: unknown, fallback: string) {
+  if (error && typeof error === "object" && "message" in error) {
+    return String((error as { message?: unknown }).message);
+  }
+
+  return fallback;
+}
+`;
+}
+function aiChatTemplate() {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+type ChatMessage = {
+  role: "user" | "assistant";
+  content: string;
+};
+
+export function AIChat() {
+  const [messages, setMessages] = React.useState<ChatMessage[]>([]);
+  const [input, setInput] = React.useState("");
+  const [pending, setPending] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  async function sendMessage(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextInput = input.trim();
+    if (!nextInput) {
+      return;
+    }
+
+    const nextMessages: ChatMessage[] = [...messages, { role: "user", content: nextInput }];
+    setMessages(nextMessages);
+    setInput("");
+    setPending(true);
+    setError(null);
+
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          messages: nextMessages.map((message) => ({
+            role: message.role,
+            parts: [{ type: "text", text: message.content }],
+          })),
+        }),
+      });
+
+      const text = await response.text();
+      if (!response.ok) {
+        throw new Error(text || "AI request failed.");
+      }
+
+      setMessages([...nextMessages, { role: "assistant", content: text || "Done." }]);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "AI request failed.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">AI</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Chat</h1>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Conversation</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="min-h-[320px] space-y-3 rounded-md border bg-muted/30 p-4">
+              {messages.length ? (
+                messages.map((message, index) => (
+                  <div
+                    key={index}
+                    className={message.role === "user" ? "ml-auto max-w-[85%] rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground" : "max-w-[85%] rounded-md bg-background px-3 py-2 text-sm"}
+                  >
+                    {message.content}
+                  </div>
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground">Start a conversation.</p>
+              )}
+            </div>
+
+            {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+            <form className="flex gap-2" onSubmit={sendMessage}>
+              <Input
+                value={input}
+                onChange={(event) => setInput(event.target.value)}
+                placeholder="Ask something..."
+              />
+              <Button disabled={pending} type="submit">
+                {pending ? "Sending..." : "Send"}
+              </Button>
+            </form>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function supabaseAuthTemplate(key) {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { apiClient } from "@/lib/api";
+
+export function SupabaseAuthPanel() {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [mode, setMode] = React.useState<"login" | "signup">("login");
+  const [pending, setPending] = React.useState(false);
+  const [status, setStatus] = React.useState<string | null>(null);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setStatus(null);
+
+    const response =
+      mode === "login"
+        ? await apiClient.${key}.login.post({ body: { email, password, returnTo: "/dashboard" } })
+        : await apiClient.${key}.signup.post({ body: { email, password, returnTo: "/dashboard" } });
+
+    if (response.error) {
+      setStatus(response.error.message);
+      setPending(false);
+      return;
+    }
+
+    if (response.data?.redirectTo) {
+      window.location.assign(response.data.redirectTo);
+      return;
+    }
+
+    setStatus(response.data?.message ?? "Check your email to continue.");
+    setPending(false);
+  }
+
+  async function loadSession() {
+    const response = await apiClient.${key}.session.get();
+    setStatus(response.error ? response.error.message : response.data?.authenticated ? "Authenticated" : "No active session");
+  }
+
+  async function logout() {
+    const response = await fetch("/auth/logout", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ returnTo: "/" }),
+    });
+    const data = (await response.json()) as { redirectTo?: string; error?: string };
+    if (data.redirectTo) {
+      window.location.assign(data.redirectTo);
+      return;
+    }
+    setStatus(data.error ?? "Signed out");
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">Supabase</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Auth</h1>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">{mode === "login" ? "Sign in" : "Create account"}</CardTitle>
+            <CardDescription>Email and password access for this app.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4" onSubmit={submit}>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" value={email} onChange={(event) => setEmail(event.target.value)} type="email" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" value={password} onChange={(event) => setPassword(event.target.value)} type="password" />
+              </div>
+              {status ? <p className="text-sm text-muted-foreground">{status}</p> : null}
+              <div className="flex flex-wrap gap-2">
+                <Button disabled={pending} type="submit">{pending ? "Working..." : mode === "login" ? "Sign in" : "Sign up"}</Button>
+                <Button type="button" variant="outline" onClick={() => setMode(mode === "login" ? "signup" : "login")}>
+                  {mode === "login" ? "Use sign up" : "Use sign in"}
+                </Button>
+                <Button type="button" variant="ghost" onClick={() => void loadSession()}>Session</Button>
+                <Button type="button" variant="ghost" onClick={() => void logout()}>Logout</Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function hostedAuthTemplate(input) {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { apiClient } from "@/lib/api";
+
+export function ${input.componentName}() {
+  const [status, setStatus] = React.useState<string>("Idle");
+  const [pending, setPending] = React.useState(false);
+
+  async function refreshStatus() {
+    setPending(true);
+    const response = await apiClient.${input.key}.${input.statusCall}.${input.statusMethod}();
+    if (response.error) {
+      setStatus(response.error.message);
+    } else {
+      setStatus(response.data?.authenticated ? "Authenticated" : "No active session");
+    }
+    setPending(false);
+  }
+
+  async function logout() {
+    setPending(true);
+    const response = await apiClient.${input.key}.${input.logoutCall}.${input.logoutMethod}();
+    if (response.data?.redirectTo) {
+      window.location.assign(response.data.redirectTo);
+      return;
+    }
+    setStatus(response.error?.message ?? "Signed out");
+    setPending(false);
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">${input.provider}</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Auth</h1>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">${input.provider} session</CardTitle>
+            <CardDescription>Hosted auth, account session, and sign-out controls.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="rounded-md border bg-muted/30 px-3 py-2 text-sm">{status}</p>
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" onClick={() => window.location.assign("${input.loginHref}")}>Sign in</Button>
+              <Button type="button" variant="outline" onClick={() => window.location.assign("${input.signupHref}")}>Sign up</Button>
+              <Button type="button" variant="ghost" disabled={pending} onClick={() => void refreshStatus()}>Refresh</Button>
+              <Button type="button" variant="ghost" disabled={pending} onClick={() => void logout()}>Logout</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function authRouteShellTemplate(input) {
+	return `"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ${input.componentName}() {
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">${input.provider}</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Auth</h1>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">${input.provider} routes</CardTitle>
+            <CardDescription>Account entry points and session route.</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            <Button type="button" onClick={() => window.location.assign("${input.signInHref}")}>Sign in</Button>
+            <Button type="button" variant="outline" onClick={() => window.location.assign("${input.signUpHref}")}>Sign up</Button>
+            <Button type="button" variant="ghost" onClick={() => window.location.assign("${input.sessionHref}")}>Session</Button>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function betterAuthClientTemplate() {
+	return `import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+  baseURL: "",
+});
+`;
+}
+function betterAuthPanelTemplate() {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+
+type Mode = "sign-in" | "sign-up";
+
+export function BetterAuthPanel() {
+  const [mode, setMode] = React.useState<Mode>("sign-in");
+  const [pending, setPending] = React.useState(false);
+  const [message, setMessage] = React.useState("Ready");
+  const [sessionEmail, setSessionEmail] = React.useState<string | null>(null);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setPending(true);
+    setMessage(mode === "sign-in" ? "Signing in…" : "Creating account…");
+
+    const form = new FormData(event.currentTarget);
+    const email = String(form.get("email") || "");
+    const password = String(form.get("password") || "");
+    const name = String(form.get("name") || "");
+    try {
+      const response =
+        mode === "sign-in"
+          ? await authClient.signIn.email({ email, password })
+          : await authClient.signUp.email({ email, password, name });
+
+      if (response.error) {
+        setMessage(response.error.message || "Authentication failed.");
+        return;
+      }
+
+      setSessionEmail(email);
+      setMessage(mode === "sign-in" ? "Signed in." : "Account created.");
+    } catch (cause) {
+      setMessage(cause instanceof Error ? cause.message : "Could not reach the auth server.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function refreshSession() {
+    setPending(true);
+    try {
+      const response = await authClient.getSession();
+      setSessionEmail(response.data?.user.email || null);
+      setMessage(response.error?.message || (response.data ? "Session active." : "No active session."));
+    } catch (cause) {
+      setMessage(cause instanceof Error ? cause.message : "Could not read the session.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function signOut() {
+    setPending(true);
+    try {
+      const response = await authClient.signOut();
+      if (response.error) {
+        setMessage(response.error.message || "Could not sign out.");
+        return;
+      }
+      setSessionEmail(null);
+      setMessage("Signed out.");
+    } catch (cause) {
+      setMessage(cause instanceof Error ? cause.message : "Could not reach the auth server.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-5 py-12 text-foreground sm:px-8">
+      <section className="mx-auto grid w-full max-w-5xl gap-8 lg:grid-cols-[1fr_420px] lg:items-start">
+        <div className="space-y-5 py-4">
+          <Badge variant="secondary">Better Auth × Farm.js</Badge>
+          <div className="space-y-3">
+            <h1 className="max-w-xl text-4xl font-semibold tracking-tight sm:text-5xl">
+              Authentication that starts ready.
+            </h1>
+            <p className="max-w-xl text-base leading-7 text-muted-foreground">
+              Test account creation, email sign-in, session reads, and sign-out through Farm’s
+              generated Better Auth integration.
+            </p>
+          </div>
+          <div aria-live="polite" className="border-l-2 border-primary pl-4 text-sm">
+            <p className="font-medium">{message}</p>
+            <p className="mt-1 text-muted-foreground">
+              {sessionEmail ? \`Signed in as \${sessionEmail}\` : "No authenticated user"}
+            </p>
+          </div>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{mode === "sign-in" ? "Welcome back" : "Create an account"}</CardTitle>
+            <CardDescription>
+              {mode === "sign-in"
+                ? "Enter your credentials to start a secure session."
+                : "Use an email and password to create your local account."}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form className="space-y-4" onSubmit={submit}>
+              {mode === "sign-up" ? (
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input autoComplete="name" id="name" name="name" required />
+                </div>
+              ) : null}
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input autoComplete="email" id="email" name="email" required type="email" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  autoComplete={mode === "sign-in" ? "current-password" : "new-password"}
+                  id="password"
+                  minLength={8}
+                  name="password"
+                  required
+                  type="password"
+                />
+              </div>
+              <Button className="w-full" disabled={pending} type="submit">
+                {pending ? "Working…" : mode === "sign-in" ? "Sign in" : "Create account"}
+              </Button>
+            </form>
+
+            <div className="mt-4 grid gap-2 sm:grid-cols-2">
+              <Button
+                disabled={pending}
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setMode(mode === "sign-in" ? "sign-up" : "sign-in");
+                  setMessage("Ready");
+                }}
+              >
+                {mode === "sign-in" ? "Create account" : "Use sign in"}
+              </Button>
+              <Button disabled={pending} type="button" variant="outline" onClick={() => void refreshSession()}>
+                Check session
+              </Button>
+            </div>
+            <Button
+              className="mt-2 w-full"
+              disabled={pending || !sessionEmail}
+              type="button"
+              variant="ghost"
+              onClick={() => void signOut()}
+            >
+              Sign out
+            </Button>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function resendEmailTemplate(key) {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { apiClient } from "@/lib/api";
+
+export function ResendEmailConsole() {
+  const [to, setTo] = React.useState("");
+  const [name, setName] = React.useState("Ada");
+  const templateId = "welcome" as const;
+  const [status, setStatus] = React.useState("Idle");
+  const [previewHtml, setPreviewHtml] = React.useState("");
+
+  async function loadTemplates() {
+    const response = await apiClient.${key}.templates();
+    const templates = Array.isArray(response.data)
+      ? (response.data as Array<{ id: string }>)
+      : [];
+    setStatus(response.error ? response.error.message : "Templates: " + templates.map((item) => item.id).join(", "));
+  }
+
+  async function preview() {
+    const response = await apiClient.${key}.preview({
+      body: {
+        templateId,
+        data: { name },
+      },
+    });
+    if (response.error) {
+      setStatus(response.error.message);
+      return;
+    }
+    setPreviewHtml(response.data?.html ?? "");
+    setStatus(response.data?.subject ?? "Preview loaded");
+  }
+
+  async function send() {
+    const response = await apiClient.${key}.send({
+      body: {
+        templateId,
+        to,
+        data: { name },
+      },
+    });
+    setStatus(response.error ? response.error.message : "Sent " + (response.data?.id ?? "email"));
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">Resend</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Email console</h1>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Send template</CardTitle>
+            <CardDescription>Template previews and delivery controls.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="to">To</Label>
+                <Input id="to" value={to} onChange={(event) => setTo(event.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" value={name} onChange={(event) => setName(event.target.value)} />
+              </div>
+            </div>
+            <p className="rounded-md border bg-muted/30 px-3 py-2 text-sm">{status}</p>
+            {previewHtml ? <div className="max-h-64 overflow-auto rounded-md border p-3 text-sm" dangerouslySetInnerHTML={{ __html: previewHtml }} /> : null}
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" variant="outline" onClick={() => void loadTemplates()}>Templates</Button>
+              <Button type="button" variant="outline" onClick={() => void preview()}>Preview</Button>
+              <Button type="button" onClick={() => void send()}>Send</Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function jobsConsoleTemplate(key, label, provider) {
+	return `"use client";
+
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { apiClient } from "@/lib/api";
+
+type JobTask = {
+  key: string;
+  description?: string | null;
+};
+
+export function ${`${pascalCase(provider)}JobsConsole`}() {
+  const [tasks, setTasks] = React.useState<JobTask[]>([]);
+  const [taskKey, setTaskKey] = React.useState("");
+  const [runId, setRunId] = React.useState("");
+  const [status, setStatus] = React.useState("Idle");
+
+  async function loadTasks() {
+    const response = await apiClient.${key}.tasks.list();
+    if (response.error) {
+      setStatus(response.error.message);
+      return;
+    }
+    const nextTasks = Array.from(response.data ?? []);
+    setTasks(nextTasks);
+    setTaskKey(nextTasks[0]?.key ?? "");
+    setStatus(nextTasks.length ? "Tasks loaded" : "No tasks registered yet");
+  }
+
+  async function triggerTask() {
+    const task = (apiClient.${key} as Record<string, any>)[taskKey];
+    if (!task?.trigger) {
+      setStatus("Select a task first.");
+      return;
+    }
+    const response = await task.trigger({ body: { input: {} } });
+    setStatus(response.error ? response.error.message : "Triggered " + (response.data?.runId ?? response.data?.id ?? taskKey));
+  }
+
+  async function checkStatus() {
+    const task = (apiClient.${key} as Record<string, any>)[taskKey];
+    if (!task?.status || !runId) {
+      setStatus("Enter a task and run id.");
+      return;
+    }
+    const response = await task.status({ query: { runId } });
+    setStatus(response.error ? response.error.message : JSON.stringify(response.data));
+  }
+
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-4xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">${label}</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Jobs console</h1>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Tasks</CardTitle>
+            <CardDescription>Task runs and status checks.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="taskKey">Task key</Label>
+                <Input id="taskKey" value={taskKey} onChange={(event) => setTaskKey(event.target.value)} />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="runId">Run id</Label>
+                <Input id="runId" value={runId} onChange={(event) => setRunId(event.target.value)} />
+              </div>
+            </div>
+            <p className="rounded-md border bg-muted/30 px-3 py-2 text-sm">{status}</p>
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" variant="outline" onClick={() => void loadTasks()}>Load tasks</Button>
+              <Button type="button" onClick={() => void triggerTask()}>Trigger</Button>
+              <Button type="button" variant="ghost" onClick={() => void checkStatus()}>Status</Button>
+            </div>
+            {tasks.length ? (
+              <div className="grid gap-2">
+                {tasks.map((task) => (
+                  <button key={task.key} className="rounded-md border px-3 py-2 text-left text-sm" onClick={() => setTaskKey(task.key)} type="button">
+                    {task.key}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function unkeyApiKeysTemplate() {
+	return `import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function UnkeyApiKeysConsole() {
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">Unkey</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">API keys</h1>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Protected API</CardTitle>
+            <CardDescription>Requests are verified by Unkey before the route runs.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <code className="block overflow-x-auto rounded-md border bg-muted/30 p-3 text-xs">
+              curl http://localhost:3000/api/protected -H &quot;Authorization: Bearer YOUR_KEY&quot;
+            </code>
+            <p className="text-sm text-muted-foreground">
+              Create and rotate keys from trusted server code or the Unkey dashboard.
+            </p>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
+function unkeyProtectedRouteTemplate() {
+	return `export function GET() {
+  return Response.json({
+    ok: true,
+    message: "Valid Unkey API key.",
+  });
+}
+`;
+}
+function pascalCase(input) {
+	return input.split(/[^A-Za-z0-9]+/g).filter(Boolean).map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`).join("");
+}
+function kebabCase(input) {
+	return input.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^A-Za-z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+function hasPackageDependency$1(manifest, dependency) {
+	return dependency in (manifest.dependencies || {}) || dependency in (manifest.devDependencies || {}) || dependency in (manifest.peerDependencies || {}) || dependency in (manifest.optionalDependencies || {});
+}
+function readObject(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function pushResultPath(list, filePath) {
+	if (!list.includes(filePath)) list.push(filePath);
+}
+//#endregion
+//#region ../farm-cli/src/add-integration.ts
+const PROVIDERS = [
+	{
+		provider: "ai",
+		aliases: [
+			"ai-sdk",
+			"vercel-ai",
+			"vercel-ai-sdk",
+			"chat"
+		],
+		defaultKey: "chat",
+		packageName: "@farm.js/ai",
+		fileName: "chat",
+		exportName: "POST",
+		description: "Vercel AI SDK chat route",
+		env: ["AI_GATEWAY_API_KEY"],
+		notes: [
+			"Use @ai-sdk/react useChat with api: \"/api/chat\" on the client.",
+			"Replace model with any AI SDK provider model or Vercel AI Gateway model id.",
+			"No farm.config integration wiring is required for this route."
+		],
+		ui: aiChatUIFeature(),
+		template: () => `import { aiChatRoute } from "@farm.js/ai";
+
+export const POST = aiChatRoute({
+  model: "openai/gpt-4o-mini",
+  system: "You are a helpful assistant.",
+});
+`
+	},
+	{
+		provider: "stripe",
+		aliases: [
+			"billing-stripe",
+			"payments",
+			"stripe-billing"
+		],
+		defaultKey: "billing",
+		packageName: "@farm.js/stripe",
+		fileName: "stripe",
+		exportName: "stripeIntegration",
+		description: "Stripe billing and checkout routes",
+		env: ["STRIPE_SECRET_KEY", "STRIPE_WEBHOOK_SECRET"],
+		template: () => `import type { FarmIntegrationLogEvent } from "@farm.js/core";
+import { stripe } from "@farm.js/stripe";
+
+export const stripeIntegration = stripe({
+  secretKey: process.env.STRIPE_SECRET_KEY,
+  webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
+  products: [],
+  log(event: FarmIntegrationLogEvent) {
+    console.log("[stripe]", event.phase, event.route?.path || "none");
+  },
+});
+`,
+		ui: stripeBillingUIFeature()
+	},
+	{
+		provider: "supabase",
+		aliases: ["auth-supabase", "supabase-auth"],
+		defaultKey: "auth",
+		packageName: "@farm.js/supabase",
+		fileName: "supabase",
+		exportName: "supabaseIntegration",
+		description: "Supabase auth routes and middleware",
+		env: [
+			"SUPABASE_URL",
+			"SUPABASE_ANON_KEY",
+			"APP_BASE_URL"
+		],
+		ui: supabaseAuthUIFeature(),
+		template: () => `import { supabase } from "@farm.js/supabase";
+
+export const supabaseIntegration = supabase({
+  callbackUrl: \`\${process.env.APP_BASE_URL || "http://localhost:3000"}/auth/callback\`,
+  protectedRoutes: ["/dashboard(.*)"],
+  pages: {
+    signIn: "/sign-in",
+    signUp: "/sign-up",
+  },
+  log(event) {
+    console.log("[supabase]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "workos",
+		aliases: ["auth-workos", "workos-auth"],
+		defaultKey: "auth",
+		packageName: "@farm.js/workos",
+		fileName: "workos",
+		exportName: "workosIntegration",
+		description: "WorkOS auth routes and protected route middleware",
+		env: [
+			"WORKOS_CLIENT_ID",
+			"WORKOS_API_KEY",
+			"WORKOS_COOKIE_PASSWORD"
+		],
+		ui: workosAuthUIFeature(),
+		template: () => `import { workos } from "@farm.js/workos";
+
+export const workosIntegration = workos({
+  protectedRoutes: ["/dashboard(.*)"],
+  log(event) {
+    console.log("[workos]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "auth0",
+		aliases: ["auth-auth0", "auth0-auth"],
+		defaultKey: "auth",
+		packageName: "@farm.js/auth0",
+		fileName: "auth0",
+		exportName: "auth0Integration",
+		description: "Auth0 login, callback, logout, and profile routes",
+		env: [
+			"AUTH0_DOMAIN",
+			"AUTH0_CLIENT_ID",
+			"AUTH0_CLIENT_SECRET",
+			"AUTH0_SECRET"
+		],
+		ui: auth0AuthUIFeature(),
+		template: () => `import { auth0 } from "@farm.js/auth0";
+
+export const auth0Integration = auth0({
+  callbackUrl: \`\${process.env.APP_BASE_URL || "http://localhost:3000"}/auth/callback\`,
+  protectedRoutes: ["/dashboard(.*)"],
+  log(event) {
+    console.log("[auth0]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "clerk",
+		aliases: ["auth-clerk", "clerk-auth"],
+		defaultKey: "auth",
+		packageName: "@farm.js/clerk",
+		fileName: "clerk",
+		exportName: "clerkIntegration",
+		description: "Clerk auth provider and protected route middleware",
+		env: ["NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY", "CLERK_SECRET_KEY"],
+		dependencies: { "@clerk/react": "^6.1.0" },
+		ui: clerkAuthUIFeature(),
+		template: () => `import { clerk } from "@farm.js/clerk";
+
+export const clerkIntegration = clerk({
+  signInUrl: "/sign-in",
+  signUpUrl: "/sign-up",
+  protectedRoutes: ["/dashboard(.*)"],
+  log(event) {
+    console.log("[clerk]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "resend",
+		aliases: ["email", "resend-email"],
+		defaultKey: "email",
+		packageName: "@farm.js/email",
+		fileName: "resend",
+		exportName: "resendIntegration",
+		description: "Resend email send, preview, schedule, and webhook routes",
+		env: [
+			"RESEND_API_KEY",
+			"RESEND_FROM_EMAIL",
+			"RESEND_WEBHOOK_SECRET"
+		],
+		ui: resendEmailUIFeature(),
+		template: () => `import { createElement } from "react";
+import { resend, template } from "@farm.js/email";
+
+function WelcomeEmail(props: { name: string }) {
+  return createElement("div", null, \`Welcome \${props.name}\`);
+}
+
+WelcomeEmail.PreviewProps = {
+  name: "Ada",
+};
+
+export const emailTemplates = {
+  welcome: template(WelcomeEmail, {
+    subject: ({ name }) => \`Welcome, \${name}\`,
+    previewText: () => "Welcome to the app",
+  }),
+} as const;
+
+export const resendIntegration = resend({
+  apiKey: process.env.RESEND_API_KEY,
+  defaults: {
+    from: process.env.RESEND_FROM_EMAIL,
+    replyTo: process.env.RESEND_REPLY_TO_EMAIL ?? process.env.RESEND_FROM_EMAIL,
+  },
+  templates: emailTemplates,
+  webhooks: process.env.RESEND_WEBHOOK_SECRET
+    ? {
+        secret: process.env.RESEND_WEBHOOK_SECRET,
+      }
+    : undefined,
+  log(event) {
+    console.log("[resend]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "jobs-inngest",
+		aliases: ["inngest", "jobs"],
+		defaultKey: "jobs",
+		packageName: "@farm.js/jobs",
+		fileName: "jobs-inngest",
+		exportName: "jobsIntegration",
+		description: "Jobs integration backed by Inngest",
+		env: [
+			"INNGEST_APP_ID",
+			"INNGEST_EVENT_KEY",
+			"INNGEST_SIGNING_KEY"
+		],
+		notes: ["Add tasks to jobTasks before using the generated jobs API."],
+		ui: jobsUIFeature("inngest"),
+		template: () => `import { defineTasks, inngest, jobs } from "@farm.js/jobs";
+
+export const jobTasks = defineTasks({});
+
+export const jobsIntegration = jobs({
+  runtime: inngest({
+    appId: process.env.INNGEST_APP_ID,
+    eventKey: process.env.INNGEST_EVENT_KEY,
+    signingKey: process.env.INNGEST_SIGNING_KEY,
+  }),
+  tasks: jobTasks,
+  log(event) {
+    console.log("[jobs:inngest]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "jobs-trigger",
+		aliases: [
+			"trigger",
+			"trigger-dev",
+			"jobs-triggerdev"
+		],
+		defaultKey: "jobs",
+		packageName: "@farm.js/jobs",
+		fileName: "jobs-trigger",
+		exportName: "jobsIntegration",
+		description: "Jobs integration backed by Trigger.dev",
+		env: [
+			"TRIGGER_PROJECT_REF",
+			"TRIGGER_SECRET_KEY",
+			"TRIGGER_WEBHOOK_SECRET"
+		],
+		notes: ["Add tasks to jobTasks before using the generated jobs API."],
+		ui: jobsUIFeature("trigger"),
+		template: () => `import { defineTasks, jobs, trigger } from "@farm.js/jobs";
+
+export const jobTasks = defineTasks({});
+
+export const jobsIntegration = jobs({
+  runtime: trigger({
+    projectRef: process.env.TRIGGER_PROJECT_REF,
+    apiKey: process.env.TRIGGER_SECRET_KEY,
+    webhookSecret: process.env.TRIGGER_WEBHOOK_SECRET,
+  }),
+  tasks: jobTasks,
+  log(event) {
+    console.log("[jobs:trigger]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "polar",
+		aliases: ["polar-billing", "billing-polar"],
+		defaultKey: "billing",
+		packageName: "@farm.js/polar",
+		fileName: "polar",
+		exportName: "polarIntegration",
+		description: "Polar billing and checkout routes",
+		env: [
+			"POLAR_ACCESS_TOKEN",
+			"POLAR_WEBHOOK_SECRET",
+			"APP_BASE_URL"
+		],
+		notes: ["Replace resolveBillingOwner with your app user or organization lookup."],
+		ui: polarBillingUIFeature(),
+		template: () => `import type { FarmIntegrationHandlerContext } from "@farm.js/core";
+import { polar } from "@farm.js/polar";
+
+function resolveBillingOwner(_context: FarmIntegrationHandlerContext): never {
+  throw new Error("Configure Polar billing owner resolution for your app.");
+}
+
+export const polarIntegration = polar({
+  accessToken: process.env.POLAR_ACCESS_TOKEN,
+  server: (process.env.POLAR_SERVER as "sandbox" | "production" | undefined) ?? "sandbox",
+  appBaseUrl: process.env.APP_BASE_URL,
+  webhooks: process.env.POLAR_WEBHOOK_SECRET
+    ? {
+        secret: process.env.POLAR_WEBHOOK_SECRET,
+      }
+    : undefined,
+  billing: {
+    resolveOwner: resolveBillingOwner,
+    plans: {},
+    products: {},
+  },
+  log(event) {
+    console.log("[polar]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "autumn",
+		aliases: ["autumn-billing", "billing-autumn"],
+		defaultKey: "billing",
+		packageName: "@farm.js/autumn",
+		fileName: "autumn",
+		exportName: "autumnIntegration",
+		description: "Autumn billing and checkout routes",
+		env: [
+			"AUTUMN_SECRET_KEY",
+			"AUTUMN_WEBHOOK_SECRET",
+			"APP_BASE_URL"
+		],
+		notes: ["Replace resolveBillingOwner with your app user or organization lookup."],
+		ui: autumnBillingUIFeature(),
+		template: () => `import type { FarmIntegrationHandlerContext } from "@farm.js/core";
+import { autumn } from "@farm.js/autumn";
+
+function resolveBillingOwner(_context: FarmIntegrationHandlerContext): never {
+  throw new Error("Configure Autumn billing owner resolution for your app.");
+}
+
+export const autumnIntegration = autumn({
+  secretKey: process.env.AUTUMN_SECRET_KEY,
+  appBaseUrl: process.env.APP_BASE_URL,
+  webhooks: process.env.AUTUMN_WEBHOOK_SECRET
+    ? {
+        secret: process.env.AUTUMN_WEBHOOK_SECRET,
+      }
+    : undefined,
+  billing: {
+    resolveOwner: resolveBillingOwner,
+    plans: {},
+    products: {},
+  },
+  log(event) {
+    console.log("[autumn]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "better-auth",
+		aliases: ["betterauth", "auth-better-auth"],
+		defaultKey: "auth",
+		packageName: "@farm.js/better-auth",
+		fileName: "better-auth",
+		exportName: "betterAuthIntegration",
+		description: "Better Auth route adapter",
+		env: [
+			"BETTER_AUTH_SECRET",
+			"BETTER_AUTH_URL",
+			"BETTER_AUTH_DATABASE_PATH"
+		],
+		dependencies: {
+			"better-auth": "^1.5.5",
+			"better-sqlite3": "^12.6.2"
+		},
+		devDependencies: { "@types/better-sqlite3": "^7.6.13" },
+		notes: ["The generated SQLite database is intended for local development. Configure a persistent production database before deploying.", "Set BETTER_AUTH_SECRET to a high-entropy value of at least 32 characters."],
+		setupFiles: [
+			{
+				path: "src/lib/auth.ts",
+				source: () => `import Database from "better-sqlite3";
+import { betterAuth as createBetterAuth } from "better-auth";
+import { getMigrations } from "better-auth/db/migration";
+
+const baseURL = process.env.BETTER_AUTH_URL || "http://localhost:3000";
+export const auth = createBetterAuth({
+  database: new Database(process.env.BETTER_AUTH_DATABASE_PATH || "better-auth.sqlite"),
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL,
+  trustedOrigins: [baseURL],
+  emailAndPassword: {
+    enabled: true,
+  },
+});
+
+const migrations = await getMigrations(auth.options);
+await migrations.runMigrations();
+`
+			},
+			{
+				path: ".env.example",
+				merge: "lines",
+				source: () => `BETTER_AUTH_SECRET=replace-with-at-least-32-random-characters
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_DATABASE_PATH=better-auth.sqlite
+`
+			},
+			{
+				path: ".gitignore",
+				merge: "lines",
+				source: () => `better-auth.sqlite
+better-auth.sqlite-shm
+better-auth.sqlite-wal
+`
+			}
+		],
+		ui: betterAuthUIFeature(),
+		template: () => `import { betterAuth } from "@farm.js/better-auth";
+import { auth } from "../auth.ts";
+
+export const betterAuthIntegration = betterAuth({
+  instance: auth,
+  log(event) {
+    console.log("[better-auth]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "authjs",
+		aliases: [
+			"auth-js",
+			"nextauth",
+			"next-auth"
+		],
+		defaultKey: "auth",
+		packageName: "@farm.js/authjs",
+		fileName: "authjs",
+		exportName: "authjsIntegration",
+		description: "Auth.js route adapter",
+		env: [
+			"AUTH_SECRET",
+			"AUTH_GITHUB_ID",
+			"AUTH_GITHUB_SECRET"
+		],
+		dependencies: { "@auth/core": "0.34.3" },
+		setupFiles: [{
+			path: "src/lib/auth.ts",
+			source: () => `import { Auth } from "@auth/core";
+import GitHub from "@auth/core/providers/github";
+
+const config = {
+  providers: [
+    GitHub({
+      clientId: process.env.AUTH_GITHUB_ID!,
+      clientSecret: process.env.AUTH_GITHUB_SECRET!,
+    }),
+  ],
+  secret: process.env.AUTH_SECRET,
+  trustHost: true,
+};
+
+const handler = (request: Request) => Auth(request, config);
+
+export const auth = {
+  handlers: {
+    GET: handler,
+    POST: handler,
+  },
+};
+`
+		}],
+		notes: ["The generated Auth.js instance uses GitHub OAuth through @auth/core; add or replace providers in src/lib/auth.ts."],
+		ui: authjsUIFeature(),
+		template: () => `import { authjs } from "@farm.js/authjs";
+import { auth } from "../auth.ts";
+
+export const authjsIntegration = authjs({
+  instance: auth,
+  log(event) {
+    console.log("[authjs]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	},
+	{
+		provider: "unkey",
+		aliases: [
+			"api-keys",
+			"apikeys",
+			"keys",
+			"unkey-api-keys"
+		],
+		defaultKey: "apiKeys",
+		packageName: "@farm.js/unkey",
+		fileName: "unkey",
+		exportName: "unkeyIntegration",
+		description: "Unkey API key creation, verification, and route protection",
+		env: [
+			"UNKEY_ROOT_KEY",
+			"UNKEY_API_ID",
+			"UNKEY_BASE_URL"
+		],
+		ui: unkeyApiKeysUIFeature(),
+		template: () => `import { unkey } from "@farm.js/unkey";
+
+export const unkeyIntegration = unkey({
+  rootKey: process.env.UNKEY_ROOT_KEY,
+  apiId: process.env.UNKEY_API_ID,
+  baseUrl: process.env.UNKEY_BASE_URL,
+  protectedRoutes: ["/api/protected(.*)"],
+  log(event) {
+    console.log("[unkey]", event.phase, event.route?.path || "none");
+  },
+});
+`
+	}
+];
+async function addFarmIntegration(options) {
+	const root = path$1.resolve(options.root || process.cwd());
+	const definition = resolveProvider(options.provider);
+	if (definition.provider === "ai") return addAIRouteIntegration({
+		root,
+		definition,
+		routeFile: options.routeFile,
+		ui: options.ui,
+		skipPackageJson: options.skipPackageJson,
+		dryRun: options.dryRun,
+		force: options.force
+	});
+	const key = options.key || definition.defaultKey;
+	assertValidIntegrationKey(key);
+	const registryFile = path$1.resolve(root, options.integrationsFile || path$1.join("src", "lib", "integrations.ts"));
+	const integrationFile = path$1.join(path$1.dirname(registryFile), "integrations", `${definition.fileName}.ts`);
+	const result = {
+		provider: definition.provider,
+		key,
+		mode: "integration",
+		integrationFile,
+		registryFile,
+		created: [],
+		updated: [],
+		skipped: [],
+		env: [...definition.env],
+		notes: [...definition.notes || []]
+	};
+	await writeIntegrationComponent({
+		path: integrationFile,
+		definition,
+		force: options.force,
+		dryRun: options.dryRun,
+		result
+	});
+	await writeIntegrationSetupFiles({
+		root,
+		definition,
+		force: options.force,
+		dryRun: options.dryRun,
+		result
+	});
+	await writeIntegrationRegistry({
+		path: registryFile,
+		integrationFile,
+		definition,
+		key,
+		dryRun: options.dryRun,
+		result
+	});
+	if (!options.skipPackageJson) await updatePackageJson$1({
+		root,
+		definition,
+		dryRun: options.dryRun,
+		result
+	});
+	if (!options.skipConfig) await updateFarmConfig({
+		root,
+		registryFile,
+		dryRun: options.dryRun,
+		result
+	});
+	if (options.ui) await installUIFeature({
+		root,
+		definition,
+		key,
+		dryRun: options.dryRun,
+		force: options.force,
+		skipPackageJson: options.skipPackageJson,
+		result
+	});
+	return result;
+}
+async function addAIRouteIntegration(input) {
+	const routeFile = path$1.resolve(input.root, input.routeFile || path$1.join("src", "app", "api", "chat", "route.ts"));
+	const result = {
+		provider: "ai",
+		key: input.definition.defaultKey,
+		mode: "route",
+		integrationFile: routeFile,
+		registryFile: "",
+		routeFile,
+		routePath: "/api/chat",
+		created: [],
+		updated: [],
+		skipped: [],
+		env: [...input.definition.env],
+		notes: [...input.definition.notes || []]
+	};
+	await writeIntegrationComponent({
+		path: routeFile,
+		definition: input.definition,
+		force: input.force,
+		dryRun: input.dryRun,
+		result
+	});
+	if (!input.skipPackageJson) await updatePackageJson$1({
+		root: input.root,
+		definition: input.definition,
+		dryRun: input.dryRun,
+		result
+	});
+	if (input.ui) await installUIFeature({
+		root: input.root,
+		definition: input.definition,
+		key: input.definition.defaultKey,
+		dryRun: input.dryRun,
+		force: input.force,
+		skipPackageJson: input.skipPackageJson,
+		result
+	});
+	return result;
+}
+function resolveProvider(input) {
+	const normalized = input.trim().toLowerCase();
+	const match = PROVIDERS.find((provider) => provider.provider === normalized || provider.aliases.includes(normalized));
+	if (!match) {
+		const supported = PROVIDERS.map((provider) => provider.provider).join(", ");
+		throw new Error(`Unknown integration "${input}". Supported integrations: ${supported}.`);
+	}
+	return match;
+}
+function assertValidIntegrationKey(key) {
+	if (!/^[A-Za-z_$][\w$]*$/.test(key)) throw new Error(`Integration key "${key}" must be a valid JavaScript object property name.`);
+}
+async function writeIntegrationComponent(input) {
+	const exists = existsSync(input.path);
+	if (exists && !input.force) {
+		input.result.skipped.push(input.path);
+		return;
+	}
+	if (!input.dryRun) {
+		await mkdir(path$1.dirname(input.path), { recursive: true });
+		await writeFile(input.path, input.definition.template(), "utf8");
+	}
+	if (exists) input.result.updated.push(input.path);
+	else input.result.created.push(input.path);
+}
+async function writeIntegrationRegistry(input) {
+	const importPath = toImportPath(path$1.relative(path$1.dirname(input.path), input.integrationFile));
+	const importLine = `import { ${input.definition.exportName} } from "${importPath}";`;
+	const propertyLine = `  ${input.key}: ${input.definition.exportName},`;
+	let nextSource;
+	const exists = existsSync(input.path);
+	if (exists) nextSource = ensureRegistryEntry(await readFile(input.path, "utf8"), {
+		importLine,
+		propertyLine,
+		key: input.key,
+		exportName: input.definition.exportName
+	});
+	else nextSource = `${importLine}
+
+export const appIntegrations = {
+${propertyLine}
+} as const;
+
+export type AppIntegrations = typeof appIntegrations;
+`;
+	if (!input.dryRun) {
+		await mkdir(path$1.dirname(input.path), { recursive: true });
+		await writeFile(input.path, nextSource, "utf8");
+	}
+	input.result[exists ? "updated" : "created"].push(input.path);
+}
+function ensureRegistryEntry(source, input) {
+	if (new RegExp(`(^|\\n)\\s*${escapeRegExp(input.key)}\\s*:`, "m").test(source)) {
+		if (source.includes(`${input.key}: ${input.exportName}`)) return source.includes(input.importLine) ? source : `${input.importLine}\n${source}`;
+		throw new Error(`Integration key "${input.key}" already exists in the app integrations registry. Pass --key to use a different key.`);
+	}
+	const sourceWithImport = source.includes(input.importLine) ? source : `${input.importLine}\n${source}`;
+	const appIntegrationsPattern = /export\s+const\s+appIntegrations\s*=\s*\{([\s\S]*?)\}\s*as\s+const;/m;
+	const match = sourceWithImport.match(appIntegrationsPattern);
+	if (!match) return `${sourceWithImport.trimEnd()}
+
+export const appIntegrations = {
+${input.propertyLine}
+} as const;
+
+export type AppIntegrations = typeof appIntegrations;
+`;
+	const body = match[1] || "";
+	const nextBody = body.trim().length ? `${body.trimEnd()}\n${input.propertyLine}\n` : `\n${input.propertyLine}\n`;
+	return sourceWithImport.replace(appIntegrationsPattern, () => {
+		return `export const appIntegrations = {${nextBody}} as const;`;
+	});
+}
+async function writeIntegrationSetupFiles(input) {
+	for (const file of input.definition.setupFiles || []) {
+		const absolutePath = path$1.join(input.root, file.path);
+		const exists = existsSync(absolutePath);
+		if (exists && !input.force) {
+			if (file.merge === "lines") {
+				const source = await readFile(absolutePath, "utf8");
+				const additions = file.source().split(/\r?\n/).filter((line) => line && !source.split(/\r?\n/).includes(line));
+				if (!additions.length) {
+					input.result.skipped.push(absolutePath);
+					continue;
+				}
+				if (!input.dryRun) await writeFile(absolutePath, `${source.trimEnd()}\n${additions.join("\n")}\n`, "utf8");
+				input.result.updated.push(absolutePath);
+				continue;
+			}
+			input.result.skipped.push(absolutePath);
+			continue;
+		}
+		if (!input.dryRun) {
+			await mkdir(path$1.dirname(absolutePath), { recursive: true });
+			await writeFile(absolutePath, file.source(), "utf8");
+		}
+		input.result[exists ? "updated" : "created"].push(absolutePath);
+	}
+}
+async function updatePackageJson$1(input) {
+	const packageJsonPath = path$1.join(input.root, "package.json");
+	if (!existsSync(packageJsonPath)) {
+		input.result.skipped.push(packageJsonPath);
+		return;
+	}
+	const source = await readFile(packageJsonPath, "utf8");
+	const manifest = JSON.parse(source);
+	const dependencies = missingDependencies(manifest, input.definition.dependencies);
+	const devDependencies = missingDependencies(manifest, input.definition.devDependencies);
+	manifest.dependencies = {
+		...manifest.dependencies,
+		...hasPackageDependency(manifest, input.definition.packageName) ? {} : { [input.definition.packageName]: getFarmIntegrationVersion(manifest) },
+		...dependencies
+	};
+	if (Object.keys(devDependencies).length) manifest.devDependencies = {
+		...manifest.devDependencies,
+		...devDependencies
+	};
+	const nextSource = `${JSON.stringify(manifest, null, 2)}\n`;
+	if (source === nextSource) {
+		input.result.packageJson = packageJsonPath;
+		input.result.skipped.push(packageJsonPath);
+		return;
+	}
+	if (!input.dryRun) await writeFile(packageJsonPath, nextSource, "utf8");
+	input.result.packageJson = packageJsonPath;
+	input.result.updated.push(packageJsonPath);
+}
+function missingDependencies(manifest, dependencies) {
+	return Object.fromEntries(Object.entries(dependencies || {}).filter(([name]) => !hasPackageDependency(manifest, name)));
+}
+async function updateFarmConfig(input) {
+	const configFile = findFarmConfig(input.root);
+	if (!configFile) {
+		const newConfigFile = path$1.join(input.root, "farm.config.ts");
+		const source = `import { defineConfig } from "@farm.js/core";
+import { appIntegrations } from "${toImportPath(path$1.relative(input.root, input.registryFile))}";
+
+export default defineConfig({
+  integrations: appIntegrations,
+});
+`;
+		if (!input.dryRun) await writeFile(newConfigFile, source, "utf8");
+		input.result.configFile = newConfigFile;
+		input.result.created.push(newConfigFile);
+		return;
+	}
+	input.result.configFile = configFile;
+	const source = await readFile(configFile, "utf8");
+	if (/\bintegrations\s*:/.test(source)) {
+		input.result.skipped.push(configFile);
+		input.result.notes.push(`farm.config already has an integrations field. Confirm it includes appIntegrations from ${path$1.relative(input.root, input.registryFile)}.`);
+		return;
+	}
+	const importLine = `import { appIntegrations } from "${toImportPath(path$1.relative(path$1.dirname(configFile), input.registryFile))}";`;
+	const sourceWithImport = source.includes(importLine) ? source : `${importLine}\n${source}`;
+	const nextSource = insertIntegrationsConfig(sourceWithImport);
+	if (nextSource === sourceWithImport) {
+		input.result.skipped.push(configFile);
+		input.result.notes.push(`Could not safely update ${path$1.relative(input.root, configFile)}. Add integrations: appIntegrations manually.`);
+		return;
+	}
+	if (!input.dryRun) await writeFile(configFile, nextSource, "utf8");
+	input.result.updated.push(configFile);
+}
+function insertIntegrationsConfig(source) {
+	const defineConfigCall = /\bdefine(?:Farm)?Config\s*\(\s*\{/;
+	if (defineConfigCall.test(source)) return source.replace(defineConfigCall, (match) => {
+		return `${match}\n  integrations: appIntegrations,`;
+	});
+	if (/export\s+default\s+\{/.test(source)) return source.replace(/export\s+default\s+\{/, (match) => {
+		return `${match}\n  integrations: appIntegrations,`;
+	});
+	return source;
+}
+function findFarmConfig(root) {
+	for (const candidate of [
+		"farm.config.ts",
+		"farm.config.mts",
+		"farm.config.js",
+		"farm.config.mjs",
+		"config.ts",
+		"config.mts",
+		"config.js",
+		"config.mjs"
+	]) {
+		const absolutePath = path$1.join(root, candidate);
+		if (existsSync(absolutePath)) return absolutePath;
+	}
+	return null;
+}
+function hasPackageDependency(manifest, dependency) {
+	return dependency in (manifest.dependencies || {}) || dependency in (manifest.devDependencies || {}) || dependency in (manifest.peerDependencies || {}) || dependency in (manifest.optionalDependencies || {});
+}
+function getFarmIntegrationVersion(manifest) {
+	const farmCoreVersion = manifest.dependencies?.["@farm.js/core"] ?? manifest.devDependencies?.["@farm.js/core"] ?? manifest.peerDependencies?.["@farm.js/core"] ?? manifest.optionalDependencies?.["@farm.js/core"];
+	if (!farmCoreVersion) return "latest";
+	return farmCoreVersion.startsWith("workspace:") ? "workspace:*" : farmCoreVersion;
+}
+function toImportPath(relativePath) {
+	const normalized = relativePath.split(path$1.sep).join("/");
+	return (normalized.startsWith(".") ? normalized : `./${normalized}`).replace(/\.tsx?$/, ".ts");
+}
+function escapeRegExp(input) {
+	return input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+//#endregion
 //#region src/index.ts
+const templateDetails = {
+	basic: {
+		title: "Basic starter",
+		description: "A minimal Farm.js app with built-in Tailwind support",
+		instructions: ["Tailwind is enabled by default. You only need postcss config for custom plugins."]
+	},
+	auth: {
+		title: "Auth starter",
+		description: "Farm.js-native auth with local SQLite, secure sessions, and protected routes",
+		instructions: ["FARMJS Auth uses local SQLite automatically; no auth environment variables are needed locally.", "For production, set FARM_AUTH_URL, FARM_AUTH_SECRET, and DATABASE_URL, then run the auth:migrate script."]
+	},
+	"better-auth": {
+		title: "Better Auth starter",
+		description: "Better Auth with Postgres, secure sessions, and protected routes",
+		instructions: ["Before starting, copy .env.example to .env.local and set DATABASE_URL and BETTER_AUTH_SECRET.", "Better Auth migrations run automatically when the auth instance starts."]
+	},
+	ai: integrationTemplate({
+		title: "AI starter",
+		description: "AI SDK chat route with a ready-to-use chat interface",
+		provider: "ai",
+		label: "AI",
+		route: "/integrations/ai",
+		docsPath: "/docs/integrations"
+	}),
+	auth0: integrationTemplate({
+		title: "Auth0 starter",
+		description: "Auth0 login, sessions, protected routes, and account controls",
+		provider: "auth0",
+		label: "Auth0",
+		route: "/integrations/auth0",
+		docsPath: "/docs/integrations/auth/auth0"
+	}),
+	authjs: integrationTemplate({
+		title: "Auth.js starter",
+		description: "Auth.js with GitHub OAuth and Farm-owned route mounting",
+		provider: "authjs",
+		label: "Auth.js",
+		route: "/integrations/authjs",
+		docsPath: "/docs/integrations/auth/authjs"
+	}),
+	autumn: integrationTemplate({
+		title: "Autumn starter",
+		description: "Autumn products, checkout, billing state, and customer portal",
+		provider: "autumn",
+		label: "Autumn",
+		route: "/integrations/autumn",
+		docsPath: "/docs/integrations/autumn"
+	}),
+	clerk: integrationTemplate({
+		title: "Clerk starter",
+		description: "Clerk authentication, account entry points, and protected routes",
+		provider: "clerk",
+		label: "Clerk",
+		route: "/integrations/clerk",
+		docsPath: "/docs/integrations/auth/clerk"
+	}),
+	"jobs-inngest": integrationTemplate({
+		title: "Inngest starter",
+		description: "Typed background jobs backed by Inngest",
+		provider: "jobs-inngest",
+		label: "Inngest",
+		route: "/integrations/jobs-inngest",
+		docsPath: "/docs/integrations/inngest"
+	}),
+	"jobs-trigger": integrationTemplate({
+		title: "Trigger.dev starter",
+		description: "Typed background jobs backed by Trigger.dev",
+		provider: "jobs-trigger",
+		label: "Trigger.dev",
+		route: "/integrations/jobs-trigger",
+		docsPath: "/docs/integrations/trigger"
+	}),
+	polar: integrationTemplate({
+		title: "Polar starter",
+		description: "Polar products, checkout, billing state, and customer portal",
+		provider: "polar",
+		label: "Polar",
+		route: "/integrations/polar",
+		docsPath: "/docs/integrations/polar"
+	}),
+	resend: integrationTemplate({
+		title: "Resend starter",
+		description: "Resend templates, delivery, scheduling, and webhooks",
+		provider: "resend",
+		label: "Resend",
+		route: "/integrations/resend",
+		docsPath: "/docs/integrations/email"
+	}),
+	stripe: integrationTemplate({
+		title: "Stripe starter",
+		description: "Stripe products, checkout, billing portal, and webhooks",
+		provider: "stripe",
+		label: "Stripe",
+		route: "/integrations/stripe",
+		docsPath: "/docs/integrations/stripe"
+	}),
+	supabase: integrationTemplate({
+		title: "Supabase starter",
+		description: "Supabase authentication, sessions, OAuth, and protected routes",
+		provider: "supabase",
+		label: "Supabase",
+		route: "/integrations/supabase",
+		docsPath: "/docs/integrations/auth/supabase"
+	}),
+	unkey: integrationTemplate({
+		title: "Unkey starter",
+		description: "Unkey API key creation, verification, and route protection",
+		provider: "unkey",
+		label: "Unkey",
+		route: "/integrations/unkey",
+		docsPath: "/docs/integrations/unkey"
+	}),
+	workos: integrationTemplate({
+		title: "WorkOS starter",
+		description: "WorkOS AuthKit, organization sessions, and protected routes",
+		provider: "workos",
+		label: "WorkOS",
+		route: "/integrations/workos",
+		docsPath: "/docs/integrations/auth/workos"
+	})
+};
+function integrationTemplate(input) {
+	return {
+		title: input.title,
+		description: input.description,
+		instructions: [],
+		integration: {
+			provider: input.provider,
+			label: input.label,
+			route: input.route,
+			docsPath: input.docsPath
+		}
+	};
+}
 async function createApp(projectName, options = {}) {
 	showBanner();
 	const templates = await getAvailableTemplates();
@@ -10,6 +2662,14 @@ async function createApp(projectName, options = {}) {
 		logger.error("No templates are available in this package.");
 		process.exit(1);
 	}
+	if (options.listTemplates) {
+		logger.info("Available templates");
+		for (const template of templates) {
+			const details = templateDetails[template];
+			logger.info(`  ${template.padEnd(14)} ${details?.description ?? ""}`.trimEnd());
+		}
+		return;
+	}
 	if (!projectName) {
 		const response = await prompts({
 			type: "text",
@@ -36,11 +2696,14 @@ async function createApp(projectName, options = {}) {
 			type: "select",
 			name: "template",
 			message: "Which template would you like to use?",
-			choices: templates.map((name) => ({
-				title: prettifyTemplateName(name),
-				value: name,
-				description: name === "basic" ? "A simple Farm.js app with built-in Tailwind support" : void 0
-			})),
+			choices: templates.map((name) => {
+				const details = templateDetails[name];
+				return {
+					title: details?.title ?? prettifyTemplateName(name),
+					value: name,
+					description: details?.description
+				};
+			}),
 			initial: 0
 		});
 		if (!response.template) {
@@ -52,6 +2715,56 @@ async function createApp(projectName, options = {}) {
 		logger.error(`Unknown template "${template}". Available: ${templates.map((t) => `"${t}"`).join(", ")}`);
 		process.exit(1);
 	}
+	let renderer = options.renderer?.toLowerCase();
+	if (renderer && renderer !== "react" && renderer !== "preact" && renderer !== "solid" && renderer !== "vue" && renderer !== "svelte") {
+		logger.error(`Unknown renderer "${options.renderer}". Available: "react", "preact", "solid", "vue", "svelte".`);
+		process.exit(1);
+	}
+	if (!renderer && !options.template && (template === "basic" || template === "better-auth")) {
+		const response = await prompts({
+			type: "select",
+			name: "renderer",
+			message: "Which rendering library would you like to use?",
+			choices: [
+				{
+					title: "React",
+					value: "react",
+					description: "The default FARMJS renderer"
+				},
+				{
+					title: "Preact",
+					value: "preact",
+					description: "Small React-compatible runtime with SSR and hydration"
+				},
+				{
+					title: "Solid",
+					value: "solid",
+					description: "Fine-grained reactivity with Solid"
+				},
+				{
+					title: "Vue",
+					value: "vue",
+					description: "Vue SFCs with server rendering and hydration"
+				},
+				{
+					title: "Svelte",
+					value: "svelte",
+					description: "Svelte components with server rendering and hydration"
+				}
+			],
+			initial: 0
+		});
+		if (!response.renderer) {
+			logger.error("Operation cancelled.");
+			process.exit(1);
+		}
+		renderer = response.renderer;
+	}
+	renderer ||= "react";
+	if (renderer !== "react" && template !== "basic" && !await hasRendererIntegrationTemplate(template, renderer)) {
+		logger.error(`The "${template}" integration starter currently targets React. Use --template basic or --template better-auth with --renderer ${renderer}.`);
+		process.exit(1);
+	}
 	let useTypeScript = options.typescript;
 	if (useTypeScript === void 0) {
 		const response = await prompts({
@@ -67,6 +2780,7 @@ async function createApp(projectName, options = {}) {
 		useTypeScript = response.typescript;
 	}
 	const projectPath = path.resolve(process.cwd(), projectName);
+	const packageManager = detectPackageManager();
 	if (await directoryHasFiles(projectPath)) {
 		if (!(await prompts({
 			type: "confirm",
@@ -78,32 +2792,210 @@ async function createApp(projectName, options = {}) {
 			process.exit(1);
 		}
 	}
-	logger.info(`Creating Farm.js app in ${projectPath}`);
+	logger.info(`Creating FARMJS app in ${projectPath}`);
 	await fs.mkdir(projectPath, { recursive: true });
-	await copyTemplate(template, projectPath, useTypeScript);
-	await updatePackageJson(projectPath, projectName);
+	const integrationResult = await copyTemplate(template, projectPath, useTypeScript, renderer);
+	await updatePackageJson(projectPath, projectName, packageManager);
 	logger.success(`🚜 Created ${projectName}`);
+	if (!options.skipInstall) {
+		logger.info(`Installing dependencies with ${packageManager.name}...`);
+		await installDependencies(projectPath, packageManager);
+		logger.success("Dependencies installed");
+	}
 	logger.info("");
 	logger.info("Next steps");
 	logger.info(`  cd ${projectName}`);
-	logger.info("  pnpm install");
-	logger.info("  pnpm dev");
+	if (options.skipInstall) logger.info(`  ${packageManager.name} install`);
+	logger.info(`  ${getDevCommand(packageManager.name)}`);
 	logger.info("");
-	logger.info("Tailwind is enabled by default. You only need postcss config for custom plugins.");
+	for (const instruction of templateDetails[template]?.instructions ?? []) logger.info(instruction);
+	if (integrationResult) {
+		const details = templateDetails[template].integration;
+		logger.info(`Open ${details.route} for the ${details.label} starter.`);
+		if (integrationResult.env.length) logger.info("Copy .env.example to .env.local and add your provider credentials.");
+		for (const note of integrationResult.notes) logger.info(note);
+	}
 }
-async function copyTemplate(template, projectPath, useTypeScript) {
-	await copyDir(path.join(__dirname, "..", "templates", template), projectPath);
+async function copyTemplate(template, projectPath, useTypeScript, renderer) {
+	const details = templateDetails[template];
+	await copyDir(path.join(__dirname, "..", "templates", details?.integration ? "basic" : template), projectPath);
+	const basePackageJson = await readPackageJson(projectPath);
 	if (useTypeScript) {
 		const tsTemplatePath = path.join(__dirname, "..", "templates", "_typescript");
 		if (await dirExists(tsTemplatePath)) await copyDir(tsTemplatePath, projectPath);
 	}
+	if (renderer !== "react") {
+		await applyRendererTemplate(projectPath, renderer, basePackageJson);
+		const integrationRendererPath = getRendererIntegrationTemplatePath(template, renderer);
+		if (await dirExists(integrationRendererPath)) {
+			await removeRendererIntegrationConflicts(projectPath);
+			await copyDir(integrationRendererPath, projectPath);
+		}
+	}
+	if (!details?.integration) return;
+	const result = await addFarmIntegration({
+		root: projectPath,
+		provider: details.integration.provider,
+		ui: true
+	});
+	await writeEnvironmentExample(projectPath, result.env);
+	await writeIntegrationHomePage(projectPath, details.integration, result.env.length > 0);
+	await writeIntegrationReadme(projectPath, details.integration, result.env);
+	return result;
+}
+async function applyRendererTemplate(projectPath, renderer, basePackageJson) {
+	const rendererTemplatePath = path.join(__dirname, "..", "templates", "_renderers", renderer);
+	if (renderer === "vue" || renderer === "svelte") await Promise.all([
+		fs.rm(path.join(projectPath, "src", "app", "page.tsx"), { force: true }),
+		fs.rm(path.join(projectPath, "src", "app", "layout.tsx"), { force: true }),
+		fs.rm(path.join(projectPath, "src", "components", "resource-links.tsx"), { force: true })
+	]);
+	await copyDir(rendererTemplatePath, projectPath);
+	await writePackageJson(projectPath, mergeRendererPackageJson(basePackageJson, await readPackageJson(projectPath)));
+}
+function mergeRendererPackageJson(base, renderer) {
+	const dependencies = {
+		...base.dependencies,
+		...renderer.dependencies
+	};
+	const devDependencies = {
+		...base.devDependencies,
+		...renderer.devDependencies
+	};
+	for (const name of ["react", "react-dom"]) delete dependencies[name];
+	for (const name of ["@types/react", "@types/react-dom"]) delete devDependencies[name];
+	return {
+		...base,
+		...renderer.type ? { type: renderer.type } : {},
+		scripts: {
+			...base.scripts,
+			...renderer.scripts
+		},
+		dependencies,
+		devDependencies
+	};
+}
+async function readPackageJson(projectPath) {
+	return JSON.parse(await fs.readFile(path.join(projectPath, "package.json"), "utf8"));
+}
+async function writePackageJson(projectPath, packageJson) {
+	await fs.writeFile(path.join(projectPath, "package.json"), `${JSON.stringify(packageJson, null, 2)}\n`, "utf8");
+}
+function getRendererIntegrationTemplatePath(template, renderer) {
+	return path.join(__dirname, "..", "templates", "_integrations", template, renderer);
+}
+async function hasRendererIntegrationTemplate(template, renderer) {
+	return dirExists(getRendererIntegrationTemplatePath(template, renderer));
+}
+async function removeRendererIntegrationConflicts(projectPath) {
+	const appFiles = [
+		"page.tsx",
+		"layout.tsx",
+		"loading.tsx",
+		"error.tsx",
+		"not-found.tsx",
+		"sign-in/page.tsx",
+		"sign-up/page.tsx",
+		"dashboard/page.tsx",
+		"preact.css",
+		"solid.css",
+		"vue.css",
+		"svelte.css",
+		"api/greeting/route.ts"
+	];
+	const componentFiles = [
+		"auth-form.tsx",
+		"auth-shell.tsx",
+		"sign-out-button.tsx",
+		"site-header.tsx"
+	];
+	await Promise.all([
+		...appFiles.map((file) => fs.rm(path.join(projectPath, "src", "app", file), { force: true })),
+		...componentFiles.map((file) => fs.rm(path.join(projectPath, "src", "components", file), { force: true })),
+		fs.rm(path.join(projectPath, "src", "lib", "api-client.ts"), { force: true }),
+		fs.rm(path.join(projectPath, "src", "lib", "api.generated.ts"), { force: true })
+	]);
+}
+async function writeEnvironmentExample(projectPath, keys) {
+	if (keys.length === 0) return;
+	const envPath = path.join(projectPath, ".env.example");
+	let current = "";
+	try {
+		current = await fs.readFile(envPath, "utf8");
+	} catch {}
+	const existingKeys = new Set(current.split(/\r?\n/).map((line) => line.match(/^([A-Z][A-Z0-9_]*)=/)?.[1]).filter((key) => Boolean(key)));
+	const additions = keys.filter((key) => !existingKeys.has(key)).map((key) => `${key}=${environmentExampleValue(key)}`);
+	if (additions.length > 0) await fs.writeFile(envPath, `${current.trimEnd()}${current.trim() ? "\n" : ""}${additions.join("\n")}\n`, "utf8");
+}
+function environmentExampleValue(key) {
+	if (key === "APP_BASE_URL") return "http://localhost:3000";
+	if (key === "AUTH_SECRET") return "replace-with-at-least-32-random-characters";
+	if (key === "UNKEY_BASE_URL") return "https://api.unkey.com";
+	return "";
+}
+async function writeIntegrationHomePage(projectPath, integration, hasEnvironment) {
+	const commandRows = [...hasEnvironment ? ["cp .env.example .env.local"] : [], "pnpm dev"].map((command, index) => `            <div className="command-row">
+              <span>${String(index + 1).padStart(2, "0")}</span>
+              <code>${command}</code>
+            </div>`).join("\n");
+	const source = `import { ResourceLinks } from "../components/resource-links";
+
+export default function HomePage() {
+  return (
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / ${integration.label} starter</span>
+          </div>
+
+          <h1>
+            Start at <code>${integration.route}</code>.
+          </h1>
+
+          <div className="command-list" aria-label="Getting started commands">
+${commandRows}
+          </div>
+
+          <ResourceLinks
+            className="resource-links"
+            primary={{ href: "${integration.route}", label: "Get started" }}
+          />
+        </div>
+      </section>
+    </main>
+  );
+}
+`;
+	await fs.writeFile(path.join(projectPath, "src", "app", "page.tsx"), source, "utf8");
+}
+async function writeIntegrationReadme(projectPath, integration, env) {
+	const environmentSetup = env.length ? `cp .env.example .env.local\n# Add values for: ${env.join(", ")}\n` : "";
+	const wiring = integration.provider === "ai" ? "The AI route lives in `src/app/api/chat/route.ts` and its local UI lives under `src/components/farm`." : "The provider wiring lives in `src/lib/integrations` and is registered from `farm.config.ts`.";
+	const source = `# FARMJS ${integration.label} Starter
+
+## Getting started
+
+\`\`\`bash
+pnpm install
+${environmentSetup}pnpm dev
+\`\`\`
+
+Open [${integration.route}](http://localhost:3000${integration.route}) for the integration UI.
+
+${wiring}
+See the [${integration.label} integration guide](https://farm.js.dev${integration.docsPath}) for provider setup and production guidance.
+`;
+	await fs.writeFile(path.join(projectPath, "README.md"), source, "utf8");
 }
 async function copyDir(src, dest) {
 	await fs.mkdir(dest, { recursive: true });
 	const entries = await fs.readdir(src, { withFileTypes: true });
 	for (const entry of entries) {
 		const srcPath = path.join(src, entry.name);
-		const destPath = path.join(dest, entry.name);
+		const destinationName = entry.name === "gitignore" ? ".gitignore" : entry.name;
+		const destPath = path.join(dest, destinationName);
 		if (entry.isDirectory()) await copyDir(srcPath, destPath);
 		else await fs.copyFile(srcPath, destPath);
 	}
@@ -139,20 +3031,61 @@ function prettifyTemplateName(name) {
 }
 async function getAvailableTemplates() {
 	const templatesRoot = path.join(__dirname, "..", "templates");
-	return (await fs.readdir(templatesRoot, { withFileTypes: true })).filter((entry) => entry.isDirectory() && !entry.name.startsWith("_")).map((entry) => entry.name).sort();
+	const entries = await fs.readdir(templatesRoot, { withFileTypes: true });
+	const templateOrder = Object.keys(templateDetails);
+	const directoryTemplates = entries.filter((entry) => entry.isDirectory() && !entry.name.startsWith("_")).map((entry) => entry.name);
+	const generatedTemplates = Object.entries(templateDetails).filter(([, details]) => Boolean(details.integration)).map(([name]) => name);
+	return [.../* @__PURE__ */ new Set([...directoryTemplates, ...generatedTemplates])].sort((left, right) => {
+		const leftIndex = templateOrder.indexOf(left);
+		const rightIndex = templateOrder.indexOf(right);
+		return (leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex) - (rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex) || left.localeCompare(right);
+	});
 }
-async function updatePackageJson(projectPath, projectName) {
+async function updatePackageJson(projectPath, projectName, packageManager) {
 	const packageJsonPath = path.join(projectPath, "package.json");
 	try {
 		const content = await fs.readFile(packageJsonPath, "utf-8");
 		const packageJson = JSON.parse(content);
 		packageJson.name = projectName;
+		if (packageManager.version) packageJson.packageManager = `${packageManager.name}@${packageManager.version}`;
 		await fs.writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
-	} catch (error) {
+	} catch {
 		logger.warn("Could not update package.json");
 	}
 }
+function detectPackageManager(userAgent = process.env.npm_config_user_agent) {
+	const match = userAgent?.match(/^(npm|pnpm|yarn|bun)\/([^\s]+)/);
+	if (!match) return { name: "pnpm" };
+	const [, name, version] = match;
+	return {
+		name,
+		version: version === "?" ? void 0 : version
+	};
+}
+function installDependencies(projectPath, packageManager) {
+	return new Promise((resolve, reject) => {
+		const command = process.platform === "win32" ? `${packageManager.name}.cmd` : packageManager.name;
+		const child = spawn(command, ["install"], {
+			cwd: projectPath,
+			env: process.env,
+			stdio: "inherit"
+		});
+		child.on("error", reject);
+		child.on("close", (code, signal) => {
+			if (code === 0) {
+				resolve();
+				return;
+			}
+			const reason = signal ? `signal ${signal}` : `exit code ${code ?? "unknown"}`;
+			reject(/* @__PURE__ */ new Error(`${packageManager.name} install failed with ${reason}.`));
+		});
+	});
+}
+function getDevCommand(packageManager) {
+	if (packageManager === "npm" || packageManager === "bun") return `${packageManager} run dev`;
+	return `${packageManager} dev`;
+}
 //#endregion
-export { createApp };
+export { createApp, detectPackageManager, installDependencies };
 
 //# sourceMappingURL=index.mjs.map