create-fedi-app 0.1.0

package/dist/templates/modules/ai-chat-gated/components/ai/GatedChat.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChatMessage } from './ChatMessage';
+import { PaymentGate, type TChatPaymentProof } from './PaymentGate';
+
+const DEFAULT_SATS = 10;
+
+function getClientSatsPerMessage(): number {
+  const raw = process.env.NEXT_PUBLIC_SATS_PER_MESSAGE ?? String(DEFAULT_SATS);
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_SATS;
+}
+
+/**
+ * Full pay-per-message AI chat: message list, input, Lightning payment gate, streaming replies.
+ */
+export function GatedChat() {
+  const satsPerMessage = getClientSatsPerMessage();
+  const [input, setInput] = useState('');
+  const [pendingText, setPendingText] = useState<string | null>(null);
+  const [gateError, setGateError] = useState<string | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const transport = useMemo(
+    () => new DefaultChatTransport({ api: '/api/chat' }),
+    [],
+  );
+
+  const { messages, sendMessage, status, error } = useChat({ transport });
+
+  const isStreaming = status === 'streaming' || status === 'submitted';
+  const canSend = input.trim().length > 0 && !isStreaming && pendingText === null;
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+  }, [messages, isStreaming]);
+
+  async function handlePaymentConfirmed(proof: TChatPaymentProof) {
+    const text = pendingText ?? input.trim();
+    if (!text) return;
+
+    setGateError(null);
+    setInput('');
+    setPendingText(null);
+
+    await sendMessage(
+      { text },
+      {
+        body: {
+          paymentId: proof.paymentId,
+          preimage: proof.preimage,
+        },
+      },
+    );
+  }
+
+  function handlePrepareSend() {
+    const text = input.trim();
+    if (!text || isStreaming) return;
+    setGateError(null);
+    setPendingText(text);
+  }
+
+  function handleCancelPending() {
+    setPendingText(null);
+    setGateError(null);
+  }
+
+  return (
+    <div className="flex min-h-[420px] flex-col gap-4">
+      <div
+        ref={scrollRef}
+        className="flex-1 space-y-3 overflow-y-auto rounded-xl p-3"
+        style={{
+          background: 'var(--color-surface-1)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-lg)',
+          maxHeight: '50dvh',
+        }}
+        aria-live="polite"
+        aria-label="Chat messages"
+      >
+        {messages.length === 0 && (
+          <p className="text-center text-sm leading-[1.65]" style={{ color: 'var(--color-text-muted)' }}>
+            Each message costs {satsPerMessage.toLocaleString()} sats. Pay via Lightning, then the
+            assistant streams a reply.
+          </p>
+        )}
+
+        {messages.map((message) => (
+          <ChatMessage key={message.id} message={message} />
+        ))}
+
+        {isStreaming && (
+          <p
+            className="text-xs font-mono"
+            style={{ color: 'var(--color-text-subtle)' }}
+            aria-live="polite"
+          >
+            Assistant is typing…
+          </p>
+        )}
+      </div>
+
+      {(error || gateError) && (
+        <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+          {gateError ?? error?.message ?? 'Something went wrong'}
+        </p>
+      )}
+
+      <div className="space-y-3">
+        <label htmlFor="gated-chat-input" className="sr-only">
+          Message
+        </label>
+        <textarea
+          id="gated-chat-input"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          placeholder="Ask anything…"
+          rows={3}
+          disabled={isStreaming || pendingText !== null}
+          className="w-full resize-none rounded-lg px-3 py-2.5 text-sm leading-[1.65] outline-none transition-opacity duration-200 disabled:opacity-50"
+          style={{
+            background: 'var(--color-surface-2)',
+            color: 'var(--color-text)',
+            border: '1px solid var(--color-border)',
+            borderRadius: 'var(--radius-md)',
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+              event.preventDefault();
+              if (canSend) handlePrepareSend();
+            }
+          }}
+        />
+
+        {pendingText !== null ? (
+          <div className="space-y-2">
+            <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+              Pay to send: &ldquo;{pendingText.slice(0, 80)}
+              {pendingText.length > 80 ? '…' : ''}&rdquo;
+            </p>
+            <PaymentGate
+              amountSats={satsPerMessage}
+              memo={`AI chat message`}
+              disabled={isStreaming}
+              onPaymentConfirmed={handlePaymentConfirmed}
+              onError={setGateError}
+            />
+            <button
+              type="button"
+              onClick={handleCancelPending}
+              className="w-full text-xs font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              Edit message
+            </button>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={handlePrepareSend}
+            disabled={!canSend}
+            className="inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5 text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-40"
+            style={{
+              background: 'var(--color-surface-2)',
+              color: 'var(--color-text)',
+              border: '1px solid var(--color-border)',
+              borderRadius: 'var(--radius-md)',
+            }}
+          >
+            Continue to payment
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/ai-chat-gated/components/ai/PaymentGate.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { PayButton } from '../webln/PayButton';
+import { formatSats } from '../../lib/payment-history';
+
+export type TChatPaymentProof = {
+  paymentId: string;
+  preimage: string;
+};
+
+type TInvoiceResponse = {
+  paymentId: string;
+  invoice: string;
+  amountSats: number;
+  memo: string;
+  devPreimage?: string;
+};
+
+interface IPaymentGateProps {
+  amountSats: number;
+  disabled?: boolean;
+  memo?: string;
+  onPaymentConfirmed: (proof: TChatPaymentProof) => void;
+  onError?: (message: string) => void;
+}
+
+type TGateStep = 'idle' | 'loading' | 'ready' | 'error';
+
+/**
+ * Pay-to-send gate: fetches a server invoice, then wraps WebLN payment around submission.
+ */
+export function PaymentGate({
+  amountSats,
+  disabled = false,
+  memo,
+  onPaymentConfirmed,
+  onError,
+}: IPaymentGateProps) {
+  const [step, setStep] = useState<TGateStep>('idle');
+  const [invoiceData, setInvoiceData] = useState<TInvoiceResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const reset = useCallback(() => {
+    setStep('idle');
+    setInvoiceData(null);
+    setError(null);
+  }, []);
+
+  const requestInvoice = useCallback(async () => {
+    setStep('loading');
+    setError(null);
+
+    const res = await fetch('/api/chat/invoice', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ memo: memo ?? `AI chat (${formatSats(amountSats)})` }),
+    });
+
+    if (!res.ok) {
+      const message = 'Could not create invoice';
+      setError(message);
+      setStep('error');
+      onError?.(message);
+      return null;
+    }
+
+    const data = (await res.json()) as TInvoiceResponse;
+    setInvoiceData(data);
+    setStep('ready');
+    return data;
+  }, [amountSats, memo, onError]);
+
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== 'development' ||
+      !invoiceData?.devPreimage ||
+      step !== 'ready'
+    ) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      onPaymentConfirmed({
+        paymentId: invoiceData.paymentId,
+        preimage: invoiceData.devPreimage!,
+      });
+      reset();
+    }, 5000);
+
+    return () => window.clearTimeout(timer);
+  }, [invoiceData, step, onPaymentConfirmed, reset]);
+
+  async function handlePrepare() {
+    if (disabled || step === 'loading') return;
+    await requestInvoice();
+  }
+
+  function handlePaid(preimage: string) {
+    if (!invoiceData) return;
+    onPaymentConfirmed({ paymentId: invoiceData.paymentId, preimage });
+    reset();
+  }
+
+  if (step === 'idle') {
+    return (
+      <button
+        type="button"
+        onClick={handlePrepare}
+        disabled={disabled}
+        className="inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5 text-sm font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80 active:opacity-70 disabled:cursor-not-allowed disabled:opacity-40"
+        style={{
+          background: 'var(--color-accent)',
+          color: 'var(--color-primary-foreground)',
+          borderRadius: 'var(--radius-md)',
+        }}
+      >
+        Pay {formatSats(amountSats)} to send
+      </button>
+    );
+  }
+
+  if (step === 'loading') {
+    return (
+      <p
+        className="text-center text-xs font-mono"
+        style={{ color: 'var(--color-text-subtle)' }}
+        aria-live="polite"
+      >
+        Generating invoice…
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {invoiceData && (
+        <PayButton
+          invoice={invoiceData.invoice}
+          amountSats={invoiceData.amountSats}
+          memo={invoiceData.memo}
+          onSuccess={handlePaid}
+        />
+      )}
+
+      {process.env.NODE_ENV === 'development' && step === 'ready' && (
+        <p className="text-center text-xs" style={{ color: 'var(--color-text-subtle)' }}>
+          Simulated payment in 5 seconds (dev only)
+        </p>
+      )}
+
+      {error && (
+        <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="button"
+        onClick={reset}
+        className="w-full text-xs font-semibold transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        style={{ color: 'var(--color-text-muted)' }}
+      >
+        Cancel
+      </button>
+    </div>
+  );
+}

package/dist/templates/modules/ai-chat-gated/lib/ai/providers.ts

@@ -0,0 +1,49 @@
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { createOpenAI } from '@ai-sdk/openai';
+import { createGroq } from '@ai-sdk/groq';
+import { createOllama } from 'ollama-ai-provider';
+import type { LanguageModel } from 'ai';
+
+export type TAiProvider = 'anthropic' | 'openai' | 'groq' | 'ollama';
+
+const DEFAULT_MODELS: Record<TAiProvider, string> = {
+  anthropic: 'claude-sonnet-4-0',
+  openai: 'gpt-4o',
+  groq: 'llama-3.3-70b-versatile',
+  ollama: 'llama3.2',
+};
+
+function resolveProvider(): TAiProvider {
+  const provider = process.env.AI_PROVIDER?.toLowerCase();
+  if (provider === 'anthropic' || provider === 'openai' || provider === 'groq' || provider === 'ollama') {
+    return provider;
+  }
+  return 'anthropic';
+}
+
+function resolveModel(provider: TAiProvider): string {
+  return process.env.AI_MODEL?.trim() || DEFAULT_MODELS[provider];
+}
+
+/**
+ * Returns a Vercel AI SDK language model based on `AI_PROVIDER` and related env vars.
+ */
+export function getLanguageModel(): LanguageModel {
+  const provider = resolveProvider();
+  const modelId = resolveModel(provider);
+  const apiKey = process.env.AI_API_KEY;
+  const baseURL = process.env.AI_BASE_URL;
+
+  switch (provider) {
+    case 'anthropic':
+      return createAnthropic(apiKey ? { apiKey } : undefined)(modelId);
+    case 'openai':
+      return createOpenAI(apiKey ? { apiKey } : undefined)(modelId);
+    case 'groq':
+      return createGroq(apiKey ? { apiKey } : undefined)(modelId);
+    case 'ollama':
+      return createOllama(baseURL ? { baseURL } : undefined)(modelId) as unknown as LanguageModel;
+    default:
+      return createAnthropic(apiKey ? { apiKey } : undefined)(modelId);
+  }
+}

package/dist/templates/modules/ai-chat-gated/lib/chat-payment.ts

@@ -0,0 +1,161 @@
+import { randomBytes } from 'crypto';
+
+export type TChatPaymentStatus = 'pending' | 'paid' | 'consumed' | 'expired';
+
+export type TChatPaymentRecord = {
+  id: string;
+  invoice: string;
+  preimage: string;
+  amountSats: number;
+  memo: string;
+  status: TChatPaymentStatus;
+  createdAt: number;
+  paidAt: number | null;
+  consumedAt: number | null;
+};
+
+const payments = new Map<string, TChatPaymentRecord>();
+const INVOICE_TTL_MS = 15 * 60 * 1000;
+
+function generateId(): string {
+  return randomBytes(16).toString('hex');
+}
+
+function generatePreimage(): string {
+  return randomBytes(32).toString('hex');
+}
+
+function buildMockInvoice(amountSats: number, paymentId: string): string {
+  const amountPart = amountSats.toString(16).padStart(6, '0');
+  return `lnbc${amountPart}n1p${paymentId.slice(0, 40)}`;
+}
+
+/**
+ * Reads the per-message price from env (default 10 sats).
+ */
+export function getSatsPerMessage(): number {
+  const raw = process.env.AI_SATS_PER_MESSAGE ?? '10';
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 10;
+}
+
+export type TChatInvoiceResult = {
+  paymentId: string;
+  invoice: string;
+  amountSats: number;
+  memo: string;
+  /** Present in development to simulate wallet payment without WebLN */
+  devPreimage?: string;
+};
+
+/**
+ * Creates a pending chat payment invoice for one AI message.
+ */
+export async function generateChatInvoice(memo?: string): Promise<TChatInvoiceResult> {
+  const amountSats = getSatsPerMessage();
+  const id = generateId();
+  const preimage = generatePreimage();
+
+  const record: TChatPaymentRecord = {
+    id,
+    invoice: buildMockInvoice(amountSats, id),
+    preimage,
+    amountSats,
+    memo: memo ?? `AI chat message (${amountSats} sats)`,
+    status: 'pending',
+    createdAt: Date.now(),
+    paidAt: null,
+    consumedAt: null,
+  };
+
+  payments.set(id, record);
+
+  const result: TChatInvoiceResult = {
+    paymentId: id,
+    invoice: record.invoice,
+    amountSats: record.amountSats,
+    memo: record.memo,
+  };
+
+  if (process.env.NODE_ENV === 'development') {
+    result.devPreimage = preimage;
+  }
+
+  return result;
+}
+
+async function getPaymentById(id: string): Promise<TChatPaymentRecord | null> {
+  const record = payments.get(id);
+  if (!record) return null;
+
+  if (
+    record.status === 'pending' &&
+    Date.now() - record.createdAt > INVOICE_TTL_MS
+  ) {
+    record.status = 'expired';
+    payments.set(id, record);
+  }
+
+  return record;
+}
+
+export type TVerifyChatPaymentResult =
+  | { valid: true; record: TChatPaymentRecord }
+  | { valid: false; reason: string };
+
+/**
+ * Verifies a Lightning preimage and marks the payment as paid (not yet consumed).
+ */
+export async function verifyChatPayment(
+  paymentId: string,
+  preimage: string,
+): Promise<TVerifyChatPaymentResult> {
+  const record = await getPaymentById(paymentId);
+  if (!record) {
+    return { valid: false, reason: 'Payment not found' };
+  }
+
+  if (record.status === 'expired') {
+    return { valid: false, reason: 'Invoice expired' };
+  }
+
+  if (record.status === 'consumed') {
+    return { valid: false, reason: 'Payment already used' };
+  }
+
+  if (record.status === 'paid') {
+    return { valid: true, record };
+  }
+
+  if (record.preimage !== preimage) {
+    return { valid: false, reason: 'Invalid payment proof' };
+  }
+
+  record.status = 'paid';
+  record.paidAt = Date.now();
+  payments.set(paymentId, record);
+  return { valid: true, record };
+}
+
+/**
+ * Confirms a paid invoice is valid and marks it consumed for a single AI request.
+ */
+export async function consumeChatPayment(
+  paymentId: string,
+  preimage: string,
+): Promise<TVerifyChatPaymentResult> {
+  const verified = await verifyChatPayment(paymentId, preimage);
+  if (!verified.valid) {
+    return verified;
+  }
+
+  const record = verified.record;
+  if (record.status === 'consumed') {
+    return { valid: false, reason: 'Payment already used' };
+  }
+
+  record.status = 'consumed';
+  record.consumedAt = Date.now();
+  payments.set(paymentId, record);
+  return { valid: true, record };
+}

package/dist/templates/modules/ai-chat-gated/module.json

@@ -0,0 +1,62 @@
+{
+  "name": "ai-chat-gated",
+  "description": "AI chat interface locked behind a Lightning micropayment per message",
+  "dependencies": [
+    "ai",
+    "@ai-sdk/react",
+    "react-markdown",
+    "@ai-sdk/anthropic",
+    "@ai-sdk/openai",
+    "@ai-sdk/groq",
+    "ollama-ai-provider"
+  ],
+  "devDependencies": [],
+  "files": [
+    { "src": "lib/chat-payment.ts", "dest": "lib/chat-payment.ts", "merge": "add" },
+    { "src": "lib/ai/providers.ts", "dest": "lib/ai/providers.ts", "merge": "add" },
+    { "src": "components/ai/ChatMessage.tsx", "dest": "components/ai/ChatMessage.tsx", "merge": "add" },
+    { "src": "components/ai/PaymentGate.tsx", "dest": "components/ai/PaymentGate.tsx", "merge": "add" },
+    { "src": "components/ai/GatedChat.tsx", "dest": "components/ai/GatedChat.tsx", "merge": "add" },
+    { "src": "app/api/chat/route.ts", "dest": "app/api/chat/route.ts", "merge": "add" },
+    { "src": "app/api/chat/invoice/route.ts", "dest": "app/api/chat/invoice/route.ts", "merge": "add" },
+    { "src": "app/demo/ai-chat/page.tsx", "dest": "app/demo/ai-chat/page.tsx", "merge": "add" }
+  ],
+  "envVars": [
+    {
+      "key": "AI_PROVIDER",
+      "description": "AI provider — anthropic | openai | groq | ollama",
+      "example": "anthropic",
+      "required": true
+    },
+    {
+      "key": "AI_API_KEY",
+      "description": "Provider API key (not required for ollama)",
+      "example": "sk-ant-...",
+      "required": true
+    },
+    {
+      "key": "AI_MODEL",
+      "description": "Specific model name (e.g. claude-sonnet-4-0)",
+      "example": "claude-sonnet-4-0",
+      "required": false
+    },
+    {
+      "key": "AI_BASE_URL",
+      "description": "Custom base URL for Ollama or self-hosted endpoints",
+      "example": "http://localhost:11434",
+      "required": false
+    },
+    {
+      "key": "AI_SATS_PER_MESSAGE",
+      "description": "Lightning price in sats for each AI message (server-side)",
+      "example": "10",
+      "required": false
+    },
+    {
+      "key": "NEXT_PUBLIC_SATS_PER_MESSAGE",
+      "description": "Same price exposed to the client UI",
+      "example": "10",
+      "required": false
+    }
+  ]
+}

package/dist/templates/modules/ai-rules/.cursorrules

@@ -0,0 +1,8 @@
+# {{PROJECT_NAME}} — Cursor Context
+
+This is a Fedi Mini App built with create-fedi-app.
+Full context is in `.ai/rules/`. Read OVERVIEW.md first.
+
+Key constraint: this app runs inside Fedi's in-app browser (WebView).
+window.webln and window.nostr are injected by Fedi — do not install
+external wallet libraries. Always check for undefined before calling them.

package/dist/templates/modules/ai-rules/.github/copilot-instructions.md

@@ -0,0 +1,8 @@
+# {{PROJECT_NAME}} — GitHub Copilot Context
+
+This is a Fedi Mini App built with create-fedi-app.
+Full context is in `.ai/rules/`. Read OVERVIEW.md first.
+
+Key constraint: this app runs inside Fedi's in-app browser (WebView).
+window.webln and window.nostr are injected by Fedi — do not install
+external wallet libraries. Always check for undefined before calling them.

package/dist/templates/modules/ai-rules/CLAUDE.md

@@ -0,0 +1,8 @@
+# {{PROJECT_NAME}} — Claude Code Context
+
+This is a Fedi Mini App built with create-fedi-app.
+Full context is in `.ai/rules/`. Read OVERVIEW.md first.
+
+Key constraint: this app runs inside Fedi's in-app browser (WebView).
+window.webln and window.nostr are injected by Fedi — do not install
+external wallet libraries. Always check for undefined before calling them.

package/dist/templates/modules/ai-rules/module.json

@@ -0,0 +1,20 @@
+{
+  "name": "ai-rules",
+  "description": "Agent-readable context files for AI coding tools",
+  "dependencies": [],
+  "devDependencies": [],
+  "files": [
+    { "src": "CLAUDE.md", "dest": ".ai/CLAUDE.md", "merge": "add" },
+    { "src": ".cursorrules", "dest": ".ai/.cursorrules", "merge": "add" },
+    { "src": ".github/copilot-instructions.md", "dest": ".ai/.github/copilot-instructions.md", "merge": "add" },
+    { "src": "rules/OVERVIEW.md", "dest": ".ai/rules/OVERVIEW.md", "merge": "replace" },
+    { "src": "rules/webln.md", "dest": ".ai/rules/webln.md", "merge": "add" },
+    { "src": "rules/nostr.md", "dest": ".ai/rules/nostr.md", "merge": "add" },
+    { "src": "rules/fedi-api.md", "dest": ".ai/rules/fedi-api.md", "merge": "add" },
+    { "src": "rules/design-system.md", "dest": ".ai/rules/design-system.md", "merge": "add" },
+    { "src": "rules/patterns.md", "dest": ".ai/rules/patterns.md", "merge": "add" },
+    { "src": "rules/architecture.md", "dest": ".ai/rules/architecture.md", "merge": "add" },
+    { "src": "rules/testing.md", "dest": ".ai/rules/testing.md", "merge": "add" }
+  ],
+  "envVars": []
+}