@speak2web/create-chat 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 speak2web
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# @speak2web/create-chat
+
+Scaffold a **pre-wired Speak2Web AIN/AIC chat app** against your headless bridge — so day-one is
+a working app, not hand-wiring `createClient` + provider + widget + env vars (SPEAK-234).
+
+```bash
+npm create @speak2web/chat my-app
+# or
+npx @speak2web/create-chat my-app
+```
+
+Interactive by default — it prompts for the template and your bridge values, then writes them to
+the project's env file. Or pass flags for a non-interactive run:
+
+```bash
+npx @speak2web/create-chat my-app \
+  --template next-app \
+  --api-base https://your-site.com/wp-json/s2w/v1 \
+  --site-id pub_abc123 \
+  --yes
+```
+
+## Options
+
+| Flag | Description |
+|---|---|
+| `<project-name>` | Positional. Directory to create (must not exist). |
+| `-t, --template` | `next-app` (default) or `vite-react`. |
+| `--api-base` | Bridge REST base, e.g. `https://site.com/wp-json/s2w/v1`. |
+| `--token-endpoint` | JWT issuer. Defaults to `<api-base>/auth/jwt`. |
+| `--site-id` | Public site id from **AI-Gateway → Headless / JWT** (`pub_…`). |
+| `-y, --yes` | Skip prompts; use flags/defaults (also auto-on when there's no TTY). |
+| `-h, --help` | Show help. |
+
+## Templates
+
+| Template | Stack | Source | Env file / prefix |
+|---|---|---|---|
+| `next-app` | Next.js (App Router) | `ecis2-next-pilot` | `.env.local` / `NEXT_PUBLIC_S2W_*` |
+| `vite-react` | Vite + plain React | `bridge-harness` | `.env` / `VITE_S2W_*` |
+
+Both mount `createClient()` → `<AICChatProvider>` → `<AICChat>` (the wiring in
+`ecis2-next-pilot/app/chat-widget.tsx`).
+
+## After scaffolding
+
+```bash
+cd my-app
+npm install
+npm run dev      # http://localhost:5173
+```
+
+Then make sure the app's origin is allowlisted in **AI-Gateway → Headless / JWT → Allowed
+origins** (e.g. `http://localhost:5173`), or the token mint (`/auth/jwt`) returns `403`.
+
+## SDK dependency (SPEAK-230)
+
+Generated apps depend on **`@speak2web/ain-aic-sdk`**. Until it's published to npm (SPEAK-230),
+`npm install` can't resolve it from the registry — link a local build instead:
+
+```bash
+# in the SDK repo
+npm run build && npm link
+# in the generated app
+npm link @speak2web/ain-aic-sdk
+```
+
+Zero runtime dependencies — Node 18+ built-ins only.

package/index.js

@@ -0,0 +1,188 @@
+#!/usr/bin/env node
+/**
+ * @speak2web/create-chat — scaffold a pre-wired AIN/AIC chat app (SPEAK-234).
+ *
+ * Productizes the reference apps (ecis2-next-pilot → next-app, bridge-harness →
+ * vite-react) into starters so day-one is a working app, not hand-wiring
+ * createClient + provider + widget + env vars.
+ *
+ *   npm create @speak2web/chat my-app
+ *   npx @speak2web/create-chat my-app --template next-app \
+ *     --api-base https://site.com/wp-json/s2w/v1 --site-id pub_abc123 --yes
+ *
+ * Zero runtime deps — Node 18+ built-ins only (matches the SDK's no-deps ethos).
+ */
+import { parseArgs } from 'node:util';
+import { createInterface } from 'node:readline/promises';
+import { stdin, stdout, cwd, exit, argv } from 'node:process';
+import { cp, rename, writeFile, readFile, readdir, stat } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { join, resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = join(HERE, 'templates');
+
+const TEMPLATES = {
+  'next-app': {
+    label: 'Next.js (App Router)',
+    envFile: '.env.local',
+    envPrefix: 'NEXT_PUBLIC_S2W_',
+    run: 'npm run dev   # http://localhost:5173',
+  },
+  'vite-react': {
+    label: 'Vite + plain React',
+    envFile: '.env',
+    envPrefix: 'VITE_S2W_',
+    run: 'npm run dev',
+  },
+};
+
+const PLACEHOLDER_API_BASE = 'https://your-site.com/wp-json/s2w/v1';
+const PLACEHOLDER_SITE_ID = 'pub_xxxxxxxx';
+
+function printHelp() {
+  stdout.write(`
+create-chat — scaffold a Speak2Web AIN/AIC chat app
+
+Usage:
+  npm create @speak2web/chat <project-name> [options]
+  npx @speak2web/create-chat <project-name> [options]
+
+Options:
+  -t, --template <name>    next-app (default) | vite-react
+      --api-base <url>     bridge REST base, e.g. https://site.com/wp-json/s2w/v1
+      --token-endpoint <url>   JWT issuer (default: <api-base>/auth/jwt)
+      --site-id <pub_…>    public site id from AI-Gateway → Headless / JWT
+  -y, --yes                accept defaults / skip prompts (non-interactive)
+  -h, --help               show this help
+
+Templates are pre-wired to @speak2web/ain-aic-sdk (on npm); bridge values are
+written to the project's env file.
+`);
+}
+
+/** Recursively list every file under dir (absolute paths). */
+async function walk(dir) {
+  const out = [];
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) out.push(...(await walk(full)));
+    else out.push(full);
+  }
+  return out;
+}
+
+/** Replace {{TOKENS}} in every text file under dir. */
+async function replaceTokens(dir, tokens) {
+  for (const file of await walk(dir)) {
+    let text;
+    try {
+      text = await readFile(file, 'utf8');
+    } catch {
+      continue; // unreadable/binary — skip
+    }
+    let next = text;
+    for (const [k, v] of Object.entries(tokens)) next = next.split(k).join(v);
+    if (next !== text) await writeFile(file, next);
+  }
+}
+
+async function main() {
+  const { values, positionals } = parseArgs({
+    args: argv.slice(2),
+    allowPositionals: true,
+    options: {
+      template: { type: 'string', short: 't' },
+      'api-base': { type: 'string' },
+      'token-endpoint': { type: 'string' },
+      'site-id': { type: 'string' },
+      yes: { type: 'boolean', short: 'y' },
+      help: { type: 'boolean', short: 'h' },
+    },
+  });
+
+  if (values.help) {
+    printHelp();
+    return;
+  }
+
+  // Non-interactive when --yes, or when there's no TTY (CI, pipes) — fall back to
+  // flag values / defaults instead of hanging on a prompt.
+  const interactive = !values.yes && stdin.isTTY;
+  const rl = interactive ? createInterface({ input: stdin, output: stdout }) : null;
+  const ask = async (question, def) => {
+    if (!rl) return def;
+    const answer = (await rl.question(`${question}${def ? ` (${def})` : ''}: `)).trim();
+    return answer || def;
+  };
+
+  try {
+    const projectName = positionals[0] ?? (await ask('Project name', 'my-s2w-chat'));
+    if (!projectName || /[/\\]/.test(projectName)) {
+      throw new Error(`Invalid project name: "${projectName}"`);
+    }
+
+    let template = values.template ?? (await ask('Template (next-app / vite-react)', 'next-app'));
+    if (!TEMPLATES[template]) {
+      throw new Error(`Unknown template "${template}". Choose: ${Object.keys(TEMPLATES).join(', ')}`);
+    }
+    const spec = TEMPLATES[template];
+
+    const apiBase = values['api-base'] ?? (await ask('Bridge apiBase', PLACEHOLDER_API_BASE));
+    const tokenDefault = values['token-endpoint'] ?? `${apiBase.replace(/\/+$/, '')}/auth/jwt`;
+    const tokenEndpoint = values['token-endpoint'] ?? (await ask('Token endpoint', tokenDefault));
+    const siteId = values['site-id'] ?? (await ask('Public siteId (pub_…)', PLACEHOLDER_SITE_ID));
+
+    rl?.close();
+
+    const targetDir = resolve(cwd(), projectName);
+    if (existsSync(targetDir)) {
+      throw new Error(`Refusing to overwrite existing path: ${targetDir}`);
+    }
+    const templateDir = join(TEMPLATES_DIR, template);
+    if (!existsSync(templateDir)) {
+      throw new Error(`Template files missing: ${templateDir}`);
+    }
+
+    // 1. Copy the template tree.
+    await cp(templateDir, targetDir, { recursive: true });
+
+    // 2. npm strips `.gitignore` from published tarballs, so templates ship it as
+    //    `gitignore` — restore the dot in the generated project.
+    if (existsSync(join(targetDir, 'gitignore'))) {
+      await rename(join(targetDir, 'gitignore'), join(targetDir, '.gitignore'));
+    }
+
+    // 3. Fill placeholders (project name in package.json / README).
+    await replaceTokens(targetDir, { '{{PROJECT_NAME}}': projectName });
+
+    // 4. Write the bridge config to the template's env file.
+    const env =
+      `# Speak2Web bridge — written by create-chat. ${spec.envPrefix}* values are\n` +
+      `# read by the app at build/start.\n` +
+      `${spec.envPrefix}API_BASE=${apiBase}\n` +
+      `${spec.envPrefix}TOKEN_ENDPOINT=${tokenEndpoint}\n` +
+      `${spec.envPrefix}SITE_ID=${siteId}\n`;
+    await writeFile(join(targetDir, spec.envFile), env);
+
+    // 5. Report.
+    const warnUnset = apiBase === PLACEHOLDER_API_BASE || siteId === PLACEHOLDER_SITE_ID;
+    stdout.write(`\n✅ Created ${projectName} (${spec.label})\n`);
+    stdout.write(`   bridge: ${apiBase}  ·  siteId: ${siteId}\n`);
+    if (warnUnset) {
+      stdout.write(
+        `\n⚠️  Placeholder bridge values — edit ${projectName}/${spec.envFile} with your\n` +
+          `   real apiBase / siteId (AI-Gateway → Headless / JWT) before the chat will connect.\n`,
+      );
+    }
+    stdout.write(`\nNext:\n  cd ${projectName}\n  npm install\n  ${spec.run}\n\n`);
+  } finally {
+    rl?.close();
+  }
+}
+
+main().catch((err) => {
+  stdout.write(`\n✖ ${err.message}\n`);
+  exit(1);
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@speak2web/create-chat",
+  "version": "1.0.0",
+  "description": "Scaffold a pre-wired Speak2Web AIN/AIC chat app (Next.js App Router or Vite/React) against your headless bridge. `npm create @speak2web/chat`.",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-chat": "index.js",
+    "create-s2w-chat": "index.js"
+  },
+  "files": [
+    "index.js",
+    "templates",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "speak2web",
+    "ain-aic-sdk",
+    "scaffold",
+    "create",
+    "chat",
+    "headless-wordpress"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/speak2web/s2w-ain-aic-sdk.git",
+    "directory": "create-chat"
+  }
+}

package/templates/next-app/README.md

@@ -0,0 +1,42 @@
+# {{PROJECT_NAME}}
+
+A Speak2Web **AI Navigator / AI Concierge** chat app on **Next.js (App Router)**, scaffolded by
+[`@speak2web/create-chat`](https://bitbucket.org/speak2web/s2w-ain-aic-sdk).
+
+## Run
+
+```bash
+npm install
+npm run dev    # http://localhost:5173
+```
+
+Open the page and use the chat bubble (bottom-right).
+
+## How it's wired
+
+- **`app/chat-widget.tsx`** — the client island: `createClient()` → `<AICChatProvider>` → `<AICChat>`.
+- **`lib/config.ts`** — reads `NEXT_PUBLIC_S2W_*` env vars.
+- **`.env.local`** — your bridge values (`apiBase`, `tokenEndpoint`, `siteId`), written by the scaffolder. Edit it to retarget.
+
+Want a styled widget? `import '@speak2web/ain-aic-sdk/react/aic-chat.css'` and pass `theme="dark"`.
+Want lead capture? Add `enableEscalation` to `<AICChat>`.
+
+## CORS
+
+The bridge only accepts requests from **allowlisted origins**. Add this app's origin
+(e.g. `http://localhost:5173`) in **AI-Gateway → Headless / JWT → Allowed origins**, or the
+token mint (`/auth/jwt`) returns `403`.
+
+## SDK dependency
+
+This app depends on `@speak2web/ain-aic-sdk`. Until it's published to npm (SPEAK-230), point the
+dependency at a local build:
+
+```bash
+# in the SDK repo
+npm run build && npm link
+# here
+npm link @speak2web/ain-aic-sdk
+```
+
+or set `"@speak2web/ain-aic-sdk": "file:../path/to/s2w-ain-aic-sdk"` in `package.json`.

package/templates/next-app/app/chat-widget.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useMemo } from 'react';
+import { createClient } from '@speak2web/ain-aic-sdk';
+import { AICChatProvider, AICChat } from '@speak2web/ain-aic-sdk/react';
+import { config } from '../lib/config';
+
+/**
+ * The headless chat island: createClient() against your bridge, then the
+ * opinionated React provider + drop-in widget. The JWT is minted once on first
+ * call and reused (watch the Network tab for one /auth/jwt then Bearer on /chat).
+ *
+ * Auto-bridge-on-mount (adr-0004 §D4): pass a `sessionId` to AICChatProvider to
+ * resume a prior conversation across rendering layers. `enableEscalation` adds an
+ * opt-in "Talk to a human" lead-capture flow. Import the stylesheet for a styled
+ * widget: `import '@speak2web/ain-aic-sdk/react/aic-chat.css'`.
+ */
+export default function ChatWidget() {
+  const client = useMemo(
+    () =>
+      createClient({
+        apiBase: config.apiBase,
+        tokenEndpoint: config.tokenEndpoint,
+        siteId: config.siteId,
+        visitorFingerprint: config.visitorFingerprint,
+      }),
+    [],
+  );
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        right: 16,
+        bottom: 16,
+        width: 360,
+        maxWidth: 'calc(100vw - 32px)',
+        background: '#fff',
+        border: '1px solid #e5e7eb',
+        borderRadius: 12,
+        boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          padding: '10px 14px',
+          borderBottom: '1px solid #f1f1f4',
+          fontWeight: 600,
+          fontSize: 14,
+        }}
+      >
+        Chat
+      </div>
+      <div style={{ padding: 12 }}>
+        <AICChatProvider client={client} onError={(e) => console.error('[s2w bridge]', e)}>
+          <AICChat greeting="Hi! How can I help?" placeholder="Type a message…" />
+        </AICChatProvider>
+      </div>
+    </div>
+  );
+}

package/templates/next-app/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export const metadata = {
+  title: 'Speak2Web chat',
+  description: 'Next.js front end with AIN/AIC chat via @speak2web/ain-aic-sdk.',
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body
+        style={{
+          margin: 0,
+          fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
+          color: '#1a1a1a',
+          background: '#f6f7f9',
+        }}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/templates/next-app/app/page.tsx

@@ -0,0 +1,43 @@
+import ChatWidget from './chat-widget';
+
+// Server component (App Router). The chat widget is a client island mounted below;
+// everything it needs talks to your bridge over /wp-json/s2w/v1 — no WordPress theme.
+export default function Home() {
+  return (
+    <main style={{ maxWidth: 820, margin: '0 auto', padding: '32px 16px 96px' }}>
+      <header style={{ marginBottom: 24 }}>
+        <p
+          style={{
+            fontSize: 12,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+            color: '#6b7280',
+            margin: 0,
+          }}
+        >
+          Speak2Web · headless chat
+        </p>
+        <h1 style={{ fontSize: 28, margin: '4px 0 8px' }}>Your Next.js front end</h1>
+        <p style={{ color: '#4b5563', margin: 0 }}>
+          This page is rendered by Next.js. The chat bubble (bottom-right) talks to AI
+          Navigator / AI Concierge through the <code>/wp-json/s2w/v1</code> bridge via{' '}
+          <code>@speak2web/ain-aic-sdk</code>. Edit the wiring in{' '}
+          <code>app/chat-widget.tsx</code> and the bridge config in <code>.env.local</code>.
+        </p>
+      </header>
+
+      <section
+        style={{ background: '#fff', border: '1px solid #e5e7eb', borderRadius: 12, padding: 20 }}
+      >
+        <h2 style={{ fontSize: 18, marginTop: 0 }}>It works</h2>
+        <p style={{ color: '#4b5563', margin: 0 }}>
+          Open the chat in the bottom-right corner and say hello. If it can&apos;t connect,
+          confirm this origin is allowlisted in <strong>AI-Gateway → Headless / JWT → Allowed
+          origins</strong> and that your <code>.env.local</code> values are correct.
+        </p>
+      </section>
+
+      <ChatWidget />
+    </main>
+  );
+}

package/templates/next-app/gitignore

@@ -0,0 +1,12 @@
+node_modules
+/.next
+/out
+/build
+*.tsbuildinfo
+next-env.d.ts
+
+# env (the bridge config create-chat wrote)
+.env*.local
+
+.DS_Store
+*.log

package/templates/next-app/lib/config.ts

@@ -0,0 +1,20 @@
+/**
+ * Bridge config. Values come from NEXT_PUBLIC_S2W_* env vars (inlined at build,
+ * so they're available in the browser). `create-chat` wrote your real values into
+ * `.env.local`; the defaults below are placeholders for reference.
+ */
+export const config = {
+  /** AIN/AIC public REST surface (adr-0002): /wp-json/s2w/v1 */
+  apiBase: process.env.NEXT_PUBLIC_S2W_API_BASE ?? 'https://your-site.com/wp-json/s2w/v1',
+  /** AIG JWT issuer (adr-0003) */
+  tokenEndpoint:
+    process.env.NEXT_PUBLIC_S2W_TOKEN_ENDPOINT ?? 'https://your-site.com/wp-json/s2w/v1/auth/jwt',
+  /** Public site id (AIG → Headless / JWT, `pub_…`). Tokens are bound to it. */
+  siteId: process.env.NEXT_PUBLIC_S2W_SITE_ID ?? 'pub_xxxxxxxx',
+  /**
+   * Optional fixed visitor fingerprint. Set it ONLY for local dev (localhost has no
+   * apex cookie) so cross-renderer continuity still works while testing; leave unset
+   * in production, where the apex `s2w_visitor` cookie drives a stable identity.
+   */
+  visitorFingerprint: process.env.NEXT_PUBLIC_S2W_VISITOR_FP || undefined,
+};

package/templates/next-app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/next-app/next.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Transpile the SDK so a single React instance is used and ESM/CJS interop is clean.
+  transpilePackages: ['@speak2web/ain-aic-sdk'],
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/templates/next-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Speak2Web AIN/AIC chat app (Next.js App Router) — scaffolded by @speak2web/create-chat.",
+  "scripts": {
+    "dev": "next dev -p 5173",
+    "build": "next build",
+    "start": "next start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@speak2web/ain-aic-sdk": "^1.0.0",
+    "next": "^14.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/next-app/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/vite-react/README.md

@@ -0,0 +1,28 @@
+# {{PROJECT_NAME}}
+
+A Speak2Web **AI Navigator / AI Concierge** chat app on **Vite + React**, scaffolded by
+[`@speak2web/create-chat`](https://bitbucket.org/speak2web/s2w-ain-aic-sdk).
+
+## Run
+
+```bash
+npm install
+npm run dev    # http://localhost:5173
+```
+
+## How it's wired
+
+- **`src/main.jsx`** — `createClient()` → `<AICChatProvider>` → `<AICChat>` (with the default stylesheet imported).
+- **`.env`** — your bridge values (`VITE_S2W_API_BASE`, `VITE_S2W_TOKEN_ENDPOINT`, `VITE_S2W_SITE_ID`), written by the scaffolder. Edit it to retarget.
+
+## CORS
+
+The bridge only accepts requests from **allowlisted origins**. Add this app's origin
+(e.g. `http://localhost:5173`) in **AI-Gateway → Headless / JWT → Allowed origins**, or the
+token mint (`/auth/jwt`) returns `403`.
+
+## SDK dependency
+
+This app depends on `@speak2web/ain-aic-sdk`. Until it's published to npm (SPEAK-230), link a
+local build: `npm link @speak2web/ain-aic-sdk` (after `npm run build && npm link` in the SDK
+repo), or set a `file:` path in `package.json`.

package/templates/vite-react/gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+dist-ssr
+
+# env (the bridge config create-chat wrote)
+.env
+.env.local
+
+.DS_Store
+*.log

package/templates/vite-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" />
+    <title>Speak2Web chat</title>
+  </head>
+  <body style="margin: 0; background: #f6f7f9">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/vite-react/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Speak2Web AIN/AIC chat app (Vite + React) — scaffolded by @speak2web/create-chat.",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@speak2web/ain-aic-sdk": "^1.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.11"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/vite-react/src/main.jsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createClient } from '@speak2web/ain-aic-sdk';
+import { AICChatProvider, AICChat } from '@speak2web/ain-aic-sdk/react';
+import '@speak2web/ain-aic-sdk/react/aic-chat.css';
+
+// Bridge config from VITE_S2W_* env vars (create-chat wrote your values into .env).
+const config = {
+  apiBase: import.meta.env.VITE_S2W_API_BASE ?? 'https://your-site.com/wp-json/s2w/v1',
+  tokenEndpoint:
+    import.meta.env.VITE_S2W_TOKEN_ENDPOINT ?? 'https://your-site.com/wp-json/s2w/v1/auth/jwt',
+  siteId: import.meta.env.VITE_S2W_SITE_ID ?? 'pub_xxxxxxxx',
+  // Set VITE_S2W_VISITOR_FP only for local dev (localhost has no apex cookie).
+  visitorFingerprint: import.meta.env.VITE_S2W_VISITOR_FP || undefined,
+};
+
+function App() {
+  // createClient() mints the JWT once and reuses it (watch the Network tab for one
+  // /auth/jwt then Bearer on /chat). Then the opinionated provider + drop-in widget.
+  const client = useMemo(() => createClient(config), []);
+
+  return (
+    <div style={{ maxWidth: 480, margin: '40px auto', fontFamily: 'system-ui, sans-serif', padding: '0 16px' }}>
+      <h1 style={{ fontSize: 20 }}>Speak2Web chat</h1>
+      <p style={{ color: '#4b5563', fontSize: 14 }}>
+        Wired via <code>@speak2web/ain-aic-sdk</code>. Edit <code>src/main.jsx</code>; bridge
+        config lives in <code>.env</code>. Add <code>enableEscalation</code> for lead capture.
+      </p>
+      <AICChatProvider client={client} onError={(e) => console.error('[s2w bridge]', e)}>
+        <AICChat greeting="Hi! How can I help?" placeholder="Type a message…" theme="light" />
+      </AICChatProvider>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('root')).render(<App />);

package/templates/vite-react/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  // Port 5173 is a common default to allowlist in AI-Gateway → Headless / JWT.
+  server: { port: 5173, strictPort: true },
+  // The SDK externalizes react/react-dom; dedupe so the app and the SDK share one
+  // React copy (avoids the "two Reacts" invalid-hook-call error).
+  resolve: { dedupe: ['react', 'react-dom'] },
+});