create-byoky-app 0.4.10

package/templates/backend-relay/server/index.ts.tpl

@@ -0,0 +1,150 @@
+import express from 'express';
+import { createServer } from 'node:http';
+import { WebSocketServer, WebSocket } from 'ws';
+import { ByokyServer } from '@byoky/sdk/server';
+import type { ByokyClient } from '@byoky/sdk/server';
+
+const app = express();
+app.use(express.json());
+
+// CORS for local development
+app.use((_req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  next();
+});
+
+const server = createServer(app);
+const wss = new WebSocketServer({ server, path: '/ws/relay' });
+const byokyServer = new ByokyServer();
+
+// Track connected clients
+const clients = new Map<string, ByokyClient>();
+
+wss.on('connection', async (ws: WebSocket) => {
+  console.log('[relay] New WebSocket connection');
+
+  try {
+    const client = await byokyServer.handleConnection(ws);
+    clients.set(client.sessionId, client);
+    console.log(`[relay] Client connected: ${client.sessionId}`);
+
+    const availableProviders = Object.entries(client.providers)
+      .filter(([, p]) => p.available)
+      .map(([id]) => id);
+    console.log(`[relay] Available providers: ${availableProviders.join(', ') || 'none'}`);
+
+    client.onClose(() => {
+      clients.delete(client.sessionId);
+      console.log(`[relay] Client disconnected: ${client.sessionId}`);
+    });
+  } catch (err) {
+    console.error('[relay] Connection failed:', err instanceof Error ? err.message : err);
+  }
+});
+
+// Health check
+app.get('/api/health', (_req, res) => {
+  res.json({
+    ok: true,
+    clients: clients.size,
+  });
+});
+
+// Example: Make an LLM call through the relay
+app.post('/api/generate', async (req, res) => {
+  const { sessionId, prompt } = req.body as { sessionId?: string; prompt?: string };
+
+  if (!sessionId || !prompt) {
+    res.status(400).json({ error: 'Missing sessionId or prompt' });
+    return;
+  }
+
+  const client = clients.get(sessionId);
+  if (!client || !client.connected) {
+    res.status(404).json({ error: 'Client not connected' });
+    return;
+  }
+
+  // Find the first available provider
+  const providerId = Object.entries(client.providers)
+    .find(([, p]) => p.available)?.[0];
+
+  if (!providerId) {
+    res.status(400).json({ error: 'No providers available' });
+    return;
+  }
+
+  try {
+    const proxyFetch = client.createFetch(providerId);
+
+    let url: string;
+    let headers: Record<string, string>;
+    let body: string;
+
+    if (providerId === 'anthropic') {
+      url = 'https://api.anthropic.com/v1/messages';
+      headers = {
+        'Content-Type': 'application/json',
+        'x-api-key': 'byoky',
+        'anthropic-version': '2023-06-01',
+      };
+      body = JSON.stringify({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 256,
+        messages: [{ role: 'user', content: prompt }],
+      });
+    } else if (providerId === 'openai') {
+      url = 'https://api.openai.com/v1/chat/completions';
+      headers = {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer byoky',
+      };
+      body = JSON.stringify({
+        model: 'gpt-4o-mini',
+        max_tokens: 256,
+        messages: [{ role: 'user', content: prompt }],
+      });
+    } else {
+      url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent';
+      headers = { 'Content-Type': 'application/json' };
+      body = JSON.stringify({
+        contents: [{ parts: [{ text: prompt }] }],
+        generationConfig: { maxOutputTokens: 256 },
+      });
+    }
+
+    const response = await proxyFetch(url, { method: 'POST', headers, body });
+
+    if (!response.ok) {
+      const text = await response.text();
+      res.status(response.status).json({ error: text.slice(0, 500) });
+      return;
+    }
+
+    const data = await response.json();
+
+    let content: string;
+    if (providerId === 'anthropic') {
+      content = data.content?.[0]?.text ?? '';
+    } else if (providerId === 'openai') {
+      content = data.choices?.[0]?.message?.content ?? '';
+    } else {
+      content = data.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
+    }
+
+    res.json({ provider: providerId, content });
+  } catch (err) {
+    res.status(500).json({
+      error: err instanceof Error ? err.message : 'Internal server error',
+    });
+  }
+});
+
+const PORT = parseInt(process.env.PORT ?? '3001', 10);
+
+server.listen(PORT, () => {
+  console.log(`[server] Listening on http://localhost:${PORT}`);
+  console.log(`[server] WebSocket relay at ws://localhost:${PORT}/ws/relay`);
+});

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

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  },
+  "include": ["server", "client"]
+}

package/templates/chat/README.md.tpl

@@ -0,0 +1,28 @@
+# {{PROJECT_NAME}}
+
+AI chat app powered by [Byoky](https://byoky.com) — use your own API keys without exposing them to websites.
+
+## Setup
+
+1. Install the [Byoky wallet extension](https://byoky.com) and add your Anthropic API key
+2. Install dependencies and start the dev server:
+
+```bash
+npm install
+npm run dev
+```
+
+3. Open [http://localhost:3000](http://localhost:3000)
+4. Click **Connect Wallet** and approve the connection
+5. Start chatting
+
+## How it works
+
+- The app uses `@byoky/sdk` to connect to your Byoky wallet
+- API calls are proxied through the wallet extension — your API key never leaves the extension
+- Streaming responses are powered by the Anthropic SDK with a custom `fetch` from Byoky
+
+## Learn more
+
+- [Byoky Documentation](https://byoky.com/dev)
+- [Next.js Documentation](https://nextjs.org/docs)

package/templates/chat/next.config.ts.tpl

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/chat/package.json.tpl

@@ -0,0 +1,22 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.39.0",
+    "@byoky/sdk": "^0.4.9",
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}

package/templates/chat/src/app/globals.css.tpl

@@ -0,0 +1,29 @@
+*,
+*::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;
+  --user-bg: #1a1a2e;
+  --assistant-bg: #141414;
+}
+
+html,
+body {
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}

package/templates/chat/src/app/layout.tsx.tpl

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
+
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'AI chat powered by Byoky',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/chat/src/app/page.tsx.tpl

@@ -0,0 +1,346 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import Anthropic from '@anthropic-ai/sdk';
+import { Byoky, isExtensionInstalled, getStoreUrl } from '@byoky/sdk';
+import type { ByokySession } from '@byoky/sdk';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+const byoky = new Byoky();
+
+export default function Home() {
+  const [session, setSession] = useState<ByokySession | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  const handleConnect = async () => {
+    setError(null);
+    setIsConnecting(true);
+    try {
+      const s = await byoky.connect({
+        providers: [{ id: 'anthropic', required: true }],
+        modal: true,
+      });
+      setSession(s);
+      s.onDisconnect(() => {
+        setSession(null);
+        setError('Wallet disconnected');
+      });
+    } catch (err) {
+      if (!isExtensionInstalled()) {
+        const url = getStoreUrl();
+        setError(
+          url
+            ? 'Byoky wallet not found. Install the extension to continue.'
+            : 'Byoky wallet not found.'
+        );
+      } else if (err instanceof Error) {
+        setError(err.message);
+      }
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleSend = async () => {
+    if (!session || !input.trim() || isStreaming) return;
+
+    const userMessage: Message = { role: 'user', content: input.trim() };
+    const updatedMessages = [...messages, userMessage];
+    setMessages(updatedMessages);
+    setInput('');
+    setIsStreaming(true);
+    setError(null);
+
+    try {
+      const proxyFetch = session.createFetch('anthropic');
+      const client = new Anthropic({
+        apiKey: 'byoky',
+        fetch: proxyFetch,
+        dangerouslyAllowBrowser: true,
+      });
+
+      const assistantMessage: Message = { role: 'assistant', content: '' };
+      setMessages([...updatedMessages, assistantMessage]);
+
+      const stream = client.messages.stream({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 1024,
+        messages: updatedMessages.map((m) => ({
+          role: m.role,
+          content: m.content,
+        })),
+      });
+
+      for await (const event of stream) {
+        if (
+          event.type === 'content_block_delta' &&
+          event.delta.type === 'text_delta'
+        ) {
+          assistantMessage.content += event.delta.text;
+          setMessages((prev) => [
+            ...prev.slice(0, -1),
+            { ...assistantMessage },
+          ]);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send message');
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  if (!session) {
+    return (
+      <div style={styles.connectContainer}>
+        <h1 style={styles.title}>{{PROJECT_NAME}}</h1>
+        <p style={styles.subtitle}>AI chat powered by your own API keys</p>
+        <button
+          onClick={handleConnect}
+          disabled={isConnecting}
+          style={{
+            ...styles.connectButton,
+            opacity: isConnecting ? 0.6 : 1,
+          }}
+        >
+          {isConnecting ? 'Connecting...' : 'Connect Wallet'}
+        </button>
+        {error && <p style={styles.error}>{error}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.chatContainer}>
+      <header style={styles.header}>
+        <h1 style={styles.headerTitle}>{{PROJECT_NAME}}</h1>
+        <div style={styles.headerRight}>
+          <span style={styles.status}>Connected</span>
+          <button
+            onClick={() => {
+              session.disconnect();
+              setSession(null);
+              setMessages([]);
+            }}
+            style={styles.disconnectButton}
+          >
+            Disconnect
+          </button>
+        </div>
+      </header>
+
+      <div style={styles.messagesContainer}>
+        {messages.length === 0 && (
+          <div style={styles.emptyState}>
+            <p style={styles.emptyText}>Send a message to start chatting</p>
+          </div>
+        )}
+        {messages.map((msg, i) => (
+          <div
+            key={i}
+            style={{
+              ...styles.message,
+              backgroundColor:
+                msg.role === 'user'
+                  ? 'var(--user-bg)'
+                  : 'var(--assistant-bg)',
+            }}
+          >
+            <div style={styles.messageRole}>
+              {msg.role === 'user' ? 'You' : 'Assistant'}
+            </div>
+            <div style={styles.messageContent}>{msg.content}</div>
+          </div>
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div style={styles.inputContainer}>
+        {error && <p style={styles.inlineError}>{error}</p>}
+        <div style={styles.inputRow}>
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a message..."
+            rows={1}
+            style={styles.textarea}
+          />
+          <button
+            onClick={handleSend}
+            disabled={isStreaming || !input.trim()}
+            style={{
+              ...styles.sendButton,
+              opacity: isStreaming || !input.trim() ? 0.5 : 1,
+            }}
+          >
+            {isStreaming ? '...' : 'Send'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  connectContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+    gap: '16px',
+  },
+  title: {
+    fontSize: '2rem',
+    fontWeight: 700,
+  },
+  subtitle: {
+    color: 'var(--text-muted)',
+    fontSize: '1.1rem',
+    marginBottom: '8px',
+  },
+  connectButton: {
+    background: 'var(--accent)',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '8px',
+    padding: '12px 32px',
+    fontSize: '1rem',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
+  error: {
+    color: '#f87171',
+    fontSize: '0.9rem',
+    maxWidth: '400px',
+    textAlign: 'center' as const,
+  },
+  chatContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    maxWidth: '800px',
+    margin: '0 auto',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px 24px',
+    borderBottom: '1px solid var(--border)',
+  },
+  headerTitle: {
+    fontSize: '1.1rem',
+    fontWeight: 600,
+  },
+  headerRight: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+  },
+  status: {
+    color: '#4ade80',
+    fontSize: '0.85rem',
+  },
+  disconnectButton: {
+    background: 'transparent',
+    color: 'var(--text-muted)',
+    border: '1px solid var(--border)',
+    borderRadius: '6px',
+    padding: '6px 12px',
+    fontSize: '0.85rem',
+    cursor: 'pointer',
+  },
+  messagesContainer: {
+    flex: 1,
+    overflow: 'auto',
+    padding: '24px',
+  },
+  emptyState: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
+  emptyText: {
+    color: 'var(--text-muted)',
+  },
+  message: {
+    padding: '16px 20px',
+    borderRadius: '8px',
+    marginBottom: '12px',
+  },
+  messageRole: {
+    fontSize: '0.8rem',
+    fontWeight: 600,
+    color: 'var(--text-muted)',
+    marginBottom: '6px',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+  },
+  messageContent: {
+    lineHeight: 1.6,
+    whiteSpace: 'pre-wrap' as const,
+  },
+  inputContainer: {
+    padding: '16px 24px',
+    borderTop: '1px solid var(--border)',
+  },
+  inlineError: {
+    color: '#f87171',
+    fontSize: '0.85rem',
+    marginBottom: '8px',
+  },
+  inputRow: {
+    display: 'flex',
+    gap: '8px',
+  },
+  textarea: {
+    flex: 1,
+    background: 'var(--bg-tertiary)',
+    color: 'var(--text)',
+    border: '1px solid var(--border)',
+    borderRadius: '8px',
+    padding: '12px 16px',
+    fontSize: '1rem',
+    resize: 'none' as const,
+    outline: 'none',
+    fontFamily: 'inherit',
+  },
+  sendButton: {
+    background: 'var(--accent)',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '8px',
+    padding: '12px 24px',
+    fontSize: '1rem',
+    fontWeight: 600,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap' as const,
+  },
+};

package/templates/chat/tsconfig.json.tpl

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/multi-provider/README.md.tpl

@@ -0,0 +1,29 @@
+# {{PROJECT_NAME}}
+
+Multi-provider demo powered by [Byoky](https://byoky.com) — use Anthropic, OpenAI, and Gemini through a single wallet.
+
+## Setup
+
+1. Install the [Byoky wallet extension](https://byoky.com) and add your API keys
+2. Install dependencies and start the dev server:
+
+```bash
+npm install
+npm run dev
+```
+
+3. Open [http://localhost:5173](http://localhost:5173)
+4. Click **Connect Wallet** and approve the connection
+5. Test each connected provider
+
+## How it works
+
+- The app requests access to all three providers (all optional)
+- Byoky shows which providers the user has configured
+- Each provider gets its own `createFetch()` that proxies API calls through the wallet
+- API keys never leave the extension
+
+## Learn more
+
+- [Byoky Documentation](https://byoky.com/dev)
+- [Vite Documentation](https://vite.dev)

package/templates/multi-provider/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="/src/style.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>