@fluxy-chat/create-fluxy-chat 0.5.14 → 0.5.21

package/templates/react/README.md

@@ -1,43 +1,18 @@
 # 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)
+`FluxyRealtimeProvider` + `publishableKey` + `useChat`. No member JWT mint.
 
 ```bash
 cp .env.example .env
-# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_MEMBER_JWT + VITE_FLUXYCHAT_ROOM_ID
+# Set VITE_FLUXYCHAT_WORKER_URL + VITE_FLUXYCHAT_PUBLISHABLE_KEY + 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 |
+Pin `@fluxy-chat/sdk@0.6.10` and `@fluxy-chat/react@0.1.7`.
 
-## Next steps
+## Other paths
 
-- 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)
+- Member JWT: `VITE_FLUXYCHAT_MEMBER_JWT`
+- Guest session: `VITE_FLUXYCHAT_PUBLIC_ROOM_ID` (`joinPublicRoomAsGuest`)
+- Credentials: [fluxychat.com/onboarding](https://fluxychat.com/onboarding) or `GET /public/demo-credentials` on a Worker that sets `PUBLIC_DEMO_PUBLISHABLE_KEY`

package/templates/react/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluxy-chat/react": "^0.1.4",
-    "@fluxy-chat/sdk": "^0.6.5",
+    "@fluxy-chat/react": "^0.1.7",
+    "@fluxy-chat/sdk": "^0.6.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.0"

package/templates/react/src/App.tsx

@@ -3,6 +3,7 @@ import { FluxyChatClient } from "@fluxy-chat/sdk";
 import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
 
 const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const publishableKey = import.meta.env.VITE_FLUXYCHAT_PUBLISHABLE_KEY?.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";
@@ -21,11 +22,11 @@ function useFluxySession(): {
   error: string | null;
 } {
   const [session, setSession] = useState<FluxySession | null>(null);
-  const [loading, setLoading] = useState(Boolean(workerUrl));
+  const [loading, setLoading] = useState(Boolean(workerUrl) && !publishableKey);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!workerUrl) {
+    if (!workerUrl || publishableKey) {
       setLoading(false);
       return;
     }
@@ -126,30 +127,44 @@ function ChatPanel({ roomId }: { roomId: string }) {
 }
 
 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]);
+  const pkRoomId = publicRoomId || configuredRoomId;
 
   if (!workerUrl) {
     return (
       <main className="shell">
-        <h1>FluxyChat — chat-only starter</h1>
+        <h1>FluxyChat</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).
+          <code>VITE_FLUXYCHAT_WORKER_URL</code> plus <code>VITE_FLUXYCHAT_PUBLISHABLE_KEY</code>.
         </p>
       </main>
     );
   }
 
+  if (publishableKey) {
+    return (
+      <main className="shell">
+        <h1>FluxyChat</h1>
+        <p className="mode-badge">publishableKey · public room {pkRoomId}</p>
+        <FluxyRealtimeProvider workerUrl={workerUrl} publishableKey={publishableKey}>
+          <ChatPanel roomId={pkRoomId} />
+        </FluxyRealtimeProvider>
+      </main>
+    );
+  }
+
+  return <MemberOrGuestApp />;
+}
+
+function MemberOrGuestApp() {
+  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 (loading) {
     return (
       <main className="shell">
@@ -162,14 +177,7 @@ export function App() {
     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>
+        <p className="error">{error ?? "Set pk_, JWT, or public room ID in .env"}</p>
       </main>
     );
   }

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

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_PUBLISHABLE_KEY?: string;
   readonly VITE_FLUXYCHAT_MEMBER_JWT?: string;
   readonly VITE_FLUXYCHAT_ROOM_ID?: string;
   readonly VITE_FLUXYCHAT_PUBLIC_ROOM_ID?: string;

package/templates/slack/package.json

@@ -1,21 +1,21 @@
-{
-  "name": "fluxy-bot-slack",
-  "version": "0.1.0",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "wrangler dev",
-    "deploy": "wrangler deploy",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@fluxy-chat/sdk": "^0.6.5",
-    "@slack/bolt": "^4.0.0",
-    "@slack/web-api": "^7.0.0"
-  },
-  "devDependencies": {
-    "@cloudflare/workers-types": "^4.0.0",
-    "typescript": "^5.6.0",
-    "wrangler": "^3.0.0"
-  }
-}
+{
+  "name": "fluxy-bot-slack",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "^0.6.10",
+    "@slack/bolt": "^4.0.0",
+    "@slack/web-api": "^7.0.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.0.0",
+    "typescript": "^5.6.0",
+    "wrangler": "^3.0.0"
+  }
+}

package/templates/telegram/package.json

@@ -1,20 +1,20 @@
-{
-  "name": "fluxy-bot-telegram",
-  "version": "0.1.0",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "wrangler dev",
-    "deploy": "wrangler deploy",
-    "type-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@fluxy-chat/sdk": "^0.6.5",
-    "node-telegram-bot-api": "^0.66.0"
-  },
-  "devDependencies": {
-    "@cloudflare/workers-types": "^4.0.0",
-    "typescript": "^5.6.0",
-    "wrangler": "^3.0.0"
-  }
-}
+{
+  "name": "fluxy-bot-telegram",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "^0.6.10",
+    "node-telegram-bot-api": "^0.66.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.0.0",
+    "typescript": "^5.6.0",
+    "wrangler": "^3.0.0"
+  }
+}

package/templates/tiptap-room/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "fluxy-tiptap-room",
-  "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.4",
-    "@fluxy-chat/sdk": "^0.6.5",
-    "@tiptap/extension-collaboration": "^2.11.5",
-    "@tiptap/pm": "^2.11.5",
-    "@tiptap/react": "^2.11.5",
-    "@tiptap/starter-kit": "^2.11.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "yjs": "^13.6.31"
-  },
-  "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"
-  }
-}
+{
+  "name": "fluxy-tiptap-room",
+  "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.7",
+    "@fluxy-chat/sdk": "^0.6.10",
+    "@tiptap/extension-collaboration": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "yjs": "^13.6.31"
+  },
+  "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/voice-stage/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluxy-chat/react": "^0.1.4",
-    "@fluxy-chat/sdk": "^0.6.5",
+    "@fluxy-chat/react": "^0.1.7",
+    "@fluxy-chat/sdk": "^0.6.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.0"

package/templates/war-room/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluxy-chat/react": "^0.1.4",
-    "@fluxy-chat/sdk": "^0.6.5",
+    "@fluxy-chat/react": "^0.1.7",
+    "@fluxy-chat/sdk": "^0.6.10",
     "@fluxy-chat/ui": "^0.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/templates/whiteboard/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluxy-chat/react": "^0.1.4",
-    "@fluxy-chat/sdk": "^0.6.5",
+    "@fluxy-chat/react": "^0.1.7",
+    "@fluxy-chat/sdk": "^0.6.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "yjs": "^13.6.31",