@getjack/jack 0.1.32 → 0.1.33

package/src/templates/index.ts

@@ -14,11 +14,15 @@ export const BUILTIN_TEMPLATES = [
 	"hello",
 	"miniapp",
 	"api",
+	"cron",
+	"resend",
 	"nextjs",
 	"saas",
-	"simple-api-starter",
 	"ai-chat",
 	"semantic-search",
+	"nextjs-shadcn",
+	"nextjs-clerk",
+	"nextjs-auth",
 ];
 
 /**
@@ -211,64 +215,32 @@ function extractMetadataFromZip(zipData: ArrayBuffer): Record<string, unknown> {
 }
 
 /**
- * Fetch a published template from jack cloud (public endpoint, no auth)
+ * Fetch a remote template (own project or published).
+ * Both paths require auth.
  */
-async function fetchPublishedTemplate(username: string, slug: string): Promise<Template> {
-	const response = await fetch(
-		`${getControlApiUrl()}/v1/projects/${encodeURIComponent(username)}/${encodeURIComponent(slug)}/source`,
-	);
-
-	if (!response.ok) {
-		if (response.status === 404) {
-			throw new Error(
-				`Template not found: ${username}/${slug}\n\nMake sure the project exists and is published with: jack publish`,
-			);
-		}
-		throw new Error(`Failed to fetch template: ${response.status}`);
-	}
-
-	const zipData = await response.arrayBuffer();
-	const metadata = extractMetadataFromZip(zipData);
-	const files = extractZipToFiles(zipData);
-
-	return {
-		description: (metadata.description as string) || `Fork of ${username}/${slug}`,
-		secrets: (metadata.secrets as string[]) || [],
-		optionalSecrets: metadata.optionalSecrets as Template["optionalSecrets"],
-		envVars: metadata.envVars as Template["envVars"],
-		capabilities: metadata.capabilities as Template["capabilities"],
-		requires: metadata.requires as Template["requires"],
-		hooks: metadata.hooks as Template["hooks"],
-		agentContext: metadata.agentContext as Template["agentContext"],
-		intent: metadata.intent as Template["intent"],
-		files,
-	};
-}
-
-/**
- * Fetch user's own project as a template (authenticated)
- */
-async function fetchUserTemplate(slug: string): Promise<Template | null> {
+async function fetchRemoteTemplate(identifier: string): Promise<Template | null> {
 	const { authFetch } = await import("../lib/auth/index.ts");
 
-	const response = await authFetch(
-		`${getControlApiUrl()}/v1/me/projects/${encodeURIComponent(slug)}/source`,
-	);
-
-	if (response.status === 404) {
-		return null; // Not found, will try other sources
+	// Route to the correct endpoint based on format
+	let url: string;
+	if (identifier.includes("/")) {
+		const [owner, slug] = identifier.split("/", 2) as [string, string];
+		url = `${getControlApiUrl()}/v1/projects/${encodeURIComponent(owner)}/${encodeURIComponent(slug)}/source`;
+	} else {
+		url = `${getControlApiUrl()}/v1/me/projects/${encodeURIComponent(identifier)}/source`;
 	}
 
-	if (!response.ok) {
-		throw new Error(`Failed to fetch your project: ${response.status}`);
-	}
+	const response = await authFetch(url);
+
+	if (response.status === 404) return null;
+	if (!response.ok) throw new Error(`Failed to fetch template: ${response.status}`);
 
 	const zipData = await response.arrayBuffer();
 	const metadata = extractMetadataFromZip(zipData);
 	const files = extractZipToFiles(zipData);
 
 	return {
-		description: (metadata.description as string) || `Your project: ${slug}`,
+		description: (metadata.description as string) || `Fork of ${identifier}`,
 		secrets: (metadata.secrets as string[]) || [],
 		optionalSecrets: metadata.optionalSecrets as Template["optionalSecrets"],
 		envVars: metadata.envVars as Template["envVars"],
@@ -285,33 +257,13 @@ async function fetchUserTemplate(slug: string): Promise<Template | null> {
  * Resolve template by name
  */
 export async function resolveTemplate(template?: string): Promise<Template> {
-	// No template → hello (omakase default)
-	if (!template) {
-		return loadTemplate("hello");
-	}
+	if (!template) return loadTemplate("hello");
+	if (BUILTIN_TEMPLATES.includes(template)) return loadTemplate(template);
 
-	// Built-in template
-	if (BUILTIN_TEMPLATES.includes(template)) {
-		return loadTemplate(template);
-	}
-
-	// username/slug format - fetch from jack cloud
-	if (template.includes("/")) {
-		const [username, slug] = template.split("/", 2) as [string, string];
-		return fetchPublishedTemplate(username, slug);
-	}
-
-	// Try as user's own project first
-	try {
-		const userTemplate = await fetchUserTemplate(template);
-		if (userTemplate) {
-			return userTemplate;
-		}
-	} catch (_err) {
-		// If auth fails or project not found, fall through to error
-	}
+	// Remote: "username/slug" or "my-own-project"
+	const result = await fetchRemoteTemplate(template);
+	if (result) return result;
 
-	// Unknown template
 	throw new Error(
 		`Unknown template: ${template}\n\nAvailable built-in templates: ${BUILTIN_TEMPLATES.join(", ")}\nOr use username/slug format for published projects`,
 	);

package/templates/CLAUDE.md

@@ -568,6 +568,47 @@ if (!baseUrl) {
 
 The Host header approach is reliable because Cloudflare always sets it to the actual domain being accessed.
 
+## OpenNext (Next.js on Cloudflare) Gotchas
+
+Templates using Next.js via `@opennextjs/cloudflare` have platform-specific limitations. These apply to all Next.js templates (`nextjs-auth`, `nextjs-shadcn`, `nextjs-clerk`, etc.).
+
+### Client-side navigation after auth state changes: use window.location, not router.push
+
+OpenNext's webpack runtime has an empty chunk URL resolver (`r.u=e=>{}`). This means `router.push()` to a page whose chunks aren't already loaded fails with `ChunkLoadError: Loading chunk X failed`.
+
+**Rule:** After any auth state change (sign-in, sign-up, sign-out), always use `window.location.href` for a full page reload. This ensures middleware, server components, and cookies re-evaluate with the new session.
+
+```tsx
+// BAD — ChunkLoadError on OpenNext
+await authClient.signOut();
+router.push("/");
+router.refresh();
+
+// GOOD — full reload, clean auth state
+await authClient.signOut();
+window.location.href = "/";
+```
+
+`<Link>` components work fine for normal navigation because Next.js prefetches their chunks via `<script>` tags in the HTML.
+
+### Pages using getCloudflareContext() need `export const dynamic = 'force-dynamic'`
+
+Without this, Next.js tries to statically prerender the page at build time, which fails because `getCloudflareContext()` is only available at runtime in the Workers environment.
+
+```tsx
+import { getAuth } from "@/lib/auth";
+export const dynamic = "force-dynamic";
+
+export default async function DashboardPage() {
+  const auth = await getAuth(); // calls getCloudflareContext() internally
+  // ...
+}
+```
+
+### Edge middleware cannot use Node.js APIs
+
+Next.js middleware runs in the edge runtime. Don't call `auth.api.getSession()` (requires `perf_hooks`) — use cookie-only checks instead.
+
 ## Adding New Templates
 
 1. Create directory: `templates/my-template/`

package/templates/ai-chat/.jack.json

@@ -1,11 +1,16 @@
 {
 	"name": "ai-chat",
-	"description": "AI chat with streaming UI (free Cloudflare AI)",
+	"description": "AI chat with streaming, persistence, and multi-model support",
 	"secrets": [],
-	"capabilities": ["ai"],
+	"capabilities": ["ai", "db"],
+	"requires": ["DB"],
 	"intent": {
-		"keywords": ["ai", "chat", "llm", "llama", "completion", "chatbot"],
-		"examples": ["AI chatbot", "chat interface", "LLM chat app"]
+		"keywords": ["ai", "chat", "llm", "llama", "completion", "chatbot", "streaming"],
+		"examples": ["AI chatbot", "chat interface", "LLM chat app", "persistent chat"]
+	},
+	"agentContext": {
+		"summary": "An AI chat app with streaming UI, D1 chat persistence, and multi-model support via AI SDK.",
+		"full_text": "## Project Structure\n\n- `src/index.ts` - Hono API with chat endpoints and AI SDK integration\n- `src/jack-ai.ts` - Jack AI proxy wrapper (do not modify)\n- `public/index.html` - React app shell\n- `public/app.js` - Chat UI with useChat hook from AI SDK\n- `schema.sql` - D1 schema for chat and message persistence\n\n## AI Integration\n\nUses AI SDK with `workers-ai-provider` routed through Jack's metered AI proxy.\n\n### Changing Models\n\nEdit the model string in `src/index.ts`:\n```typescript\nmodel: provider('@cf/meta/llama-3.3-70b-instruct-fp8-fast')\n```\n\nAvailable models: https://developers.cloudflare.com/workers-ai/models/\n\n## Chat Persistence\n\nChats and messages are stored in D1:\n- `chats` table: chat metadata (id, created_at)\n- `messages` table: individual messages (role, content, chat_id)\n\nMessages persist across page refreshes. Each browser session creates a new chat.\n\n## API Endpoints\n\n- `POST /api/chat` - Send message and get streaming AI response\n- `GET /api/chat/:id` - Load chat history\n- `POST /api/chat/new` - Create a new chat\n\n## Resources\n\n- [AI SDK Docs](https://sdk.vercel.ai/docs)\n- [Workers AI Models](https://developers.cloudflare.com/workers-ai/models)"
 	},
 	"hooks": {
 		"postDeploy": [
@@ -17,7 +22,7 @@
 			{
 				"action": "box",
 				"title": "{{name}}",
-				"lines": ["{{url}}", "", "jack open  to view in browser"]
+				"lines": ["{{url}}", "", "Chat history saved to D1.", "jack open  to start chatting"]
 			}
 		]
 	}

package/templates/ai-chat/bun.lock

@@ -4,6 +4,11 @@
   "workspaces": {
     "": {
       "name": "jack-template",
+      "dependencies": {
+        "ai": "^4",
+        "hono": "^4.6.0",
+        "workers-ai-provider": "^0.7",
+      },
       "devDependencies": {
         "@cloudflare/workers-types": "^4.20241205.0",
         "typescript": "^5.0.0",
@@ -11,8 +16,52 @@
     },
   },
   "packages": {
-    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260120.0", "", {}, "sha512-B8pueG+a5S+mdK3z8oKu1ShcxloZ7qWb68IEyLLaepvdryIbNC7JVPcY0bWsjS56UQVKc5fnyRge3yZIwc9bxw=="],
+    "@ai-sdk/provider": ["@ai-sdk/provider@1.1.3", "", { "dependencies": { "json-schema": "^0.4.0" } }, "sha512-qZMxYJ0qqX/RfnuIaab+zp8UAeJn/ygXXAffR5I4N0n1IrvA6qBsjc8hXLmBiMV2zoXlifkacF7sEFnYnjBcqg=="],
+
+    "@ai-sdk/provider-utils": ["@ai-sdk/provider-utils@2.2.8", "", { "dependencies": { "@ai-sdk/provider": "1.1.3", "nanoid": "^3.3.8", "secure-json-parse": "^2.7.0" }, "peerDependencies": { "zod": "^3.23.8" } }, "sha512-fqhG+4sCVv8x7nFzYnFo19ryhAa3w096Kmc3hWxMQfW/TubPOmt3A6tYZhl4mUfQWWQMsuSkLrtjlWuXBVSGQA=="],
+
+    "@ai-sdk/react": ["@ai-sdk/react@1.2.12", "", { "dependencies": { "@ai-sdk/provider-utils": "2.2.8", "@ai-sdk/ui-utils": "1.2.11", "swr": "^2.2.5", "throttleit": "2.1.0" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "zod": "^3.23.8" }, "optionalPeers": ["zod"] }, "sha512-jK1IZZ22evPZoQW3vlkZ7wvjYGYF+tRBKXtrcolduIkQ/m/sOAVcVeVDUDvh1T91xCnWCdUGCPZg2avZ90mv3g=="],
+
+    "@ai-sdk/ui-utils": ["@ai-sdk/ui-utils@1.2.11", "", { "dependencies": { "@ai-sdk/provider": "1.1.3", "@ai-sdk/provider-utils": "2.2.8", "zod-to-json-schema": "^3.24.1" }, "peerDependencies": { "zod": "^3.23.8" } }, "sha512-3zcwCc8ezzFlwp3ZD15wAPjf2Au4s3vAbKsXQVyhxODHcmu0iyPO2Eua6D/vicq/AUm/BAo60r97O6HU+EI0+w=="],
+
+    "@cloudflare/workers-types": ["@cloudflare/workers-types@4.20260212.0", "", {}, "sha512-ZK+e8T/2tWBCrE8PoAi9oqTxcBen9Apq+dxbsy1R5LFVdB6M4pY+oP49OFuHTTezrvNXbyvmzbf/vjtrCPGdNg=="],
+
+    "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="],
+
+    "@types/diff-match-patch": ["@types/diff-match-patch@1.0.36", "", {}, "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg=="],
+
+    "ai": ["ai@4.3.19", "", { "dependencies": { "@ai-sdk/provider": "1.1.3", "@ai-sdk/provider-utils": "2.2.8", "@ai-sdk/react": "1.2.12", "@ai-sdk/ui-utils": "1.2.11", "@opentelemetry/api": "1.9.0", "jsondiffpatch": "0.6.0" }, "peerDependencies": { "react": "^18 || ^19 || ^19.0.0-rc", "zod": "^3.23.8" }, "optionalPeers": ["react"] }, "sha512-dIE2bfNpqHN3r6IINp9znguYdhIOheKW2LDigAMrgt/upT3B8eBGPSCblENvaZGoq+hxaN9fSMzjWpbqloP+7Q=="],
+
+    "chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
+    "diff-match-patch": ["diff-match-patch@1.0.5", "", {}, "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="],
+
+    "hono": ["hono@4.11.9", "", {}, "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ=="],
+
+    "json-schema": ["json-schema@0.4.0", "", {}, "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="],
+
+    "jsondiffpatch": ["jsondiffpatch@0.6.0", "", { "dependencies": { "@types/diff-match-patch": "^1.0.36", "chalk": "^5.3.0", "diff-match-patch": "^1.0.5" }, "bin": { "jsondiffpatch": "bin/jsondiffpatch.js" } }, "sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+
+    "secure-json-parse": ["secure-json-parse@2.7.0", "", {}, "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw=="],
+
+    "swr": ["swr@2.4.0", "", { "dependencies": { "dequal": "^2.0.3", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-sUlC20T8EOt1pHmDiqueUWMmRRX03W7w5YxovWX7VR2KHEPCTMly85x05vpkP5i6Bu4h44ePSMD9Tc+G2MItFw=="],
+
+    "throttleit": ["throttleit@2.1.0", "", {}, "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
+    "workers-ai-provider": ["workers-ai-provider@0.7.5", "", { "dependencies": { "@ai-sdk/provider": "^1.1.3", "@ai-sdk/provider-utils": "^2.2.8" } }, "sha512-dhCwgc3D65oDDTpH3k8Gf0Ek7KItzvaQidn2N5L5cqLo3WG8GM/4+Nr4rU56o8O3oZRsloB1gUCHYaRv2j7Y0A=="],
+
+    "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
+
+    "zod-to-json-schema": ["zod-to-json-schema@3.25.1", "", { "peerDependencies": { "zod": "^3.25 || ^4" } }, "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA=="],
   }
 }

package/templates/ai-chat/package.json

@@ -7,6 +7,11 @@
 		"dev": "wrangler dev",
 		"deploy": "wrangler deploy"
 	},
+	"dependencies": {
+		"ai": "^4",
+		"hono": "^4.6.0",
+		"workers-ai-provider": "^0.7"
+	},
 	"devDependencies": {
 		"@cloudflare/workers-types": "^4.20241205.0",
 		"typescript": "^5.0.0"

package/templates/ai-chat/public/app.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { useChat } from "@ai-sdk/react";
+
+const { useState, useEffect, useRef } = React;
+
+function App() {
+  const [chatId, setChatId] = useState(null);
+  const messagesEndRef = useRef(null);
+
+  // Create a new chat on mount
+  useEffect(() => {
+    fetch("/api/chat/new", { method: "POST" })
+      .then((r) => r.json())
+      .then((data) => setChatId(data.id));
+  }, []);
+
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
+    api: "/api/chat",
+    body: { chatId },
+  });
+
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return React.createElement("div", { style: styles.container },
+    React.createElement("header", { style: styles.header },
+      React.createElement("h1", { style: styles.title }, "AI Chat"),
+    ),
+    React.createElement("div", { style: styles.messages },
+      messages.length === 0 && React.createElement("div", { style: styles.empty }, "Send a message to start chatting"),
+      messages.map((m) =>
+        React.createElement("div", { key: m.id, style: { ...styles.message, ...(m.role === "user" ? styles.userMessage : styles.assistantMessage) } },
+          React.createElement("div", { style: styles.messageRole }, m.role === "user" ? "You" : "AI"),
+          React.createElement("div", { style: styles.messageContent }, m.content || (m.parts?.map(p => p.text).join("") || "")),
+        )
+      ),
+      React.createElement("div", { ref: messagesEndRef }),
+    ),
+    React.createElement("form", { onSubmit: handleSubmit, style: styles.form },
+      React.createElement("input", {
+        value: input,
+        onChange: handleInputChange,
+        placeholder: "Type a message...",
+        style: styles.input,
+        disabled: isLoading,
+      }),
+      React.createElement("button", { type: "submit", style: styles.button, disabled: isLoading || !input.trim() },
+        isLoading ? "..." : "Send"
+      ),
+    ),
+  );
+}
+
+const styles = {
+  container: { display: "flex", flexDirection: "column", height: "100vh", maxWidth: "800px", margin: "0 auto" },
+  header: { padding: "16px 20px", borderBottom: "1px solid #262626" },
+  title: { fontSize: "18px", fontWeight: "600" },
+  messages: { flex: 1, overflow: "auto", padding: "20px", display: "flex", flexDirection: "column", gap: "16px" },
+  empty: { color: "#737373", textAlign: "center", marginTop: "40px" },
+  message: { padding: "12px 16px", borderRadius: "12px", maxWidth: "80%" },
+  userMessage: { alignSelf: "flex-end", background: "#2563eb", color: "white" },
+  assistantMessage: { alignSelf: "flex-start", background: "#1c1c1c", border: "1px solid #262626" },
+  messageRole: { fontSize: "11px", fontWeight: "600", marginBottom: "4px", opacity: 0.7, textTransform: "uppercase" },
+  messageContent: { fontSize: "14px", lineHeight: "1.5", whiteSpace: "pre-wrap" },
+  form: { padding: "16px 20px", borderTop: "1px solid #262626", display: "flex", gap: "8px" },
+  input: { flex: 1, padding: "10px 14px", borderRadius: "8px", border: "1px solid #333", background: "#1c1c1c", color: "#e5e5e5", fontSize: "14px", outline: "none" },
+  button: { padding: "10px 20px", borderRadius: "8px", border: "none", background: "#2563eb", color: "white", fontSize: "14px", fontWeight: "500", cursor: "pointer" },
+};
+
+createRoot(document.getElementById("root")).render(React.createElement(App));

package/templates/ai-chat/public/index.html

@@ -5,205 +5,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI Chat</title>
   <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      background: #f5f5f5;
-      min-height: 100vh;
-      display: flex;
-      justify-content: center;
-      padding: 1rem;
-    }
-
-    .chat-container {
-      width: 100%;
-      max-width: 700px;
-      display: flex;
-      flex-direction: column;
-      height: calc(100vh - 2rem);
-    }
-
-    header {
-      text-align: center;
-      padding: 1rem;
-    }
-
-    header h1 {
-      font-size: 1.5rem;
-      color: #333;
-      margin-bottom: 0.25rem;
-    }
-
-    header p {
-      font-size: 0.875rem;
-      color: #666;
-    }
-
-    .messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      background: white;
-      border-radius: 12px;
-      margin-bottom: 1rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .message {
-      padding: 0.75rem 1rem;
-      margin-bottom: 0.75rem;
-      border-radius: 12px;
-      max-width: 85%;
-      line-height: 1.5;
-      word-wrap: break-word;
-    }
-
-    .message.user {
-      background: #007bff;
-      color: white;
-      margin-left: auto;
-      border-bottom-right-radius: 4px;
-    }
-
-    .message.assistant {
-      background: #e9ecef;
-      color: #333;
-      margin-right: auto;
-      border-bottom-left-radius: 4px;
-    }
-
-    .message.error {
-      background: #fee;
-      color: #c00;
-      border: 1px solid #fcc;
-    }
-
-    .message.typing {
-      color: #666;
-      font-style: italic;
-    }
-
-    .input-area {
-      display: flex;
-      gap: 0.5rem;
-      background: white;
-      padding: 1rem;
-      border-radius: 12px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .input-area input {
-      flex: 1;
-      padding: 0.75rem 1rem;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      font-size: 1rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    .input-area input:focus {
-      border-color: #007bff;
-    }
-
-    .input-area input:disabled {
-      background: #f5f5f5;
-      cursor: not-allowed;
-    }
-
-    .input-area button {
-      padding: 0.75rem 1.5rem;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-size: 1rem;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    .input-area button:hover:not(:disabled) {
-      background: #0056b3;
-    }
-
-    .input-area button:disabled {
-      background: #ccc;
-      cursor: not-allowed;
-    }
-
-    .empty-state {
-      text-align: center;
-      color: #999;
-      padding: 3rem 1rem;
-    }
-
-    .empty-state p {
-      font-size: 1.1rem;
-      margin-bottom: 0.5rem;
-    }
-
-    .empty-state small {
-      font-size: 0.875rem;
-    }
-
-    @media (max-width: 480px) {
-      body {
-        padding: 0.5rem;
-      }
-
-      .chat-container {
-        height: calc(100vh - 1rem);
-      }
-
-      header h1 {
-        font-size: 1.25rem;
-      }
-
-      .message {
-        max-width: 90%;
-        padding: 0.625rem 0.875rem;
-      }
-
-      .input-area {
-        padding: 0.75rem;
-      }
-
-      .input-area button {
-        padding: 0.75rem 1rem;
-      }
-    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a0a; color: #e5e5e5; height: 100vh; }
+    #root { height: 100%; }
   </style>
 </head>
 <body>
-  <div class="chat-container">
-    <header>
-      <h1>AI Chat</h1>
-      <p>Powered by Cloudflare AI (Mistral 7B)</p>
-    </header>
-
-    <div id="messages" class="messages">
-      <div class="empty-state">
-        <p>Start a conversation</p>
-        <small>Type a message below to begin</small>
-      </div>
-    </div>
-
-    <div class="input-area">
-      <input
-        type="text"
-        id="input"
-        placeholder="Type your message..."
-        autocomplete="off"
-      />
-      <button id="send">Send</button>
-    </div>
-  </div>
-
-  <script src="/chat.js"></script>
+  <div id="root"></div>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@19",
+      "react-dom/client": "https://esm.sh/react-dom@19/client",
+      "@ai-sdk/react": "https://esm.sh/@ai-sdk/react@1?external=react"
+    }
+  }
+  </script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>

package/templates/ai-chat/schema.sql

@@ -0,0 +1,14 @@
+CREATE TABLE IF NOT EXISTS chats (
+  id TEXT PRIMARY KEY,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS messages (
+  id TEXT PRIMARY KEY,
+  chat_id TEXT NOT NULL REFERENCES chats(id) ON DELETE CASCADE,
+  role TEXT NOT NULL,
+  content TEXT NOT NULL,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE INDEX IF NOT EXISTS idx_messages_chat_id ON messages(chat_id);