create-byoky-app 0.4.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 byoky contributors
+
+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/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import * as fs from "fs";
+import * as path from "path";
+import * as readline from "readline";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var TEMPLATES = [
+  {
+    id: "chat",
+    name: "AI Chat (Next.js)",
+    description: "Multi-provider chat with streaming"
+  },
+  {
+    id: "multi-provider",
+    name: "Multi-Provider (Vite)",
+    description: "Use multiple AI providers with fallback"
+  },
+  {
+    id: "backend-relay",
+    name: "Backend Relay (Express)",
+    description: "Server-side LLM calls through user's wallet"
+  }
+];
+function printBanner() {
+  console.log();
+  console.log("  \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557");
+  console.log("  \u2551   create-byoky-app           \u2551");
+  console.log("  \u2551   Build AI apps in minutes   \u2551");
+  console.log("  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D");
+  console.log();
+}
+function ask(rl, question) {
+  return new Promise((resolve2) => {
+    rl.question(question, (answer) => {
+      resolve2(answer.trim());
+    });
+  });
+}
+function isValidProjectName(name) {
+  return /^[a-zA-Z0-9_-]+$/.test(name) && name.length > 0;
+}
+function getTemplatesDir() {
+  const fromDist = path.resolve(__dirname, "..", "templates");
+  if (fs.existsSync(fromDist)) return fromDist;
+  const fromSrc = path.resolve(__dirname, "..", "..", "templates");
+  if (fs.existsSync(fromSrc)) return fromSrc;
+  throw new Error("Could not find templates directory");
+}
+function copyTemplateDir(srcDir, destDir, projectName) {
+  const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name);
+    const destName = entry.name.endsWith(".tpl") ? entry.name.slice(0, -4) : entry.name;
+    const destPath = path.join(destDir, destName);
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyTemplateDir(srcPath, destPath, projectName);
+    } else {
+      let content = fs.readFileSync(srcPath, "utf-8");
+      content = content.replaceAll("{{PROJECT_NAME}}", projectName);
+      fs.writeFileSync(destPath, content, "utf-8");
+    }
+  }
+}
+async function main() {
+  printBanner();
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  try {
+    let projectName = process.argv[2];
+    if (!projectName) {
+      projectName = await ask(rl, "  Project name: ");
+    }
+    if (!projectName) {
+      console.error("\n  Error: Project name is required.\n");
+      process.exit(1);
+    }
+    if (!isValidProjectName(projectName)) {
+      console.error("\n  Error: Project name can only contain letters, numbers, hyphens, and underscores.\n");
+      process.exit(1);
+    }
+    const targetDir = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(targetDir)) {
+      console.error(`
+  Error: Directory "${projectName}" already exists.
+`);
+      process.exit(1);
+    }
+    console.log("\n  Choose a template:\n");
+    for (let i = 0; i < TEMPLATES.length; i++) {
+      const t = TEMPLATES[i];
+      console.log(`    ${i + 1}. ${t.name}`);
+      console.log(`       ${t.description}
+`);
+    }
+    const choice = await ask(rl, "  Template (1-3): ");
+    const choiceNum = parseInt(choice, 10);
+    if (isNaN(choiceNum) || choiceNum < 1 || choiceNum > TEMPLATES.length) {
+      console.error("\n  Error: Invalid template choice.\n");
+      process.exit(1);
+    }
+    const template = TEMPLATES[choiceNum - 1];
+    const templateId = template.id;
+    console.log(`
+  Creating ${projectName} with ${template.name}...
+`);
+    const templatesDir = getTemplatesDir();
+    const templateDir = path.join(templatesDir, templateId);
+    if (!fs.existsSync(templateDir)) {
+      console.error(`
+  Error: Template "${templateId}" not found.
+`);
+      process.exit(1);
+    }
+    fs.mkdirSync(targetDir, { recursive: true });
+    try {
+      copyTemplateDir(templateDir, targetDir, projectName);
+    } catch (err) {
+      fs.rmSync(targetDir, { recursive: true, force: true });
+      throw err;
+    }
+    console.log(`  \u2713 Created ${projectName}!`);
+    console.log();
+    console.log("  Next steps:");
+    console.log(`    cd ${projectName}`);
+    console.log("    npm install");
+    console.log("    npm run dev");
+    console.log();
+    console.log("  Docs: https://byoky.com/dev");
+    console.log();
+  } catch (err) {
+    if (err instanceof Error) {
+      console.error(`
+  Error: ${err.message}
+`);
+    } else {
+      console.error("\n  An unexpected error occurred.\n");
+    }
+    process.exit(1);
+  } finally {
+    rl.close();
+  }
+}
+main();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-byoky-app",
+  "version": "0.4.10",
+  "description": "Scaffold a new app powered by Byoky",
+  "type": "module",
+  "bin": {
+    "create-byoky-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MichaelLod/byoky.git",
+    "directory": "packages/create-byoky-app"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/templates/backend-relay/README.md.tpl

@@ -0,0 +1,37 @@
+# {{PROJECT_NAME}}
+
+Backend relay demo powered by [Byoky](https://byoky.com) — make server-side LLM calls through the user's wallet.
+
+## Setup
+
+1. Install the [Byoky wallet extension](https://byoky.com) and add your API key(s)
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Start both the server and client:
+
+```bash
+npm run dev
+```
+
+This starts:
+- **Express server** on [http://localhost:3001](http://localhost:3001) (API + WebSocket relay)
+- **Vite dev server** on [http://localhost:5173](http://localhost:5173) (frontend)
+
+4. Open the frontend, click **Connect Wallet**, and try generating a response
+
+## How it works
+
+1. The browser connects to the Byoky wallet using `@byoky/sdk`
+2. `session.createRelay(wsUrl)` opens a WebSocket to the Express server
+3. The server uses `ByokyServer` to accept the connection and get a `ByokyClient`
+4. `client.createFetch(providerId)` returns a fetch function that proxies API calls back through the user's wallet
+5. The server makes LLM calls without ever seeing the user's API key
+
+## Learn more
+
+- [Byoky Documentation](https://byoky.com/dev)
+- [Express Documentation](https://expressjs.com)

package/templates/backend-relay/client/index.html.tpl

@@ -0,0 +1,13 @@
+<!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>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/templates/backend-relay/client/main.ts.tpl

@@ -0,0 +1,155 @@
+import { Byoky, isExtensionInstalled, getStoreUrl } from '@byoky/sdk';
+import type { ByokySession } from '@byoky/sdk';
+import type { RelayConnection } from '@byoky/sdk';
+
+const SERVER_URL = 'http://localhost:3001';
+const WS_RELAY_URL = 'ws://localhost:3001/ws/relay';
+
+const app = document.getElementById('app')!;
+const byoky = new Byoky();
+let session: ByokySession | null = null;
+let relay: RelayConnection | null = null;
+
+function render(): void {
+  if (!session) {
+    renderConnect();
+  } else {
+    renderDashboard();
+  }
+}
+
+function renderConnect(): void {
+  app.innerHTML = `
+    <h1>{{PROJECT_NAME}}</h1>
+    <p class="subtitle">Server-side LLM calls through your Byoky wallet</p>
+    <button id="connect-btn">Connect Wallet</button>
+    <div id="error"></div>
+  `;
+
+  document.getElementById('connect-btn')!.addEventListener('click', async () => {
+    const btn = document.getElementById('connect-btn') as HTMLButtonElement;
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    const errorEl = document.getElementById('error')!;
+    errorEl.innerHTML = '';
+
+    try {
+      session = await byoky.connect({
+        providers: [{ id: 'anthropic', required: false }],
+        modal: true,
+      });
+
+      // Open a relay to the backend server
+      relay = session.createRelay(WS_RELAY_URL);
+
+      session.onDisconnect(() => {
+        session = null;
+        relay = null;
+        render();
+      });
+
+      render();
+    } catch (err) {
+      if (!isExtensionInstalled()) {
+        const url = getStoreUrl();
+        errorEl.innerHTML = `<p class="error">Byoky wallet not found.${
+          url ? ` <a href="${url}" target="_blank" style="color:#818cf8">Install extension</a>` : ''
+        }</p>`;
+      } else {
+        errorEl.innerHTML = `<p class="error">${err instanceof Error ? err.message : 'Connection failed'}</p>`;
+      }
+      btn.disabled = false;
+      btn.textContent = 'Connect Wallet';
+    }
+  });
+}
+
+function renderDashboard(): void {
+  if (!session) return;
+
+  const providers = Object.entries(session.providers)
+    .filter(([, p]) => p.available)
+    .map(([id]) => id);
+
+  app.innerHTML = `
+    <h1>{{PROJECT_NAME}}</h1>
+    <div class="status-bar">
+      <div class="status-dot"></div>
+      <span>Wallet connected &mdash; relay active</span>
+      <button id="disconnect-btn" style="margin-left:auto;background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:6px 12px;font-size:0.85rem;">Disconnect</button>
+    </div>
+
+    <div class="card">
+      <h2>Server-Side Generation</h2>
+      <p class="info" style="margin-bottom:12px">
+        Your prompt is sent to the Express server, which makes the LLM call through the relay
+        using provider: <strong>${providers[0] ?? 'none'}</strong>
+      </p>
+      <textarea id="prompt" placeholder="Enter a prompt...">Explain what a backend relay is in two sentences.</textarea>
+      <button id="generate-btn">Generate on Server</button>
+      <div id="response"></div>
+    </div>
+
+    <div class="card">
+      <h2>How it works</h2>
+      <p class="info">1. Browser connects to Byoky wallet via the SDK</p>
+      <p class="info">2. <code>session.createRelay()</code> opens a WebSocket to your Express server</p>
+      <p class="info">3. The server receives a <code>ByokyClient</code> with <code>createFetch()</code></p>
+      <p class="info">4. Server-side fetch calls are proxied through the wallet — keys never leave the extension</p>
+    </div>
+  `;
+
+  document.getElementById('disconnect-btn')!.addEventListener('click', () => {
+    relay?.close();
+    session?.disconnect();
+    session = null;
+    relay = null;
+    render();
+  });
+
+  document.getElementById('generate-btn')!.addEventListener('click', async () => {
+    const btn = document.getElementById('generate-btn') as HTMLButtonElement;
+    const prompt = (document.getElementById('prompt') as HTMLTextAreaElement).value.trim();
+    const responseEl = document.getElementById('response')!;
+
+    if (!prompt) return;
+    btn.disabled = true;
+    btn.textContent = 'Generating...';
+    responseEl.innerHTML = '<div class="response-box">Waiting for server...</div>';
+
+    try {
+      const res = await fetch(`${SERVER_URL}/api/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionId: session?.sessionKey,
+          prompt,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error ?? `HTTP ${res.status}`);
+      }
+
+      responseEl.innerHTML = `
+        <div class="response-box">${escapeHtml(data.content)}</div>
+        <p class="info">Provider: ${data.provider}</p>
+      `;
+    } catch (err) {
+      responseEl.innerHTML = `<p class="error">${err instanceof Error ? escapeHtml(err.message) : 'Request failed'}</p>`;
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Generate on Server';
+    }
+  });
+}
+
+function escapeHtml(str: string): string {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+render();

package/templates/backend-relay/client/style.css.tpl

@@ -0,0 +1,137 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg: #0a0a0a;
+  --bg-secondary: #141414;
+  --bg-tertiary: #1e1e1e;
+  --text: #e0e0e0;
+  --text-muted: #888;
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+  --border: #2a2a2a;
+  --success: #4ade80;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  padding: 48px 24px;
+}
+
+#app {
+  width: 100%;
+  max-width: 640px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: var(--text-muted);
+  margin-bottom: 32px;
+}
+
+button {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 24px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+button:hover {
+  background: var(--accent-hover);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--success);
+}
+
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 16px;
+}
+
+.card h2 {
+  font-size: 1.1rem;
+  margin-bottom: 12px;
+}
+
+textarea {
+  width: 100%;
+  background: var(--bg-tertiary);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+.response-box {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  margin-top: 12px;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  color: var(--text-muted);
+}
+
+.error {
+  color: #f87171;
+  font-size: 0.9rem;
+  margin-top: 12px;
+}
+
+.info {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin-top: 8px;
+}

package/templates/backend-relay/package.json.tpl

@@ -0,0 +1,25 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "tsx watch server/index.ts",
+    "dev:client": "vite client",
+    "build:client": "vite build client"
+  },
+  "dependencies": {
+    "@byoky/sdk": "^0.4.9",
+    "express": "^4.21.0",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/ws": "^8.5.0",
+    "concurrently": "^9.1.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}