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:
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

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:
Copy the webhook signing secret it prints into STRIPE_WEBHOOK_SECRET.

​
3. Wire Resend

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:
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.