Skip to content

Add "Try Franklin" — in-browser wallet-paid playground (/try) - #2

Closed
KillerQueen-Z wants to merge 1 commit into
masterfrom
try-franklin
Closed

Add "Try Franklin" — in-browser wallet-paid playground (/try)#2
KillerQueen-Z wants to merge 1 commit into
masterfrom
try-franklin

Conversation

@KillerQueen-Z

Copy link
Copy Markdown
Collaborator

What

Adds a Try Franklin nav item linking to /try — a web preview of Franklin, styled to match the site (warm-minimal + gold). Users connect a browser-extension wallet and chat with frontier AI models, paying per message in USDC via x402. No account, no subscription.

Modeled on BlockRun's video-model experience page; reuses BlockRun's existing x402 API instead of standing up a new backend.

How it works

browser  →  franklin.run /api/blockrun/...  →  blockrun.ai /api/...
  (wallet signs x402)         (transparent proxy)        (runs model, settles USDC)
  • /api/blockrun/[...path] — transparent proxy to blockrun.ai. Relays the X-Payment request header upstream and the payment-required response header back, so the browser stays same-origin (no CORS, 402 visible to the client).
  • Wallet / x402 stack ported from BlockRun's playground: wagmi-config, useUsdcBalance, useX402Payment (EIP-3009 TransferWithAuthorization signing).
  • useFranklinChat — probe → 402 → wallet-sign → retry with X-Payment. Free models (nvidia/*) run with no wallet; paid models charge a few cents of USDC, settled on Base to BlockRun's configured wallet.

UI

  • WalletProvider (wagmi + react-query) scoped to /try only — wallet stack stays out of every other page's bundle
  • ConnectWallet chip with live USDC balance
  • FranklinChat surface: model picker (free + paid), prompt suggestions, signing/thinking/error states

i18n

"Try Franklin" nav label localized across all 13 locales.

Dependencies

Adds wagmi, viem, @tanstack/react-query.

Verification

  • npm run typecheck
  • npm run build ✅ (/try prerenders; wagmi/viem compile under Next 16 SSR)
  • Verified locally: /try → 200, proxy /v1/models → 200, paid-model POST → 402 with payment-required header relayed correctly
  • Not testable headlessly: the actual MetaMask signature popup (needs a browser + extension) — code path is the same proven flow as BlockRun's playground

Follow-ups (not in this PR)

  • Image/video generation modes (chat is the primary surface here; images = single-shot, video needs polling — straightforward to add next using the same proxy + payment flow)
  • Optional NEXT_PUBLIC_WALLETCONNECT_ID to enable mobile QR connect

New nav item "Try Franklin" → /try, a web preview of Franklin styled to
match the site (warm-minimal + gold). Users connect a browser-extension
wallet and chat with frontier models, paying per message in USDC via x402.

Reuses BlockRun's existing x402 API rather than standing up new backend:
- /api/blockrun/[...path] transparent proxy forwards to blockrun.ai,
  relaying the X-Payment request header and payment-required response
  header so the browser stays same-origin (no CORS, 402 visible).
- Wallet/x402 stack ported from the BlockRun video playground:
  wagmi-config, useUsdcBalance, useX402Payment (EIP-3009 signing).
- useFranklinChat: probe → 402 → wallet-sign → retry with X-Payment.
  Free models (nvidia/*) run with no wallet; paid models charge a few
  cents of USDC, settled on Base to BlockRun's wallet.

UI: WalletProvider (wagmi + react-query, scoped to /try only),
ConnectWallet chip with live USDC balance, FranklinChat surface with
model picker, suggestions, and status/error states.

Nav label localized across all 13 locales. Adds wagmi, viem,
@tanstack/react-query. typecheck + production build pass; /try and the
proxy verified locally (402 + payment-required relayed correctly).
@KillerQueen-Z
KillerQueen-Z deleted the try-franklin branch May 23, 2026 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant