> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibestrap.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> From a fresh clone to your first paid checkout in under an hour.

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](/installation) — `pnpm dev` runs and you can
sign up at `/register`.

## 1. Set your brand

Open `src/config/site.ts`. Change:

```ts theme={null}
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](/configuration)).

## 2. Wire Stripe

```bash theme={null}
# .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](/payments/overview).

For local webhook testing, the Stripe CLI:

```bash theme={null}
stripe listen --forward-to localhost:3000/api/webhooks/stripe
```

Copy the webhook signing secret it prints into `STRIPE_WEBHOOK_SECRET`.

## 3. Wire Resend

```bash theme={null}
# .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](/customization) for the full surface map.

## 6. Deploy

When you're ready to ship:

```bash theme={null}
git push                    # to your GitHub repo
# Then in Vercel: Import → set env vars → deploy.
```

Full walkthrough: [Deploying to Vercel](/deployment/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](/ai/providers).