@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/ai-chat/README.md

@@ -0,0 +1,99 @@
+# __APP_NAME__
+
+A streaming **AI chat** app built with [Pylon](https://pylonsync.com) — token
+streaming, multi-conversation history, and realtime cross-tab sync, all from one
+binary on one port. No Next.js, no separate API server.
+
+Tokens stream from the built-in `POST /api/ai/stream` endpoint, so your provider
+API key never reaches the browser. Conversations are sync-backed and
+owner-scoped — open two tabs and a chat you send in one shows up in the other.
+
+## Develop
+
+```bash
+__RUN_DEV__
+```
+
+Open http://localhost:4321. You can create chats right away; to get **replies**,
+point it at an LLM provider (see below). Then **open a second tab** — your
+conversations and messages stay in lockstep.
+
+## Configure the model
+
+The assistant replies only once you set a provider (the app boots fine without
+it and shows a friendly notice):
+
+```bash
+# .env
+PYLON_AI_PROVIDER=anthropic        # or "openai" / "custom"
+PYLON_AI_API_KEY=sk-ant-...
+PYLON_AI_MODEL=claude-sonnet-4-6   # default when none is picked
+```
+
+`/api/ai/stream` is auth-gated (it uses your signed-in session) and rate-limited
+per user, so a drive-by caller can't burn your budget.
+
+### Switching models / providers
+
+The composer has a **model picker** — its options live in `lib/site.config.ts`
+(`chat.models`, each with a provider label), and the chosen id is sent per
+request. Client-chosen models must be allow-listed server-side:
+
+```bash
+PYLON_AI_MODELS_ALLOWED=claude-sonnet-4-6,claude-opus-4-8,gpt-4o
+```
+
+`/api/ai/stream` talks to **one** provider. To offer models from **multiple
+providers** in one picker, route through an OpenAI-compatible gateway like
+[OpenRouter](https://openrouter.ai):
+
+```bash
+PYLON_AI_PROVIDER=custom
+PYLON_AI_BASE_URL=https://openrouter.ai/api/v1
+PYLON_AI_API_KEY=<openrouter key>
+```
+
+then set `chat.models` + `PYLON_AI_MODELS_ALLOWED` to the gateway's slugs
+(`anthropic/claude-sonnet-4`, `openai/gpt-4o`, `google/gemini-2.5-pro`, …).
+
+## How it works
+
+- **Streaming.** `app/chat-client.tsx` POSTs the conversation to
+  `/api/ai/stream` and reads the SSE response (`data: {choices:[{delta:…}]}` …
+  `data: [DONE]`), appending tokens to the live assistant bubble.
+- **Realtime history.** `Conversation` + `Message` are owner-scoped entities
+  read with `db.useQuery` — private to each user and synced across their tabs.
+  Messages are written with optimistic `db.insert` (userId is stamped from the
+  session via `field.owner()`), so no custom write functions are needed.
+- **Sign-in required.** Chats are tied to your account, so the home page
+  redirects unauthenticated visitors to `/login`. Once signed in, your history
+  follows you across tabs and devices.
+
+## Privacy
+
+`Conversation` and `Message` policies are owner-scoped (`auth.userId ==
+data.userId`) — you can only ever read or write your own. `User.passwordHash` is
+`serverOnly`. The provider key lives only on the server.
+
+## Rebrand it
+
+Everything brand-specific — name, colors, the assistant's system prompt, the
+empty-state copy, and starter prompts — lives in **`lib/site.config.ts`**.
+
+## Layout
+
+```
+app.ts                 Conversation + Message (owner-scoped) + User
+lib/site.config.ts     brand + system prompt + suggestions (edit this)
+app/page.tsx           renders the chat island
+app/chat-client.tsx    sidebar + thread + streaming via /api/ai/stream
+app/login/             optional sign-in (carries history across devices)
+```
+
+## Deploy
+
+```bash
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

package/templates/ai-chat/app/auth-form.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+  ApiError,
+} from "@pylonsync/client";
+
+// The email/password form — one form, two modes. It calls the built-in auth API
+// directly (`passwordLogin` / `passwordRegister` POST to `/api/auth/password/*`),
+// then `persistSession` writes the freshly-minted token to local storage so the
+// sync engine authenticates as the real account on the next load. We then do a
+// full navigation to "/" so the SSR runtime re-resolves auth from the HttpOnly
+// cookie and renders the chat.
+//
+// Sign-in is REQUIRED to use the chat: conversations are owner-scoped to your
+// account, so the home page redirects unauthenticated visitors here.
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      // Make this session authoritative, replacing any anonymous guest token.
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-4">
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@yourbusiness.com"
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        <label className="block">
+          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </label>
+        {error ? (
+          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+            {error}
+          </p>
+        ) : null}
+        <button
+          type="submit"
+          disabled={pending}
+          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+        >
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </button>
+      </form>
+
+      <p className="text-center text-[13px] text-zinc-500">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "register" : "login");
+            setError(null);
+          }}
+          className="font-medium text-zinc-900 underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// Map the framework's auth error codes to friendly copy. `ApiError` carries a
+// stable `.code` so you branch on the code, not the message.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known data breach. Choose a different one.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}