create-fedi-app 0.1.0

package/dist/templates/modules/ai-assistant/app/demo/assistant/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { AssistantDemoClient } from './AssistantDemoClient';
+
+export const metadata: Metadata = {
+  title: 'AI Assistant',
+  description:
+    'Free AI assistant demo for Fedi Mini Apps. Configure a system prompt, stream replies via the Vercel AI SDK, and copy messages to clipboard.',
+  openGraph: {
+    title: 'AI Assistant',
+    description:
+      'Free AI assistant demo for Fedi Mini Apps. Configure a system prompt, stream replies via the Vercel AI SDK, and copy messages to clipboard.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'AI Assistant',
+    description:
+      'Free AI assistant demo for Fedi Mini Apps. Configure a system prompt, stream replies via the Vercel AI SDK, and copy messages to clipboard.',
+  },
+};
+
+export default function AssistantDemoPage() {
+  return <AssistantDemoClient />;
+}

package/dist/templates/modules/ai-assistant/components/ai/Assistant.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import type { UIMessage } from 'ai';
+import { useEffect, useRef, useState } from 'react';
+import { useAssistant } from './AssistantProvider';
+
+function getMessageText(message: UIMessage): string {
+  return message.parts
+    .filter((part): part is { type: 'text'; text: string } => part.type === 'text')
+    .map((part) => part.text)
+    .join('');
+}
+
+interface IAssistantMessageProps {
+  message: UIMessage;
+}
+
+/**
+ * Single chat bubble with Markdown rendering and copy-to-clipboard.
+ */
+function AssistantMessage({ message }: IAssistantMessageProps) {
+  const isUser = message.role === 'user';
+  const text = getMessageText(message);
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    if (!text) return;
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <div
+      className={`group flex ${isUser ? 'justify-end' : 'justify-start'}`}
+      data-role={message.role}
+    >
+      <div
+        className="relative max-w-[85%] rounded-xl px-3 py-2.5 text-sm leading-[1.65]"
+        style={{
+          background: isUser ? 'var(--color-accent-dim)' : 'var(--color-surface-2)',
+          color: 'var(--color-text)',
+          borderRadius: 'var(--radius-lg)',
+        }}
+      >
+        {text && (
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="absolute right-2 top-2 rounded px-1.5 py-0.5 text-[10px] font-semibold opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus:opacity-100"
+            style={{
+              background: 'var(--color-surface-1)',
+              color: 'var(--color-text-muted)',
+            }}
+            aria-label={copied ? 'Copied' : 'Copy message'}
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        )}
+
+        {isUser ? (
+          <p className="whitespace-pre-wrap pr-10">{text}</p>
+        ) : (
+          <div
+            className="prose prose-invert prose-sm max-w-none pr-10 prose-p:my-1 prose-pre:my-2 prose-pre:rounded-md prose-pre:bg-[var(--color-surface-1)] prose-code:text-[var(--color-accent)] prose-code:before:content-none prose-code:after:content-none"
+            style={{ color: 'var(--color-text)' }}
+          >
+            <ReactMarkdown>{text || '…'}</ReactMarkdown>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface IAssistantProps {
+  /** Placeholder shown when the conversation is empty. */
+  emptyPlaceholder?: string;
+}
+
+/**
+ * Free AI chat interface with streaming replies, Markdown, and copy-to-clipboard.
+ * Must be rendered inside `AssistantProvider`.
+ */
+export function Assistant({
+  emptyPlaceholder = 'Ask anything. Replies stream in real time.',
+}: IAssistantProps) {
+  const { messages, sendMessage, status, error, setMessages } = useAssistant();
+  const [input, setInput] = useState('');
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const isStreaming = status === 'streaming' || status === 'submitted';
+  const canSend = input.trim().length > 0 && !isStreaming;
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
+  }, [messages, isStreaming]);
+
+  async function handleSend() {
+    const text = input.trim();
+    if (!text || isStreaming) return;
+
+    setInput('');
+    await sendMessage({ text });
+  }
+
+  function handleClear() {
+    setMessages([]);
+    setInput('');
+  }
+
+  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="Assistant messages"
+      >
+        {messages.length === 0 && (
+          <p className="text-center text-sm leading-[1.65]" style={{ color: 'var(--color-text-muted)' }}>
+            {emptyPlaceholder}
+          </p>
+        )}
+
+        {messages.map((message) => (
+          <AssistantMessage 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 && (
+        <p className="text-xs" style={{ color: 'var(--color-error, #ef4444)' }} role="alert">
+          {error.message ?? 'Something went wrong'}
+        </p>
+      )}
+
+      <div className="space-y-3">
+        <label htmlFor="assistant-input" className="sr-only">
+          Message
+        </label>
+        <textarea
+          id="assistant-input"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          placeholder="Ask anything…"
+          rows={3}
+          disabled={isStreaming}
+          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) void handleSend();
+            }
+          }}
+        />
+
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => void handleSend()}
+            disabled={!canSend}
+            className="inline-flex flex-1 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)',
+            }}
+          >
+            Send
+          </button>
+          {messages.length > 0 && (
+            <button
+              type="button"
+              onClick={handleClear}
+              disabled={isStreaming}
+              className="inline-flex 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-1)',
+                color: 'var(--color-text-muted)',
+                border: '1px solid var(--color-border)',
+                borderRadius: 'var(--radius-md)',
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/modules/ai-assistant/components/ai/AssistantProvider.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useChat } from '@ai-sdk/react';
+import { DefaultChatTransport } from 'ai';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from 'react';
+
+const DEFAULT_SYSTEM_PROMPT =
+  'You are a helpful assistant inside a Fedi Mini App. Keep answers concise and practical.';
+
+type TAssistantContext = ReturnType<typeof useChat>;
+
+const AssistantContext = createContext<TAssistantContext | null>(null);
+
+interface IAssistantProviderProps {
+  children: ReactNode;
+  /** Custom system prompt sent with each request. */
+  systemPrompt?: string;
+  /** API route path. Defaults to `/api/assistant`. */
+  api?: string;
+}
+
+/**
+ * Provides Vercel AI SDK `useChat()` state to descendant assistant UI components.
+ */
+export function AssistantProvider({
+  children,
+  systemPrompt = DEFAULT_SYSTEM_PROMPT,
+  api = '/api/assistant',
+}: IAssistantProviderProps) {
+  const systemPromptRef = useRef(systemPrompt);
+
+  useEffect(() => {
+    systemPromptRef.current = systemPrompt;
+  }, [systemPrompt]);
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api,
+        prepareSendMessagesRequest: ({ messages }) => ({
+          body: {
+            messages,
+            systemPrompt: systemPromptRef.current,
+          },
+        }),
+      }),
+    [api],
+  );
+
+  const chat = useChat({ transport });
+
+  return (
+    <AssistantContext.Provider value={chat}>{children}</AssistantContext.Provider>
+  );
+}
+
+/** Access assistant chat state from an `AssistantProvider` subtree. */
+export function useAssistant(): TAssistantContext {
+  const context = useContext(AssistantContext);
+  if (!context) {
+    throw new Error('useAssistant must be used within an AssistantProvider');
+  }
+  return context;
+}

package/dist/templates/modules/ai-assistant/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-assistant/module.json

@@ -0,0 +1,48 @@
+{
+  "name": "ai-assistant",
+  "description": "Free AI assistant chat powered by Vercel AI SDK",
+  "dependencies": [
+    "ai",
+    "@ai-sdk/react",
+    "react-markdown",
+    "@ai-sdk/anthropic",
+    "@ai-sdk/openai",
+    "@ai-sdk/groq",
+    "ollama-ai-provider"
+  ],
+  "devDependencies": [],
+  "files": [
+    { "src": "lib/ai/providers.ts", "dest": "lib/ai/providers.ts", "merge": "add" },
+    { "src": "components/ai/AssistantProvider.tsx", "dest": "components/ai/AssistantProvider.tsx", "merge": "add" },
+    { "src": "components/ai/Assistant.tsx", "dest": "components/ai/Assistant.tsx", "merge": "add" },
+    { "src": "app/api/assistant/route.ts", "dest": "app/api/assistant/route.ts", "merge": "add" },
+    { "src": "app/demo/assistant/page.tsx", "dest": "app/demo/assistant/page.tsx", "merge": "add" },
+    { "src": "app/demo/assistant/AssistantDemoClient.tsx", "dest": "app/demo/assistant/AssistantDemoClient.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-6)",
+      "example": "claude-sonnet-4-6",
+      "required": false
+    },
+    {
+      "key": "AI_BASE_URL",
+      "description": "Custom base URL for Ollama or self-hosted endpoints",
+      "example": "http://localhost:11434",
+      "required": false
+    }
+  ]
+}

package/dist/templates/modules/ai-chat-gated/app/api/chat/invoice/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { generateChatInvoice } from '../../../../lib/chat-payment';
+
+export async function POST(request: Request) {
+  let body: { memo?: string };
+
+  try {
+    body = (await request.json()) as typeof body;
+  } catch {
+    body = {};
+  }
+
+  const invoice = await generateChatInvoice(body.memo);
+  return NextResponse.json(invoice);
+}

package/dist/templates/modules/ai-chat-gated/app/api/chat/route.ts

@@ -0,0 +1,57 @@
+import { convertToModelMessages, streamText, type UIMessage } from 'ai';
+import { consumeChatPayment } from '../../../lib/chat-payment';
+import { getLanguageModel } from '../../../lib/ai/providers';
+
+export const maxDuration = 60;
+
+type TChatRequestBody = {
+  messages?: UIMessage[];
+  paymentId?: string;
+  preimage?: string;
+};
+
+/**
+ * Streaming AI chat endpoint. Requires a valid, single-use Lightning payment per request.
+ */
+export async function POST(request: Request) {
+  let body: TChatRequestBody;
+
+  try {
+    body = (await request.json()) as TChatRequestBody;
+  } catch {
+    return new Response('Invalid JSON body', { status: 400 });
+  }
+
+  const paymentId =
+    body.paymentId ?? request.headers.get('x-payment-id') ?? undefined;
+  const preimage =
+    body.preimage ?? request.headers.get('x-payment-preimage') ?? undefined;
+
+  if (!paymentId || !preimage) {
+    return new Response('Payment required', { status: 402 });
+  }
+
+  const payment = await consumeChatPayment(paymentId, preimage);
+  if (!payment.valid) {
+    return new Response(payment.reason, { status: 402 });
+  }
+
+  const messages = body.messages;
+  if (!messages || !Array.isArray(messages) || messages.length === 0) {
+    return new Response('messages array is required', { status: 400 });
+  }
+
+  try {
+    const result = streamText({
+      model: getLanguageModel(),
+      messages: await convertToModelMessages(messages),
+      system:
+        'You are a helpful assistant inside a Fedi Mini App. Keep answers concise and practical.',
+    });
+
+    return result.toUIMessageStreamResponse();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'AI request failed';
+    return new Response(message, { status: 500 });
+  }
+}

package/dist/templates/modules/ai-chat-gated/app/demo/ai-chat/page.tsx

@@ -0,0 +1,58 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { GatedChat } from '../../../components/ai/GatedChat';
+
+export const metadata: Metadata = {
+  title: 'AI Chat (Gated)',
+  description:
+    'Pay-per-message AI chat demo: each prompt costs sats via Lightning. Invoice, WebLN payment, then streaming assistant replies powered by the Vercel AI SDK.',
+  openGraph: {
+    title: 'AI Chat (Gated)',
+    description:
+      'Pay-per-message AI chat demo: each prompt costs sats via Lightning. Invoice, WebLN payment, then streaming assistant replies powered by the Vercel AI SDK.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'AI Chat (Gated)',
+    description:
+      'Pay-per-message AI chat demo: each prompt costs sats via Lightning. Invoice, WebLN payment, then streaming assistant replies powered by the Vercel AI SDK.',
+  },
+};
+
+export default function AiChatDemoPage() {
+  const satsPerMessage =
+    process.env.NEXT_PUBLIC_SATS_PER_MESSAGE ??
+    process.env.AI_SATS_PER_MESSAGE ??
+    '10';
+
+  return (
+    <div className="min-h-dvh bg-[var(--color-bg)] font-[family-name:var(--font-body)] text-[var(--color-text)]">
+      <div
+        className="mx-auto w-full max-w-[390px] px-4 pt-6"
+        style={{ paddingBottom: 'max(5rem, env(safe-area-inset-bottom, 20px))' }}
+      >
+        <Link
+          href="/demo"
+          className="mb-6 inline-block text-xs text-[var(--color-text-muted)] transition-opacity duration-200 ease-[cubic-bezier(0.25,1,0.5,1)] hover:opacity-80"
+        >
+          ← back
+        </Link>
+
+        <header className="mb-8 space-y-2">
+          <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold leading-tight text-[var(--color-text)]">
+            Gated AI chat
+          </h1>
+          <p className="max-w-[75ch] text-sm leading-[1.65] text-[var(--color-text-muted)]">
+            The flagship pay-per-prompt module. Each message costs{' '}
+            {Number.parseInt(satsPerMessage, 10).toLocaleString()} sats. Your app generates a
+            BOLT11 via <code className="font-mono text-xs">/api/chat/invoice</code>, the user pays
+            with WebLN, and the server verifies the preimage before calling{' '}
+            <code className="font-mono text-xs">streamText()</code>.
+          </p>
+        </header>
+
+        <GatedChat />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import type { UIMessage } from 'ai';
+
+interface IChatMessageProps {
+  message: UIMessage;
+}
+
+function getMessageText(message: UIMessage): string {
+  return message.parts
+    .filter((part): part is { type: 'text'; text: string } => part.type === 'text')
+    .map((part) => part.text)
+    .join('');
+}
+
+/**
+ * Renders a single chat message with Markdown support for assistant replies.
+ */
+export function ChatMessage({ message }: IChatMessageProps) {
+  const isUser = message.role === 'user';
+  const text = getMessageText(message);
+
+  return (
+    <div
+      className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}
+      data-role={message.role}
+    >
+      <div
+        className="max-w-[85%] rounded-xl px-3 py-2.5 text-sm leading-[1.65]"
+        style={{
+          background: isUser ? 'var(--color-accent-dim)' : 'var(--color-surface-2)',
+          color: isUser ? 'var(--color-text)' : 'var(--color-text)',
+          borderRadius: 'var(--radius-lg)',
+        }}
+      >
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{text}</p>
+        ) : (
+          <div
+            className="prose prose-invert prose-sm max-w-none prose-p:my-1 prose-pre:my-2 prose-pre:rounded-md prose-pre:bg-[var(--color-surface-1)] prose-code:text-[var(--color-accent)] prose-code:before:content-none prose-code:after:content-none"
+            style={{ color: 'var(--color-text)' }}
+          >
+            <ReactMarkdown>{text || '…'}</ReactMarkdown>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}