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',
  },
  // ...
};
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=onboarding@your-domain.com
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.
  5. Visit /settings/purchases, enter your GitHub username, click Send invite — you’ll receive a read-only collaborator invitation to the source repo.
If any of those steps fail, check the dev server log — every module prefixes its errors with [stripe], [mail], [github-invite], 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.