@fluxy-chat/create-fluxy-chat 0.2.0 → 0.3.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"].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,18 @@ 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: "Basic (Cloudflare Workers bot)", value: "basic" },
           { label: "Slack", value: "slack" },
           { label: "Telegram", value: "telegram" },
           { label: "Discord", value: "discord" },
@@ -117,6 +139,9 @@ async function runPrompts(inputs) {
         ]
       });
       if (isCancel(result)) return null;
+      if (result === "minimal") {
+        return runPrompts({ ...inputs, minimal: true, adapter: "react" });
+      }
       adapter = result;
     }
   }
@@ -167,11 +192,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 +801,7 @@ var execAsync = promisify(exec);
 function parseArgs(argv) {
   const args = {
     yes: false,
+    minimal: false,
     skipInstall: false,
     noGit: false,
     help: false
@@ -786,16 +813,28 @@ 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 {
+        console.error(`Invalid template: ${value}. Choose: react, basic, slack, telegram, discord, web`);
+        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`);
         process.exit(1);
       }
     } else if (arg === "--pm" || arg === "--package-manager") {
@@ -833,16 +872,20 @@ ${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
+  -t, --template <type>      Alias for --adapter (e.g. react)
   --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-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 +903,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 +926,37 @@ 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 {
+      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 +990,11 @@ async function main() {
     }
   }
   note(
-    [
+    config.adapter === "react" ? [
+      `cd ${config.name}`,
+      "cp .env.example .env",
+      `${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.3.0",
   "description": "Scaffold a new FluxyChat bot project with a single command",
   "type": "module",
   "main": "./dist/index.js",

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 (more control)
+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 |

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/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 — 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,8 @@
+# FluxyChat worker URL (hosted or self-hosted)
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
+
+# Member JWT from POST /auth/token or onboarding wizard
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+
+# Demo room — create in console or onboarding
+VITE_FLUXYCHAT_ROOM_ID=demo

package/templates/react/README.md

@@ -0,0 +1,33 @@
+# FluxyChat React starter
+
+Minimal Vite + React app with `useChat` — first message in minutes.
+
+## Quick start
+
+```bash
+cp .env.example .env
+# Edit .env with your Worker URL + member JWT
+npm install
+npm run dev
+```
+
+Open http://localhost:5173 and send a message.
+
+## Get credentials
+
+1. **Hosted:** [fluxychat.com/onboarding](https://fluxychat.com/onboarding) → copy Worker URL + JWT
+2. **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` for polished message bubbles
+- 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,95 @@
+import { 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;
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT;
+const defaultRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID || "demo";
+
+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 [roomId, setRoomId] = useState(defaultRoomId);
+
+  const client = useMemo(() => {
+    if (!workerUrl?.trim() || !memberJwt?.trim()) return null;
+    return new FluxyChatClient({
+      baseUrl: workerUrl.trim(),
+      userId: "demo-user",
+      token: memberJwt.trim(),
+    });
+  }, []);
+
+  if (!client) {
+    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> and <code>VITE_FLUXYCHAT_MEMBER_JWT</code>.
+        </p>
+        <p>
+          Get credentials from{" "}
+          <a href="https://fluxychat.com/onboarding" target="_blank" rel="noreferrer">
+            onboarding
+          </a>{" "}
+          or <code>pnpm run first-message</code> in the monorepo.
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="shell">
+      <h1>FluxyChat</h1>
+      <label className="room-picker">
+        Room
+        <input value={roomId} onChange={(e) => setRoomId(e.target.value)} />
+      </label>
+      <FluxyRealtimeProvider client={client}>
+        <ChatPanel roomId={roomId.trim() || defaultRoomId} />
+      </FluxyRealtimeProvider>
+    </main>
+  );
+}

package/templates/react/src/index.css

@@ -0,0 +1,106 @@
+: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;
+}
+
+.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,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT: string;
+  readonly VITE_FLUXYCHAT_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": {