create-claudius 1.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PMDevSolutions
+
+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 @@
+# create-claudius
+
+[![npm](https://img.shields.io/npm/v/create-claudius.svg)](https://www.npmjs.com/package/create-claudius)
+
+Scaffold a [Claudius](https://claudius-docs.pages.dev) AI chat widget project in
+one command.
+
+```bash
+npm create claudius@latest
+# or
+pnpm create claudius
+# or
+yarn create claudius
+```
+
+You'll be prompted for:
+
+- **Project name** — the new directory / package name
+- **Framework** — `vanilla` (CDN script embed), `react` (Vite), or `next` (Next.js App Router)
+- **Theme** — `auto` / `light` / `dark`, or a built-in theme (`default`, `minimal`, `playful`, `corporate`)
+- **Accent color** — a hex color for the widget
+- **API URL** — your deployed Claudius worker endpoint
+- Optionally, a **Cloudflare Worker** scaffold (`wrangler.toml` + KV stub + deploy runbook)
+
+The generated project runs out of the box:
+
+```bash
+cd my-app
+pnpm install
+pnpm dev
+```
+
+## Non-interactive
+
+Pass flags to skip the prompts (handy for CI):
+
+```bash
+npm create claudius@latest my-app -- \
+  --template react \
+  --theme auto \
+  --accent "#4f46e5" \
+  --api-url https://my-worker.workers.dev \
+  --worker \
+  --yes
+```
+
+| Flag | Values | Description |
+| --- | --- | --- |
+| `--template` | `vanilla` \| `react` \| `next` | Framework template |
+| `--theme` | `auto` \| `light` \| `dark` \| `default` \| `minimal` \| `playful` \| `corporate` | Widget theme |
+| `--accent` | `#rrggbb` | Accent color |
+| `--api-url` | URL | Worker chat endpoint |
+| `--worker` | — | Also scaffold a Cloudflare Worker |
+| `--pm` | `npm` \| `pnpm` \| `yarn` \| `bun` | Package manager shown in next steps |
+| `--yes`, `-y` | — | Accept defaults for any unspecified prompt |
+
+## What you get
+
+- **vanilla** — a static Vite site that loads the widget from the jsDelivr CDN via a
+  single `<script>` tag and `window.ClaudiusConfig`.
+- **react** — a Vite + React + TypeScript app using the `claudius-chat-widget`
+  component and its stylesheet.
+- **next** — a Next.js (App Router) + TypeScript app with a client-side widget wrapper.
+
+See the [documentation](https://claudius-docs.pages.dev) for worker setup and
+configuration.
+
+MIT © PMDevSolutions

package/dist/index.js

@@ -0,0 +1,277 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { cancel as cancel2, confirm as confirm2, isCancel as isCancel2, log, note, outro } from "@clack/prompts";
+import pc2 from "picocolors";
+import { parseArgs } from "util";
+import { readFileSync } from "fs";
+import { dirname as dirname2, resolve as resolve2 } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/frameworks.ts
+var FRAMEWORKS = [
+  { id: "vanilla", label: "Vanilla", hint: "Static site + CDN script embed" },
+  { id: "react", label: "React", hint: "Vite + React + TypeScript" },
+  { id: "next", label: "Next.js", hint: "App Router + TypeScript" }
+];
+var TEMPLATE_IDS = FRAMEWORKS.map((f) => f.id);
+var THEMES = [
+  { value: "auto", label: "Auto (follows system)" },
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "default", label: "Default (built-in)" },
+  { value: "minimal", label: "Minimal" },
+  { value: "playful", label: "Playful" },
+  { value: "corporate", label: "Corporate" }
+];
+var THEME_VALUES = THEMES.map((t) => t.value);
+var DEFAULTS = {
+  projectName: "my-claudius-app",
+  template: "react",
+  theme: "auto",
+  accent: "#4f46e5",
+  apiUrl: "https://your-worker.workers.dev"
+};
+function isTemplateId(value) {
+  return TEMPLATE_IDS.includes(value);
+}
+
+// src/prompts.ts
+import { cancel, confirm, intro, isCancel, select, text } from "@clack/prompts";
+import pc from "picocolors";
+var PROJECT_NAME_RE = /^[a-zA-Z0-9._-]+$/;
+var HEX_RE = /^#[0-9a-fA-F]{6}$/;
+function unwrap(value) {
+  if (isCancel(value)) {
+    cancel("Scaffolding cancelled.");
+    process.exit(0);
+  }
+  return value;
+}
+async function runPrompts(provided) {
+  intro(pc.bgCyan(pc.black(" create-claudius ")));
+  const yes = provided.yes ?? false;
+  const projectName = provided.projectName ?? (yes ? DEFAULTS.projectName : unwrap(
+    await text({
+      message: "Project name?",
+      placeholder: DEFAULTS.projectName,
+      defaultValue: DEFAULTS.projectName,
+      validate: (v) => v && !PROJECT_NAME_RE.test(v.trim()) ? "Use letters, numbers, dashes, dots, or underscores." : void 0
+    })
+  ));
+  const template = provided.template ?? (yes ? DEFAULTS.template : unwrap(
+    await select({
+      message: "Which framework?",
+      options: FRAMEWORKS.map((f) => ({ value: f.id, label: f.label, hint: f.hint })),
+      initialValue: DEFAULTS.template
+    })
+  ));
+  const theme = provided.theme ?? (yes ? DEFAULTS.theme : unwrap(
+    await select({
+      message: "Theme?",
+      options: THEMES,
+      initialValue: DEFAULTS.theme
+    })
+  ));
+  const accent = provided.accent ?? (yes ? DEFAULTS.accent : unwrap(
+    await text({
+      message: "Accent color (hex)?",
+      placeholder: DEFAULTS.accent,
+      defaultValue: DEFAULTS.accent,
+      validate: (v) => v && !HEX_RE.test(v.trim()) ? "Use a 6-digit hex color like #4f46e5." : void 0
+    })
+  ));
+  const apiUrl = provided.apiUrl ?? (yes ? DEFAULTS.apiUrl : unwrap(
+    await text({
+      message: "Worker API URL?",
+      placeholder: DEFAULTS.apiUrl,
+      defaultValue: DEFAULTS.apiUrl
+    })
+  ));
+  const worker = provided.worker ?? (yes ? false : unwrap(
+    await confirm({
+      message: "Also scaffold a Cloudflare Worker?",
+      initialValue: false
+    })
+  ));
+  return {
+    projectName: projectName.trim(),
+    template,
+    theme,
+    accent: accent.trim(),
+    apiUrl: apiUrl.trim(),
+    worker
+  };
+}
+
+// src/scaffold.ts
+import { mkdir, readdir, readFile, writeFile } from "fs/promises";
+import { existsSync, readdirSync } from "fs";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+function tokensFor(opts) {
+  return {
+    "{{PROJECT_NAME}}": opts.projectName,
+    "{{API_URL}}": opts.apiUrl,
+    "{{THEME}}": opts.theme,
+    "{{ACCENT_COLOR}}": opts.accent,
+    "{{WIDGET_VERSION}}": opts.widgetVersion
+  };
+}
+function applyTokens(content, tokens) {
+  let out = content;
+  for (const [token, value] of Object.entries(tokens)) {
+    out = out.split(token).join(value);
+  }
+  return out;
+}
+function destFileName(name) {
+  return name === "_gitignore" ? ".gitignore" : name;
+}
+async function copyTemplate(srcDir, destDir, tokens) {
+  await mkdir(destDir, { recursive: true });
+  const entries = await readdir(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = join(srcDir, entry.name);
+    const destPath = join(destDir, destFileName(entry.name));
+    if (entry.isDirectory()) {
+      await copyTemplate(srcPath, destPath, tokens);
+    } else {
+      const raw = await readFile(srcPath, "utf8");
+      await writeFile(destPath, applyTokens(raw, tokens));
+    }
+  }
+}
+function templatesRoot() {
+  return resolve(dirname(fileURLToPath(import.meta.url)), "../templates");
+}
+function isNonEmptyDir(dir) {
+  if (!existsSync(dir)) return false;
+  try {
+    return readdirSync(dir).length > 0;
+  } catch {
+    return false;
+  }
+}
+async function scaffold(opts) {
+  const tokens = tokensFor(opts);
+  const root = templatesRoot();
+  await copyTemplate(join(root, opts.template), opts.projectDir, tokens);
+  if (opts.worker) {
+    await copyTemplate(join(root, "worker"), join(opts.projectDir, "worker"), tokens);
+  }
+}
+
+// src/index.ts
+var HELP = `
+${pc2.bold("create-claudius")} \u2014 scaffold a Claudius AI chat widget project
+
+${pc2.bold("Usage")}
+  npm create claudius@latest [dir] -- [options]
+
+${pc2.bold("Options")}
+  -t, --template <id>   vanilla | react | next
+      --theme <name>    auto | light | dark | default | minimal | playful | corporate
+      --accent <hex>    accent color, e.g. #4f46e5
+      --api-url <url>   worker chat endpoint
+      --worker          also scaffold a Cloudflare Worker
+      --pm <name>       package manager for the next-steps hint (npm|pnpm|yarn|bun)
+  -y, --yes             accept defaults for anything not provided
+  -h, --help            show this help
+  -v, --version         show version
+`;
+function selfVersion() {
+  try {
+    const pkgPath = resolve2(dirname2(fileURLToPath2(import.meta.url)), "../package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    return pkg.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+function detectPm(explicit) {
+  if (explicit) return explicit;
+  const ua = process.env.npm_config_user_agent ?? "";
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("bun")) return "bun";
+  return "npm";
+}
+async function main() {
+  const { values, positionals } = parseArgs({
+    allowPositionals: true,
+    options: {
+      template: { type: "string", short: "t" },
+      theme: { type: "string" },
+      accent: { type: "string" },
+      "api-url": { type: "string" },
+      worker: { type: "boolean" },
+      pm: { type: "string" },
+      yes: { type: "boolean", short: "y" },
+      help: { type: "boolean", short: "h" },
+      version: { type: "boolean", short: "v" }
+    }
+  });
+  if (values.help) {
+    console.log(HELP);
+    return;
+  }
+  if (values.version) {
+    console.log(selfVersion());
+    return;
+  }
+  const provided = {
+    projectName: positionals[0],
+    theme: values.theme,
+    accent: values.accent,
+    apiUrl: values["api-url"],
+    worker: values.worker,
+    yes: values.yes
+  };
+  if (values.template !== void 0) {
+    if (!isTemplateId(values.template)) {
+      console.error(
+        pc2.red(`Unknown template "${values.template}". Choose one of: ${TEMPLATE_IDS.join(", ")}`)
+      );
+      process.exit(1);
+    }
+    provided.template = values.template;
+  }
+  const result = await runPrompts(provided);
+  const projectDir = resolve2(process.cwd(), result.projectName);
+  if (isNonEmptyDir(projectDir)) {
+    if (provided.yes) {
+      log.error(`Target directory "${result.projectName}" already exists and is not empty.`);
+      process.exit(1);
+    }
+    const proceed = await confirm2({
+      message: `Directory "${result.projectName}" is not empty. Write into it anyway?`,
+      initialValue: false
+    });
+    if (isCancel2(proceed) || !proceed) {
+      cancel2("Aborted.");
+      process.exit(0);
+    }
+  }
+  await scaffold({ ...result, projectDir, widgetVersion: `^${selfVersion()}` });
+  const pm = detectPm(values.pm);
+  const dev = pm === "npm" ? "npm run dev" : `${pm} dev`;
+  const steps = [`cd ${result.projectName}`, `${pm} install`, dev];
+  if (result.worker) {
+    steps.push(
+      "",
+      pc2.dim("# then deploy the worker"),
+      "cd worker",
+      `${pm} install`,
+      "npx wrangler kv namespace create RATE_LIMIT",
+      "npx wrangler secret put ANTHROPIC_API_KEY",
+      "npx wrangler deploy"
+    );
+  }
+  note(steps.join("\n"), "Next steps");
+  outro(pc2.green("Done! Happy building with Claudius."));
+}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "create-claudius",
+  "version": "1.8.0",
+  "description": "Scaffold a Claudius AI chat widget project in one command.",
+  "keywords": [
+    "claudius",
+    "create",
+    "create-claudius",
+    "scaffold",
+    "cli",
+    "chat-widget",
+    "claude",
+    "ai-chat"
+  ],
+  "author": "PAMulligan",
+  "license": "MIT",
+  "homepage": "https://claudius-docs.pages.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PMDevSolutions/Claudius.git",
+    "directory": "create-claudius"
+  },
+  "bugs": {
+    "url": "https://github.com/PMDevSolutions/Claudius/issues"
+  },
+  "type": "module",
+  "bin": {
+    "create-claudius": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "picocolors": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.8.0",
+    "vitest": "^4.1.0"
+  }
+}

package/templates/next/README.md

@@ -0,0 +1,23 @@
+# {{PROJECT_NAME}}
+
+A [Next.js](https://nextjs.org) (App Router) + TypeScript app using the
+[`claudius-chat-widget`](https://www.npmjs.com/package/claudius-chat-widget)
+component.
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The widget is rendered by a client component (`app/ClaudiusWidget.tsx`) because it
+relies on browser APIs:
+
+```tsx
+"use client";
+import { ChatWidget } from "claudius-chat-widget";
+import "claudius-chat-widget/style.css";
+```
+
+You need a running Claudius worker for the chat to respond. See the
+[worker setup guide](https://claudius-docs.pages.dev/deployment/worker/), or
+re-run the scaffolder with `--worker` to generate one.

package/templates/next/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+out
+dist
+*.local
+.DS_Store
+next-env.d.ts

package/templates/next/app/ClaudiusWidget.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ChatWidget } from "claudius-chat-widget";
+import "claudius-chat-widget/style.css";
+
+// ChatWidget uses browser APIs and React state, so it must run on the client.
+export function ClaudiusWidget() {
+  return (
+    <ChatWidget
+      apiUrl="{{API_URL}}"
+      title="{{PROJECT_NAME}}"
+      theme="{{THEME}}"
+      accentColor="{{ACCENT_COLOR}}"
+    />
+  );
+}

package/templates/next/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "{{PROJECT_NAME}}",
+  description: "A Claudius-powered app",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0 }}>{children}</body>
+    </html>
+  );
+}

package/templates/next/app/page.tsx

@@ -0,0 +1,24 @@
+import { ClaudiusWidget } from "./ClaudiusWidget";
+
+export default function Home() {
+  return (
+    <main
+      style={{
+        fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+        display: "grid",
+        placeItems: "center",
+        minHeight: "100vh",
+      }}
+    >
+      <div style={{ maxWidth: "32rem", padding: "2rem", textAlign: "center" }}>
+        <h1>{{PROJECT_NAME}}</h1>
+        <p>
+          Edit <code>app/ClaudiusWidget.tsx</code> to configure the widget. The launcher
+          is in the corner.
+        </p>
+      </div>
+
+      <ClaudiusWidget />
+    </main>
+  );
+}

package/templates/next/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/templates/next/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "claudius-chat-widget": "{{WIDGET_VERSION}}",
+    "next": "^14.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.0"
+  }
+}

package/templates/next/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "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/react/README.md

@@ -0,0 +1,23 @@
+# {{PROJECT_NAME}}
+
+A [Vite](https://vite.dev) + React + TypeScript app using the
+[`claudius-chat-widget`](https://www.npmjs.com/package/claudius-chat-widget)
+component.
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The widget lives in `src/App.tsx`:
+
+```tsx
+import { ChatWidget } from "claudius-chat-widget";
+import "claudius-chat-widget/style.css";
+
+<ChatWidget apiUrl="{{API_URL}}" theme="{{THEME}}" accentColor="{{ACCENT_COLOR}}" />;
+```
+
+You need a running Claudius worker for the chat to respond. See the
+[worker setup guide](https://claudius-docs.pages.dev/deployment/worker/), or
+re-run the scaffolder with `--worker` to generate one.

package/templates/react/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

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>{{PROJECT_NAME}}</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,23 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "claudius-chat-widget": "{{WIDGET_VERSION}}",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react/src/App.tsx

@@ -0,0 +1,31 @@
+import { ChatWidget } from "claudius-chat-widget";
+import "claudius-chat-widget/style.css";
+
+const pageStyle: React.CSSProperties = {
+  fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+  display: "grid",
+  placeItems: "center",
+  minHeight: "100vh",
+  margin: 0,
+};
+
+export function App() {
+  return (
+    <main style={pageStyle}>
+      <div style={{ maxWidth: "32rem", padding: "2rem", textAlign: "center" }}>
+        <h1>{{PROJECT_NAME}}</h1>
+        <p>
+          Edit <code>src/App.tsx</code> and configure the widget via its props. The
+          launcher is in the corner.
+        </p>
+      </div>
+
+      <ChatWidget
+        apiUrl="{{API_URL}}"
+        title="{{PROJECT_NAME}}"
+        theme="{{THEME}}"
+        accentColor="{{ACCENT_COLOR}}"
+      />
+    </main>
+  );
+}

package/templates/react/src/main.tsx

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

package/templates/react/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "useDefineForClassFields": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/react/vite.config.ts

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

package/templates/vanilla/README.md

@@ -0,0 +1,19 @@
+# {{PROJECT_NAME}}
+
+A static site with the [Claudius](https://claudius-docs.pages.dev) chat widget
+embedded via the CDN — no build step required for the widget itself.
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The widget is configured in `index.html` via `window.ClaudiusConfig`:
+
+- `apiUrl` — your deployed Claudius worker (currently `{{API_URL}}`)
+- `theme` — `{{THEME}}`
+- `accentColor` — `{{ACCENT_COLOR}}`
+
+You need a running Claudius worker for the chat to respond. See the
+[worker setup guide](https://claudius-docs.pages.dev/deployment/worker/), or
+re-run the scaffolder with `--worker` to generate one.

package/templates/vanilla/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/vanilla/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+    <!-- Claudius widget styles (CDN, auto-updates within v1.x) -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/PMDevSolutions/Claudius@1/cdn/claudius.css"
+    />
+    <style>
+      :root {
+        font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+        line-height: 1.5;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: #f8fafc;
+        color: #0f172a;
+      }
+      main {
+        max-width: 32rem;
+        padding: 2rem;
+        text-align: center;
+      }
+      code {
+        background: #e2e8f0;
+        padding: 0.15em 0.4em;
+        border-radius: 0.3em;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>{{PROJECT_NAME}}</h1>
+      <p>
+        Your Claudius chat widget is live in the corner. Configure it by editing
+        <code>window.ClaudiusConfig</code> in <code>index.html</code>.
+      </p>
+    </main>
+
+    <!-- Claudius Chat Widget -->
+    <script>
+      window.ClaudiusConfig = {
+        apiUrl: "{{API_URL}}",
+        title: "{{PROJECT_NAME}}",
+        theme: "{{THEME}}",
+        accentColor: "{{ACCENT_COLOR}}",
+      };
+    </script>
+    <script
+      src="https://cdn.jsdelivr.net/gh/PMDevSolutions/Claudius@1/cdn/claudius.iife.js"
+      defer
+    ></script>
+  </body>
+</html>

package/templates/vanilla/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0"
+  }
+}

package/templates/worker/.dev.vars.example

@@ -0,0 +1,3 @@
+# Copy this file to .dev.vars and fill in your key for local development:
+#   cp .dev.vars.example .dev.vars
+ANTHROPIC_API_KEY=

package/templates/worker/README.md

@@ -0,0 +1,34 @@
+# {{PROJECT_NAME}}-worker
+
+A minimal [Cloudflare Worker](https://workers.cloudflare.com) that keeps your
+Anthropic API key server-side and powers the Claudius widget. It exposes
+`POST /api/chat` and `GET /api/health`, with CORS and a small KV-backed rate limit.
+
+> This is a trimmed starter. For the full-featured worker (analytics, configurable
+> rate limits, richer error handling), see the
+> [Claudius worker](https://github.com/PMDevSolutions/Claudius/tree/main/worker).
+
+## Local development
+
+```bash
+pnpm install
+cp .dev.vars.example .dev.vars   # then add your ANTHROPIC_API_KEY
+pnpm dev                          # http://localhost:8787
+```
+
+## Deploy
+
+```bash
+# 1. Create the KV namespace and paste the id(s) into wrangler.toml
+npx wrangler kv namespace create RATE_LIMIT
+
+# 2. Store your API key as a secret
+npx wrangler secret put ANTHROPIC_API_KEY
+
+# 3. Deploy
+npx wrangler deploy
+```
+
+After deploying, set `ALLOWED_ORIGIN` (in `wrangler.toml` or the Cloudflare
+dashboard) to your site's origin, and point the widget's `apiUrl` at the worker
+URL.

package/templates/worker/_gitignore

@@ -0,0 +1,5 @@
+node_modules
+.wrangler
+dist
+.dev.vars
+.DS_Store

package/templates/worker/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{PROJECT_NAME}}-worker",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.52.0",
+    "hono": "^4.7.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240909.0",
+    "typescript": "^5.6.0",
+    "wrangler": "^4.6.0"
+  }
+}

package/templates/worker/src/index.ts

@@ -0,0 +1,92 @@
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import Anthropic from "@anthropic-ai/sdk";
+
+interface Env {
+  ANTHROPIC_API_KEY: string;
+  ALLOWED_ORIGIN: string;
+  RATE_LIMIT: KVNamespace;
+  CLAUDE_MODEL?: string;
+  MAX_TOKENS?: string;
+}
+
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+const DEFAULT_MODEL = "claude-haiku-4-5-20251001";
+const MAX_MESSAGE_LENGTH = 2000;
+const RATE_LIMIT_PER_MINUTE = 20;
+
+// Customize your assistant's personality and knowledge here.
+const SYSTEM_PROMPT =
+  "You are a helpful, concise assistant embedded on a website. " +
+  "Answer clearly and politely. If you don't know something, say so.";
+
+const app = new Hono<{ Bindings: Env }>();
+
+app.use(
+  "/api/*",
+  cors({
+    origin: (origin, c) => {
+      const allowed = (c.env.ALLOWED_ORIGIN || "http://localhost:5173")
+        .split(",")
+        .map((o: string) => o.trim())
+        .filter(Boolean);
+      if (origin?.startsWith("http://localhost:")) return origin;
+      return origin && allowed.includes(origin) ? origin : allowed[0];
+    },
+    allowMethods: ["POST", "OPTIONS"],
+    allowHeaders: ["Content-Type"],
+    maxAge: 86400,
+  }),
+);
+
+app.get("/api/health", (c) => c.json({ ok: true }));
+
+app.post("/api/chat", async (c) => {
+  let body: { messages?: ChatMessage[] };
+  try {
+    body = await c.req.json();
+  } catch {
+    return c.json({ error: "Invalid JSON body." }, 400);
+  }
+
+  const messages = body.messages;
+  if (!Array.isArray(messages) || messages.length === 0) {
+    return c.json({ error: "A non-empty messages array is required." }, 400);
+  }
+
+  // Minimal per-IP, per-minute rate limit backed by the RATE_LIMIT KV namespace.
+  const ip = c.req.header("cf-connecting-ip") ?? "unknown";
+  const bucket = `rl:${ip}:${Math.floor(Date.now() / 60000)}`;
+  const count = parseInt((await c.env.RATE_LIMIT.get(bucket)) ?? "0", 10);
+  if (count >= RATE_LIMIT_PER_MINUTE) {
+    return c.json({ error: "Too many requests. Please wait a minute." }, 429, {
+      "Retry-After": "60",
+    });
+  }
+  await c.env.RATE_LIMIT.put(bucket, String(count + 1), { expirationTtl: 120 });
+
+  const sanitized = messages.map((m) => ({
+    role: m.role,
+    content: String(m.content ?? "").slice(0, MAX_MESSAGE_LENGTH),
+  }));
+
+  try {
+    const client = new Anthropic({ apiKey: c.env.ANTHROPIC_API_KEY });
+    const response = await client.messages.create({
+      model: c.env.CLAUDE_MODEL ?? DEFAULT_MODEL,
+      max_tokens: c.env.MAX_TOKENS ? parseInt(c.env.MAX_TOKENS, 10) : 1024,
+      system: SYSTEM_PROMPT,
+      messages: sanitized,
+    });
+    const textBlock = response.content.find((block) => block.type === "text");
+    return c.json({ reply: textBlock && textBlock.type === "text" ? textBlock.text : "" });
+  } catch {
+    return c.json({ error: "AI service temporarily unavailable. Please try again." }, 502);
+  }
+});
+
+export default app;

package/templates/worker/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "types": ["@cloudflare/workers-types"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}

package/templates/worker/wrangler.toml

@@ -0,0 +1,18 @@
+name = "{{PROJECT_NAME}}-worker"
+main = "src/index.ts"
+compatibility_date = "2024-09-23"
+
+[vars]
+# Comma-separated list of origins allowed to call this worker.
+ALLOWED_ORIGIN = "http://localhost:5173"
+# Optional overrides:
+# CLAUDE_MODEL = "claude-haiku-4-5-20251001"
+# MAX_TOKENS = "1024"
+
+# Per-IP rate limiting is backed by this KV namespace. Create it with:
+#   npx wrangler kv namespace create RATE_LIMIT
+# then paste the returned id (and preview_id) below.
+[[kv_namespaces]]
+binding = "RATE_LIMIT"
+id = "placeholder"
+preview_id = "placeholder"