Skip to main content
This walks you from git clone to “a real human paid me $X” in about an hour, assuming you have Stripe and Resend accounts ready.

​
Prerequisites

You’ve already done Installation — pnpm dev runs and you can sign up at /register.

​
1. Set your brand

Open src/config/site.ts. Change: 
export const siteConfig = {
  name: 'YourProduct',
  description: '...',
  shortDescription: '...',
  url: 'https://your-domain.com',
  links: {
    twitter: 'https://x.com/yourhandle',
    github: 'https://github.com/yourorg/yourrepo',
    discord: 'https://discord.gg/yourchannel',
  },
  // ...
};
This file is the buyer’s “what to change”. Keep it under ~150 lines — provider-specific configuration belongs in its own module (see Configuration).

​
2. Wire Stripe

# .env.local
STRIPE_SECRET_KEY=sk_test_…
STRIPE_WEBHOOK_SECRET=whsec_…
STRIPE_PRICE_VIBESTRAP_PROMO=price_…
Then in src/config/site.ts set payment.provider = 'stripe' (it already is). The full 4-provider walkthrough is at Payments overview. For local webhook testing, the Stripe CLI: 
stripe listen --forward-to localhost:3000/api/webhooks/stripe
Copy the webhook signing secret it prints into STRIPE_WEBHOOK_SECRET.

​
3. Wire Resend

# .env.local
RESEND_API_KEY=re_…
RESEND_FROM_EMAIL=[email protected]
The verify / forgot / welcome templates ship in src/mail/templates/. They’re React Email components — preview them with pnpm dlx react-email dev if you want to tweak the design visually.

​
4. Try the flow

  1. Sign up at /register. The verification email lands in Resend’s logs.
  2. Click the verify link.
  3. Visit /pricing, hit “Get vibestrap for $49”, complete the Stripe Checkout.
  4. Webhook fires → row inserted in payment → credits granted in credit_transaction → license issued in license (visible at /settings/licenses).
If any of those four steps fail, check the dev server log — every module prefixes its errors with [stripe], [mail], [license], etc.

​
5. Customize the product

  • Hero copy → messages/en.json and messages/zh.json (Home.hero.*)
  • Pricing card → siteConfig.product.*
  • Feature list → messages/{en,zh}.json (Features.items.*) + src/components/features/items.ts
  • Theme colors → src/app/globals.css (Tailwind v4 @theme directive)
See Customization for the full surface map.

​
6. Deploy

When you’re ready to ship: 
git push                    # to your GitHub repo
# Then in Vercel: Import → set env vars → deploy.
Full walkthrough: Deploying to Vercel.

​
7. Add the AI feature

If your product uses AI:
  1. Pick a provider — set AI_PROVIDER=openrouter (or openai / anthropic) and the matching API key.
  2. Use useGeneration() in any client component for streaming chat, or call chat() from @/ai/manager in a server action for non-streaming.
  3. The cost ledger and observability happen automatically — see AI overview.