@fluxy-chat/create-fluxy-chat 0.2.0 → 0.4.0

package/dist/index.js

@@ -30,7 +30,7 @@ function isPackageManager(value) {
   return PACKAGE_MANAGERS.has(value);
 }
 function isAdapterType(value) {
-  return ["basic", "slack", "telegram", "discord", "web"].includes(value);
+  return ["basic", "slack", "telegram", "discord", "web", "react", "hr-feedback"].includes(value);
 }
 function detectPackageManagerFromLockfiles(cwd) {
   if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) {
@@ -79,6 +79,25 @@ function writeJson(projectDir, filePath, value) {
   writeFile(projectDir, filePath, `${JSON.stringify(value, null, 2)}
 `);
 }
+function copyDir(source, destination) {
+  fs.mkdirSync(destination, { recursive: true });
+  for (const entry of fs.readdirSync(source, { withFileTypes: true })) {
+    const srcPath = path.join(source, entry.name);
+    const destPath = path.join(destination, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+function templatesDir() {
+  return path.resolve(
+    path.dirname(new URL(import.meta.url).pathname.replace(/^\//, "")),
+    "..",
+    "templates"
+  );
+}
 
 // src/prompts.ts
 var DEFAULT_PROJECT_NAME = "my-fluxy-bot";
@@ -101,15 +120,19 @@ async function runPrompts(inputs) {
   if (nameError) {
     throw new Error(nameError);
   }
+  const minimal = inputs.minimal ?? false;
   let adapter = inputs.adapter;
-  if (!adapter) {
+  if (!minimal && !adapter) {
     if (inputs.yes) {
-      adapter = "basic";
+      adapter = "react";
     } else {
       const result = await select({
         message: "Select an adapter:",
         options: [
-          { label: "Basic (Cloudflare Workers)", value: "basic" },
+          { label: "Minimal chat widget (ui-kit, recommended)", value: "minimal" },
+          { label: "React chat app (Vite + useChat)", value: "react" },
+          { label: "HR anonymous feedback (compliance starter)", value: "hr-feedback" },
+          { label: "Basic (Cloudflare Workers bot)", value: "basic" },
           { label: "Slack", value: "slack" },
           { label: "Telegram", value: "telegram" },
           { label: "Discord", value: "discord" },
@@ -117,6 +140,9 @@ async function runPrompts(inputs) {
         ]
       });
       if (isCancel(result)) return null;
+      if (result === "minimal") {
+        return runPrompts({ ...inputs, minimal: true, adapter: "react" });
+      }
       adapter = result;
     }
   }
@@ -167,11 +193,12 @@ async function runPrompts(inputs) {
   if (isCancel(shouldInitGit)) return null;
   return {
     name,
-    adapter,
+    adapter: adapter ?? "react",
     packageManager,
     language,
     shouldInstall,
-    shouldInitGit
+    shouldInitGit,
+    minimal: minimal || inputs.minimal === true
   };
 }
 
@@ -775,6 +802,7 @@ var execAsync = promisify(exec);
 function parseArgs(argv) {
   const args = {
     yes: false,
+    minimal: false,
     skipInstall: false,
     noGit: false,
     help: false
@@ -786,16 +814,30 @@ function parseArgs(argv) {
       args.help = true;
     } else if (arg === "-y" || arg === "--yes") {
       args.yes = true;
+    } else if (arg === "--minimal") {
+      args.minimal = true;
     } else if (arg === "--skip-install") {
       args.skipInstall = true;
     } else if (arg === "--no-git") {
       args.noGit = true;
+    } else if (arg === "--template" || arg === "-t") {
+      const value = argv[++i];
+      if (value && isAdapterType(value)) {
+        args.adapter = value;
+      } else if (value === "react") {
+        args.adapter = "react";
+      } else if (value === "hr-feedback") {
+        args.adapter = "hr-feedback";
+      } else {
+        console.error(`Invalid template: ${value}. Choose: react, basic, slack, telegram, discord, web, hr-feedback`);
+        process.exit(1);
+      }
     } else if (arg === "--adapter" || arg === "-a") {
       const value = argv[++i];
       if (value && isAdapterType(value)) {
         args.adapter = value;
       } else {
-        console.error(`Invalid adapter: ${value}. Choose: basic, slack, telegram, discord, web`);
+        console.error(`Invalid adapter: ${value}. Choose: react, basic, slack, telegram, discord, web, hr-feedback`);
         process.exit(1);
       }
     } else if (arg === "--pm" || arg === "--package-manager") {
@@ -833,16 +875,21 @@ ${pc.bold("Usage:")}
   npx create-fluxy-chat [project-name] [options]
 
 ${pc.bold("Options:")}
-  -a, --adapter <type>       Adapter: basic, slack, telegram, discord, web
+  -a, --adapter <type>       Adapter: react, basic, slack, telegram, discord, web, hr-feedback
+  -t, --template <type>      Alias for --adapter (e.g. react, hr-feedback)
   --pm <manager>             Package manager: npm, pnpm, yarn
   -l, --language <lang>      Language: typescript (default) or javascript
   -y, --yes                  Skip prompts and accept defaults
+  --minimal                  Chat-only widget (ui-kit) \u2014 no platform modules
   --skip-install             Skip dependency installation
   --no-git                   Skip git repository initialization
   -h, --help                 Show this help
 
 ${pc.bold("Examples:")}
-  ${pc.cyan("npx create-fluxy-chat my-bot")}
+  ${pc.cyan("npx create-fluxy-chat my-chat --minimal")}
+  ${pc.cyan("npx create-fluxy-chat my-hr-bot --template hr-feedback")}
+  ${pc.cyan("npx create-fluxy-chat my-chat --template react")}
+  ${pc.cyan("npx create-fluxy-chat my-bot --adapter basic")}
   ${pc.cyan("npx create-fluxy-chat my-bot --adapter slack")}
   ${pc.cyan("npx create-fluxy-chat my-bot --adapter telegram --pm pnpm")}
   ${pc.cyan("npx create-fluxy-chat my-bot -y --adapter discord")}
@@ -860,6 +907,7 @@ async function main() {
     packageManager: args.pm,
     language: args.language,
     yes: args.yes,
+    minimal: args.minimal,
     shouldInstall: args.skipInstall ? false : void 0,
     shouldInitGit: args.noGit ? false : void 0
   });
@@ -882,19 +930,45 @@ async function main() {
   s.start("Creating project files");
   try {
     fs2.mkdirSync(projectDir, { recursive: true });
-    writeJson(projectDir, "package.json", generatePackageJson(config));
-    if (config.language === "typescript") {
-      writeJson(projectDir, "tsconfig.json", generateTsConfig());
+    if (config.minimal) {
+      const templateRoot = path2.join(templatesDir(), "minimal");
+      copyDir(templateRoot, projectDir);
+      const pkgPath = path2.join(projectDir, "package.json");
+      const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+      pkg.name = config.name;
+      writeJson(projectDir, "package.json", pkg);
+      s.stop("Minimal chat widget created.");
+    } else if (config.adapter === "react") {
+      const templateRoot = path2.join(templatesDir(), "react");
+      copyDir(templateRoot, projectDir);
+      const pkgPath = path2.join(projectDir, "package.json");
+      const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+      pkg.name = config.name;
+      writeJson(projectDir, "package.json", pkg);
+      s.stop("React chat app created.");
+    } else if (config.adapter === "hr-feedback") {
+      const templateRoot = path2.join(templatesDir(), "hr-feedback");
+      copyDir(templateRoot, projectDir);
+      const pkgPath = path2.join(projectDir, "package.json");
+      const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf8"));
+      pkg.name = config.name;
+      writeJson(projectDir, "package.json", pkg);
+      s.stop("HR feedback starter created.");
+    } else {
+      writeJson(projectDir, "package.json", generatePackageJson(config));
+      if (config.language === "typescript") {
+        writeJson(projectDir, "tsconfig.json", generateTsConfig());
+      }
+      writeFile(projectDir, "wrangler.toml", generateWranglerToml(config));
+      writeFile(projectDir, ".dev.vars", generateDevVars());
+      writeFile(projectDir, ".env.example", generateEnvExample(config));
+      writeFile(projectDir, ".gitignore", generateGitignore());
+      const ext = config.language === "typescript" ? "ts" : "js";
+      writeFile(projectDir, `src/index.${ext}`, generateWorkerIndex(config));
+      writeFile(projectDir, `src/bot.${ext}`, generateBotHandler(config));
+      writeFile(projectDir, "README.md", generateReadme(config));
+      s.stop("Project files created.");
     }
-    writeFile(projectDir, "wrangler.toml", generateWranglerToml(config));
-    writeFile(projectDir, ".dev.vars", generateDevVars());
-    writeFile(projectDir, ".env.example", generateEnvExample(config));
-    writeFile(projectDir, ".gitignore", generateGitignore());
-    const ext = config.language === "typescript" ? "ts" : "js";
-    writeFile(projectDir, `src/index.${ext}`, generateWorkerIndex(config));
-    writeFile(projectDir, `src/bot.${ext}`, generateBotHandler(config));
-    writeFile(projectDir, "README.md", generateReadme(config));
-    s.stop("Project files created.");
   } catch (error) {
     s.stop("Failed to create project files.");
     throw error;
@@ -928,7 +1002,12 @@ async function main() {
     }
   }
   note(
-    [
+    config.adapter === "react" ? [
+      `cd ${config.name}`,
+      "cp .env.example .env",
+      "# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_PUBLIC_ROOM_ID (guest) or MEMBER_JWT",
+      `${config.packageManager === "npm" ? "npm run" : config.packageManager} dev`
+    ].join("\n") : [
       `cd ${config.name}`,
       "cp .env.example .dev.vars",
       `${config.packageManager === "npm" ? "npm run" : config.packageManager} dev`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluxy-chat/create-fluxy-chat",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Scaffold a new FluxyChat bot project with a single command",
   "type": "module",
   "main": "./dist/index.js",
@@ -38,7 +38,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts",
+    "build": "tsup src/index.ts --format esm",
     "dev": "tsup src/index.ts --format esm --watch",
     "typecheck": "tsc --noEmit"
   }

package/readme.md

@@ -5,14 +5,21 @@ Scaffold a new [FluxyChat](https://github.com/AlessandroFare/fluxychat) bot proj
 ## Quick start
 
 ```bash
-npx create-fluxy-chat my-bot
+# Minimal chat widget (recommended: 3 lines in App.tsx)
+npx create-fluxy-chat my-chat --minimal
+
+# React + useChat (guest room ~60s or member JWT)
+npx create-fluxy-chat my-chat --template react
 ```
 
-This launches an interactive prompt to configure your bot project.
+Interactive mode defaults to the **React chat app** template.
 
 ## Non-interactive usage
 
 ```bash
+# React + Vite + useChat (recommended)
+npx create-fluxy-chat my-chat --template react -y
+
 # Create a Slack bot with pnpm
 npx create-fluxy-chat my-bot --adapter slack --pm pnpm
 
@@ -30,10 +37,12 @@ npx create-fluxy-chat my-bot --adapter basic
 
 | Flag | Short | Description |
 | --- | --- | --- |
-| `--adapter <type>` | `-a` | Adapter: `basic`, `slack`, `telegram`, `discord`, `web` |
+| `--adapter <type>` | `-a` | Adapter: `react`, `basic`, `slack`, `telegram`, `discord`, `web` |
+| `--template <type>` | `-t` | Alias for `--adapter (e.g. react)` |
 | `--pm <manager>` | | Package manager: `npm`, `pnpm`, `yarn` |
 | `--language <lang>` | `-l` | Language: `typescript` (default) or `javascript` |
 | `--yes` | `-y` | Skip prompts and accept defaults |
+| `--minimal` | | Chat-only widget (`@fluxy-chat/ui-kit`), no platform modules |
 | `--skip-install` | | Skip dependency installation |
 | `--no-git` | | Skip git repository initialization |
 | `--help` | `-h` | Show help |
@@ -42,6 +51,7 @@ npx create-fluxy-chat my-bot --adapter basic
 
 | Adapter | Description | Platform |
 | --- | --- | --- |
+| `react` | Vite + React chat UI with `useChat` | Browser / SPA |
 | `basic` | Generic webhook bot | Cloudflare Workers |
 | `slack` | Slack Events API bot | Slack |
 | `telegram` | Telegram webhook bot | Telegram |
@@ -52,14 +62,14 @@ npx create-fluxy-chat my-bot --adapter basic
 
 Each generated project includes:
 
-- **`src/index.ts`** — Cloudflare Workers entry point with route handling
-- **`src/bot.ts`** — Bot handler using `@fluxy-chat/sdk`
-- **`fluxy.config.ts`** — Room authz and publish middleware (basic template)
-- **`wrangler.toml`** — Cloudflare Workers deployment config
-- **`.dev.vars`** — Local development environment variables
-- **`.env.example`** — Example environment variables for your adapter
-- **`tsconfig.json`** — TypeScript configuration (for TS projects)
-- **`README.md`** — Project-specific setup instructions
+- **`src/index.ts`**: Cloudflare Workers entry point with route handling
+- **`src/bot.ts`**: Bot handler using `@fluxy-chat/sdk`
+- **`fluxy.config.ts`**: Room authz and publish middleware (basic template)
+- **`wrangler.toml`**: Cloudflare Workers deployment config
+- **`.dev.vars`**: Local development environment variables
+- **`.env.example`**: Example environment variables for your adapter
+- **`tsconfig.json`**: TypeScript configuration (for TS projects)
+- **`README.md`**: Project-specific setup instructions
 
 ## Package manager detection
 

package/templates/basic/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "latest"
+    "@fluxy-chat/sdk": "^0.6.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.0.0",

package/templates/discord/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "latest",
+    "@fluxy-chat/sdk": "^0.6.0",
     "discord.js": "^14.0.0"
   },
   "devDependencies": {

package/templates/hr-feedback/.env.example

@@ -0,0 +1,9 @@
+# FluxyChat worker URL + service API key (server-side only)
+FLUXY_BASE_URL=https://your-fluxychat-worker.example.com
+FLUXY_API_KEY=your-api-key-here
+
+# Optional dedicated room for aggregated summaries
+HR_FEEDBACK_ROOM_ID=hr-anonymous-feedback
+
+# Optional webhook for Path B HR escalation (de-identified payload only)
+HR_ESCALATION_WEBHOOK_URL=

package/templates/hr-feedback/README.md

@@ -0,0 +1,45 @@
+# HR Anonymous Feedback Starter
+
+Production starter for anonymous employee feedback with sensitive classification and privacy-safe audit.
+
+## Features
+
+- **Path A** — routine feedback → aggregated anonymous summary room
+- **Path B** — sensitive categories → HR escalation hook (category + confidence only, no identity)
+- Reuses FluxyChat `approvalChain` + room timeline audit when wired to agent tools
+- Classification runs on the worker via `POST /anonymous-feedback`
+
+## Quick start
+
+```bash
+cp .env.example .dev.vars
+# fill FLUXY_BASE_URL + FLUXY_API_KEY
+npm install
+npm run dev
+```
+
+Submit feedback:
+
+```bash
+curl -X POST http://localhost:8787/feedback \
+  -H "Content-Type: application/json" \
+  -d '{"content":"My manager makes hostile comments in meetings"}'
+```
+
+## Endpoints
+
+| Route | Description |
+| --- | --- |
+| `GET /` | Health check |
+| `POST /feedback` | Anonymous submission (no user id stored) |
+
+## Privacy
+
+- Raw message content is **not** persisted by this template
+- Worker audit stores **category + timestamp + path** only
+- Configure `HR_ESCALATION_WEBHOOK_URL` for your HRIS / ticketing integration
+
+## Learn more
+
+- [FluxyChat docs](https://github.com/AlessandroFare/fluxychat)
+- Worker route: `POST /anonymous-feedback` (JWT) for in-app widgets

package/templates/hr-feedback/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "hr-feedback-bot",
+  "version": "1.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "latest"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.0.0",
+    "typescript": "^5.6.0",
+    "wrangler": "^3.0.0"
+  }
+}

package/templates/hr-feedback/src/feedback.ts

@@ -0,0 +1,71 @@
+interface FeedbackEnv {
+  FLUXY_BASE_URL: string;
+  FLUXY_API_KEY: string;
+  HR_FEEDBACK_ROOM_ID?: string;
+  HR_ESCALATION_WEBHOOK_URL?: string;
+}
+
+interface FeedbackBody {
+  content?: string;
+  roomId?: string;
+}
+
+export interface FeedbackResult {
+  ok: boolean;
+  path?: string;
+  category?: string;
+  confidence?: number;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * Submit anonymous feedback through the FluxyChat worker classifier.
+ * Content is classified server-side; only metadata is returned.
+ */
+export async function submitHrFeedback(
+  env: FeedbackEnv,
+  body: FeedbackBody,
+): Promise<FeedbackResult> {
+  const content = String(body.content ?? "").trim();
+  if (!content) return { ok: false, error: "content required" };
+  if (content.length > 8000) return { ok: false, error: "content_too_long" };
+
+  const baseUrl = env.FLUXY_BASE_URL.replace(/\/$/, "");
+  const res = await fetch(`${baseUrl}/anonymous-feedback`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${env.FLUXY_API_KEY}`,
+    },
+    body: JSON.stringify({
+      content,
+      roomId: body.roomId ?? env.HR_FEEDBACK_ROOM_ID ?? null,
+    }),
+  });
+
+  const data = (await res.json().catch(() => ({}))) as FeedbackResult;
+  if (!res.ok) {
+    return { ok: false, error: data.error ?? `worker_${res.status}` };
+  }
+
+  if (data.path === "hr_escalation" && env.HR_ESCALATION_WEBHOOK_URL) {
+    await fetch(env.HR_ESCALATION_WEBHOOK_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        category: data.category,
+        confidence: data.confidence,
+        at: new Date().toISOString(),
+      }),
+    }).catch(() => undefined);
+  }
+
+  return {
+    ok: true,
+    path: data.path,
+    category: data.category,
+    confidence: data.confidence,
+    message: data.message,
+  };
+}

package/templates/hr-feedback/src/index.ts

@@ -0,0 +1,22 @@
+import { submitHrFeedback } from "./feedback.js";
+
+export default {
+  async fetch(request: Request, env: Record<string, string>): Promise<Response> {
+    const url = new URL(request.url);
+
+    if (url.pathname === "/" && request.method === "GET") {
+      return new Response("HR anonymous feedback bot is running.", { status: 200 });
+    }
+
+    if (url.pathname === "/feedback" && request.method === "POST") {
+      const body = (await request.json().catch(() => ({}))) as {
+        content?: string;
+        roomId?: string;
+      };
+      const result = await submitHrFeedback(env, body);
+      return Response.json(result, { status: result.ok ? 200 : 400 });
+    }
+
+    return new Response("Not Found", { status: 404 });
+  },
+};

package/templates/hr-feedback/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/hr-feedback/wrangler.toml

@@ -0,0 +1,7 @@
+name = "hr-feedback-bot"
+main = "src/index.ts"
+compatibility_date = "2024-12-01"
+
+[vars]
+FLUXY_BASE_URL = "https://your-fluxychat-worker.example.com"
+HR_FEEDBACK_ROOM_ID = "hr-anonymous-feedback"

package/templates/minimal/.env.example

@@ -0,0 +1,3 @@
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.com
+VITE_FLUXYCHAT_MEMBER_JWT=your-member-jwt
+VITE_FLUXYCHAT_ROOM_ID=general

package/templates/minimal/README.md

@@ -0,0 +1,14 @@
+# FluxyChat minimal starter
+
+Three-line chat widget with no platform modules in the generated project.
+
+```bash
+cp .env.example .env
+pnpm dev
+```
+
+Uses `@fluxy-chat/ui-kit` (`FluxyChatWidget`).
+
+## Full platform
+
+See [docs.fluxychat.com](https://docs.fluxychat.com/docs) for agents, stream, IoT, and self-host.

package/templates/minimal/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluxyChat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/minimal/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "fluxy-chat-minimal",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluxy-chat/ui-kit": "^0.1.0",
+    "@fluxy-chat/ui": "^0.1.2",
+    "@fluxy-chat/react": "^0.1.1",
+    "@fluxy-chat/sdk": "^0.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/minimal/src/App.tsx

@@ -0,0 +1,24 @@
+import { FluxyChatWidget } from "@fluxy-chat/ui-kit";
+
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL;
+const token = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT;
+const roomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID || "general";
+
+export function App() {
+  return (
+    <main style={{ maxWidth: 720, margin: "2rem auto", padding: "0 1rem" }}>
+      <h1 style={{ fontSize: "1.25rem", marginBottom: "1rem" }}>FluxyChat</h1>
+      <FluxyChatWidget
+        roomId={roomId}
+        workerUrl={workerUrl}
+        token={token}
+        theme="default"
+        height={520}
+      />
+      <p style={{ marginTop: "1rem", fontSize: 13, color: "#71717a" }}>
+        Need stream, IoT, or agents? See{" "}
+        <a href="https://docs.fluxychat.com/docs">full platform docs</a>.
+      </p>
+    </main>
+  );
+}

package/templates/minimal/src/index.css

@@ -0,0 +1,13 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #18181b;
+  background: #fafafa;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: #c2410c;
+}

package/templates/minimal/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/minimal/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT: string;
+  readonly VITE_FLUXYCHAT_ROOM_ID?: string;
+}

package/templates/minimal/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"]
+}

package/templates/minimal/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+});

package/templates/react/.env.example

@@ -0,0 +1,9 @@
+# FluxyChat worker URL (hosted or self-hosted)
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
+
+# Option A — member JWT (~2 min via onboarding)
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+VITE_FLUXYCHAT_ROOM_ID=demo
+
+# Option B — public guest room (~60s, no signup)
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/react/README.md

@@ -0,0 +1,43 @@
+# FluxyChat React starter
+
+Minimal Vite + React app with `useChat`. First message in about 60 seconds via the public guest room.
+
+## Quick start (guest, fastest)
+
+```bash
+cp .env.example .env
+# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_PUBLIC_ROOM_ID (public room from console)
+npm install
+npm run dev
+```
+
+Open http://localhost:5173. A guest JWT is minted automatically via `joinPublicRoomAsGuest`.
+
+## Quick start (member JWT)
+
+```bash
+cp .env.example .env
+# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_MEMBER_JWT + VITE_FLUXYCHAT_ROOM_ID
+npm install
+npm run dev
+```
+
+## Get credentials
+
+1. **Guest:** create a **public** room in console, copy room ID, set `VITE_FLUXYCHAT_PUBLIC_ROOM_ID`
+2. **Member:** [fluxychat.com/onboarding](https://fluxychat.com/onboarding) for Worker URL and JWT
+3. **Local monorepo:** `pnpm run first-message` from the FluxyChat repo
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Vite dev server |
+| `npm run build` | Production build |
+| `npm run preview` | Preview production build |
+
+## Next steps
+
+- Add `@fluxy-chat/ui` themes (`default`, `dark`, `minimal`, `brand`)
+- Use `useInbox` for unified feed
+- See [chat-only quickstart](https://docs.fluxychat.com/docs/getting-started/chat-only-quickstart)

package/templates/react/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluxyChat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "fluxy-chat-app",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluxy-chat/react": "^0.1.1",
+    "@fluxy-chat/sdk": "^0.6.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react/src/App.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState } from "react";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
+
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim();
+const publicRoomId = import.meta.env.VITE_FLUXYCHAT_PUBLIC_ROOM_ID?.trim();
+const configuredRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "demo";
+
+interface FluxySession {
+  client: FluxyChatClient;
+  roomId: string;
+  mode: "member" | "guest";
+}
+
+function useFluxySession(): {
+  session: FluxySession | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const [session, setSession] = useState<FluxySession | null>(null);
+  const [loading, setLoading] = useState(Boolean(workerUrl));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!workerUrl) {
+      setLoading(false);
+      return;
+    }
+
+    if (memberJwt) {
+      setSession({
+        client: new FluxyChatClient({
+          baseUrl: workerUrl,
+          userId: "demo-user",
+          token: memberJwt,
+        }),
+        roomId: configuredRoomId,
+        mode: "member",
+      });
+      setLoading(false);
+      return;
+    }
+
+    if (publicRoomId) {
+      let cancelled = false;
+      void FluxyChatClient.joinPublicRoomAsGuest(workerUrl, publicRoomId, {
+        displayName: "Guest",
+      })
+        .then((guest) => {
+          if (cancelled) return;
+          setSession({
+            client: new FluxyChatClient({
+              baseUrl: workerUrl,
+              userId: guest.userId,
+              token: guest.token,
+            }),
+            roomId: guest.roomId,
+            mode: "guest",
+          });
+        })
+        .catch((err) => {
+          if (!cancelled) {
+            setError(err instanceof Error ? err.message : "Guest session failed");
+          }
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    setLoading(false);
+  }, []);
+
+  return { session, loading, error };
+}
+
+function ChatPanel({ roomId }: { roomId: string }) {
+  const { messages, sendMessage, connectionState } = useChat({
+    roomId,
+    markReadLatest: true,
+  });
+  const [draft, setDraft] = useState("");
+
+  return (
+    <section className="chat-panel">
+      <header className="chat-header">
+        <strong>{roomId}</strong>
+        <span className="status">{connectionState.status}</span>
+      </header>
+      <ul className="messages">
+        {messages.map((m) => (
+          <li key={m.id} className="message">
+            <span className="author">{m.userId}</span>
+            <span>{m.content}</span>
+          </li>
+        ))}
+      </ul>
+      <form
+        className="composer"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const text = draft.trim();
+          if (!text) return;
+          void sendMessage(text);
+          setDraft("");
+        }}
+      >
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Type a message…"
+          aria-label="Message"
+        />
+        <button type="submit">Send</button>
+      </form>
+    </section>
+  );
+}
+
+export function App() {
+  const { session, loading, error } = useFluxySession();
+  const [roomId, setRoomId] = useState(configuredRoomId);
+
+  const activeRoomId = useMemo(() => {
+    if (session?.mode === "guest") return session.roomId;
+    return roomId.trim() || configuredRoomId;
+  }, [session, roomId]);
+
+  if (!workerUrl) {
+    return (
+      <main className="shell">
+        <h1>FluxyChat — chat-only starter</h1>
+        <p>
+          Copy <code>.env.example</code> to <code>.env</code> and set{" "}
+          <code>VITE_FLUXYCHAT_WORKER_URL</code>.
+        </p>
+        <p>
+          Then either <code>VITE_FLUXYCHAT_MEMBER_JWT</code> (member) or{" "}
+          <code>VITE_FLUXYCHAT_PUBLIC_ROOM_ID</code> (guest, ~60s to first message).
+        </p>
+      </main>
+    );
+  }
+
+  if (loading) {
+    return (
+      <main className="shell">
+        <p>Connecting…</p>
+      </main>
+    );
+  }
+
+  if (error || !session) {
+    return (
+      <main className="shell">
+        <h1>FluxyChat</h1>
+        <p className="error">{error ?? "Set JWT or public room ID in .env"}</p>
+        <p>
+          Get credentials from{" "}
+          <a href="https://fluxychat.com/onboarding" target="_blank" rel="noreferrer">
+            onboarding
+          </a>{" "}
+          or use a public room ID for guest mode.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="shell">
+      <h1>FluxyChat</h1>
+      <p className="mode-badge">{session.mode === "guest" ? "Guest session" : "Member JWT"}</p>
+      {session.mode === "member" ? (
+        <label className="room-picker">
+          Room
+          <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
+        </label>
+      ) : null}
+      <FluxyRealtimeProvider client={session.client}>
+        <ChatPanel roomId={activeRoomId} />
+      </FluxyRealtimeProvider>
+    </main>
+  );
+}

package/templates/react/src/index.css

@@ -0,0 +1,116 @@
+:root {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  color: #0f172a;
+  background: #f8fafc;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.shell {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: min(70vh, 560px);
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background: #2563eb;
+  color: #fff;
+}
+
+.status {
+  font-size: 0.75rem;
+  opacity: 0.9;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  background: #f1f5f9;
+}
+
+.author {
+  font-size: 0.7rem;
+  color: #64748b;
+}
+
+.composer {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.composer input {
+  flex: 1;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+}
+
+.composer button {
+  border: none;
+  border-radius: 8px;
+  background: #2563eb;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.mode-badge {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin: 0 0 0.75rem;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.room-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.room-picker input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+}

package/templates/react/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT?: string;
+  readonly VITE_FLUXYCHAT_ROOM_ID?: string;
+  readonly VITE_FLUXYCHAT_PUBLIC_ROOM_ID?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/react/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+});

package/templates/slack/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "latest",
+    "@fluxy-chat/sdk": "^0.6.0",
     "@slack/bolt": "^4.0.0",
     "@slack/web-api": "^7.0.0"
   },

package/templates/telegram/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "latest",
+    "@fluxy-chat/sdk": "^0.6.0",
     "node-telegram-bot-api": "^0.66.0"
   },
   "devDependencies": {