create-volt 0.50.0 → 0.51.0

package/CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.51.0] - 2026-06-30
+
+### Added
+- **Generate a hosted-AI token from the config.** The wizard's AI section has a
+  **Generate a free hosted token** button: it self-registers with the voltjs.com
+  gateway (new public, rate-limited `POST /api/register`) and writes
+  `VOLT_AI_TOKEN` to `.env` on Apply. One click to the free-capped/pay-as-you-go
+  hosted tier when you have no key of your own.
+
 ## [0.50.0] - 2026-06-30
 
 ### Added
@@ -666,6 +675,7 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.51.0]: https://github.com/MIR-2025/volt/releases/tag/v0.51.0
 [0.50.0]: https://github.com/MIR-2025/volt/releases/tag/v0.50.0
 [0.49.0]: https://github.com/MIR-2025/volt/releases/tag/v0.49.0
 [0.48.3]: https://github.com/MIR-2025/volt/releases/tag/v0.48.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/blog/server.js

@@ -344,6 +344,17 @@ function startSetup() {
       }
       return;
     }
+    // --- generate a free hosted-AI token from the gateway (self-service) ---
+    if (req.method === "POST" && p === "/setup/gen-token") {
+      res.setHeader("Content-Type", "application/json");
+      const env = readEnvFile();
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/register", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ app: env.SITE_NAME || "volt-app" }) })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
     // --- AI proxy for the in-config editor (RTEPro). Uses a local provider key
     // (BYO) when set; otherwise falls back to the voltjs.com gateway via
     // VOLT_AI_TOKEN (free-capped, then pay-as-you-go on the host's key). The

package/templates/blog/setup/setup.js

@@ -34,6 +34,7 @@ const state = signal({
   theme: current.THEME || "",
   aiProvider: current.AI_PROVIDER || "anthropic",
   aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
+  aiToken: current.VOLT_AI_TOKEN || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -82,6 +83,7 @@ function genEnv(s) {
     const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
     out.push(`${keyVar}=${clean(s.aiKey)}`);
   }
+  if (s.aiToken) out.push(`VOLT_AI_TOKEN=${clean(s.aiToken)}`); // hosted-tier token (used when no local key)
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -266,6 +268,8 @@ const aiSettings = () =>
       </select>
       ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
       ${field("API key", "aiKey", "sk-…")}
+      <div class="small text-muted mt-2 mb-1">— or — no key? Use the hosted tier (free, capped, then pay-as-you-go):</div>
+      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>`)}
     </div>
   </details>`;
 
@@ -304,6 +308,18 @@ async function buyCredits(amountUsd) {
     status("Checkout request failed.");
   }
 }
+async function genToken() {
+  status("Requesting a hosted token…");
+  try {
+    const r = await (await fetch("/setup/gen-token", { method: "POST" })).json();
+    if (r.ok && r.token) {
+      set({ aiToken: r.token });
+      status("Hosted token generated — click Apply to save it.");
+    } else status("Could not get a token: " + (r.error || "?"));
+  } catch {
+    status("Token request failed.");
+  }
+}
 const items = signal({ pages: [], posts: [] });
 const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
 let ed = null; // live RTEPro instance for the open editor

package/templates/default/server.js

@@ -344,6 +344,17 @@ function startSetup() {
       }
       return;
     }
+    // --- generate a free hosted-AI token from the gateway (self-service) ---
+    if (req.method === "POST" && p === "/setup/gen-token") {
+      res.setHeader("Content-Type", "application/json");
+      const env = readEnvFile();
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/register", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ app: env.SITE_NAME || "volt-app" }) })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
     // --- AI proxy for the in-config editor (RTEPro). Uses a local provider key
     // (BYO) when set; otherwise falls back to the voltjs.com gateway via
     // VOLT_AI_TOKEN (free-capped, then pay-as-you-go on the host's key). The

package/templates/default/setup/setup.js

@@ -34,6 +34,7 @@ const state = signal({
   theme: current.THEME || "",
   aiProvider: current.AI_PROVIDER || "anthropic",
   aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
+  aiToken: current.VOLT_AI_TOKEN || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -82,6 +83,7 @@ function genEnv(s) {
     const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
     out.push(`${keyVar}=${clean(s.aiKey)}`);
   }
+  if (s.aiToken) out.push(`VOLT_AI_TOKEN=${clean(s.aiToken)}`); // hosted-tier token (used when no local key)
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -266,6 +268,8 @@ const aiSettings = () =>
       </select>
       ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
       ${field("API key", "aiKey", "sk-…")}
+      <div class="small text-muted mt-2 mb-1">— or — no key? Use the hosted tier (free, capped, then pay-as-you-go):</div>
+      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>`)}
     </div>
   </details>`;
 
@@ -304,6 +308,18 @@ async function buyCredits(amountUsd) {
     status("Checkout request failed.");
   }
 }
+async function genToken() {
+  status("Requesting a hosted token…");
+  try {
+    const r = await (await fetch("/setup/gen-token", { method: "POST" })).json();
+    if (r.ok && r.token) {
+      set({ aiToken: r.token });
+      status("Hosted token generated — click Apply to save it.");
+    } else status("Could not get a token: " + (r.error || "?"));
+  } catch {
+    status("Token request failed.");
+  }
+}
 const items = signal({ pages: [], posts: [] });
 const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
 let ed = null; // live RTEPro instance for the open editor

package/templates/docs/server.js

@@ -344,6 +344,17 @@ function startSetup() {
       }
       return;
     }
+    // --- generate a free hosted-AI token from the gateway (self-service) ---
+    if (req.method === "POST" && p === "/setup/gen-token") {
+      res.setHeader("Content-Type", "application/json");
+      const env = readEnvFile();
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/register", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ app: env.SITE_NAME || "volt-app" }) })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
     // --- AI proxy for the in-config editor (RTEPro). Uses a local provider key
     // (BYO) when set; otherwise falls back to the voltjs.com gateway via
     // VOLT_AI_TOKEN (free-capped, then pay-as-you-go on the host's key). The

package/templates/docs/setup/setup.js

@@ -34,6 +34,7 @@ const state = signal({
   theme: current.THEME || "",
   aiProvider: current.AI_PROVIDER || "anthropic",
   aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
+  aiToken: current.VOLT_AI_TOKEN || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -82,6 +83,7 @@ function genEnv(s) {
     const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
     out.push(`${keyVar}=${clean(s.aiKey)}`);
   }
+  if (s.aiToken) out.push(`VOLT_AI_TOKEN=${clean(s.aiToken)}`); // hosted-tier token (used when no local key)
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -266,6 +268,8 @@ const aiSettings = () =>
       </select>
       ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
       ${field("API key", "aiKey", "sk-…")}
+      <div class="small text-muted mt-2 mb-1">— or — no key? Use the hosted tier (free, capped, then pay-as-you-go):</div>
+      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>`)}
     </div>
   </details>`;
 
@@ -304,6 +308,18 @@ async function buyCredits(amountUsd) {
     status("Checkout request failed.");
   }
 }
+async function genToken() {
+  status("Requesting a hosted token…");
+  try {
+    const r = await (await fetch("/setup/gen-token", { method: "POST" })).json();
+    if (r.ok && r.token) {
+      set({ aiToken: r.token });
+      status("Hosted token generated — click Apply to save it.");
+    } else status("Could not get a token: " + (r.error || "?"));
+  } catch {
+    status("Token request failed.");
+  }
+}
 const items = signal({ pages: [], posts: [] });
 const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
 let ed = null; // live RTEPro instance for the open editor

package/templates/starter/server.js

@@ -370,6 +370,17 @@ function startSetup() {
       }
       return;
     }
+    // --- generate a free hosted-AI token from the gateway (self-service) ---
+    if (req.method === "POST" && p === "/setup/gen-token") {
+      res.setHeader("Content-Type", "application/json");
+      const env = readEnvFile();
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/register", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ app: env.SITE_NAME || "volt-app" }) })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
     // --- AI proxy for the in-config editor (RTEPro). Uses a local provider key
     // (BYO) when set; otherwise falls back to the voltjs.com gateway via
     // VOLT_AI_TOKEN (free-capped, then pay-as-you-go on the host's key). The

package/templates/starter/setup/setup.js

@@ -34,6 +34,7 @@ const state = signal({
   theme: current.THEME || "",
   aiProvider: current.AI_PROVIDER || "anthropic",
   aiKey: current.ANTHROPIC_API_KEY || current.OPENAI_API_KEY || current.GEMINI_API_KEY || "",
+  aiToken: current.VOLT_AI_TOKEN || "",
 });
 const set = (patch) => state({ ...state(), ...patch });
 const toggle = (n) => state({ ...state(), addons: { ...state().addons, [n]: !state().addons[n] } });
@@ -82,6 +83,7 @@ function genEnv(s) {
     const keyVar = { anthropic: "ANTHROPIC_API_KEY", openai: "OPENAI_API_KEY", gemini: "GEMINI_API_KEY" }[s.aiProvider] || "ANTHROPIC_API_KEY";
     out.push(`${keyVar}=${clean(s.aiKey)}`);
   }
+  if (s.aiToken) out.push(`VOLT_AI_TOKEN=${clean(s.aiToken)}`); // hosted-tier token (used when no local key)
   if (eff.includes("db")) {
     out.push(`DB_DRIVER=${clean(s.dbDriver)}`);
     if (s.dbDriver === "mongodb") {
@@ -266,6 +268,8 @@ const aiSettings = () =>
       </select>
       ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
       ${field("API key", "aiKey", "sk-…")}
+      <div class="small text-muted mt-2 mb-1">— or — no key? Use the hosted tier (free, capped, then pay-as-you-go):</div>
+      ${() => (state().aiToken ? html`<div class="small">Hosted token: <code>${state().aiToken.slice(0, 14)}…</code> <button class="btn btn-sm btn-link p-0 ms-1" onclick=${() => set({ aiToken: "" })}>clear</button></div>` : html`<button class="btn btn-sm btn-outline-secondary" onclick=${genToken}>Generate a free hosted token</button>`)}
     </div>
   </details>`;
 
@@ -304,6 +308,18 @@ async function buyCredits(amountUsd) {
     status("Checkout request failed.");
   }
 }
+async function genToken() {
+  status("Requesting a hosted token…");
+  try {
+    const r = await (await fetch("/setup/gen-token", { method: "POST" })).json();
+    if (r.ok && r.token) {
+      set({ aiToken: r.token });
+      status("Hosted token generated — click Apply to save it.");
+    } else status("Could not get a token: " + (r.error || "?"));
+  } catch {
+    status("Token request failed.");
+  }
+}
 const items = signal({ pages: [], posts: [] });
 const editing = signal(null); // { type, slug, title, isNew } — set only on open/save/close
 let ed = null; // live RTEPro instance for the open editor