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

> 从全新 clone 到第一笔真实付款，不到一小时。

这一篇带你从 `git clone` 走到「真实用户付了我 \$X」，预计一小时左右——前提是
Stripe 和 Resend 账号都已经申请好了。

## 前置

你已经完成了[安装](/zh/installation)——`pnpm dev` 跑起来了，
能在 `/register` 注册账户。

## 1. 改你的品牌

打开 `src/config/site.ts`，改：

```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',
  },
  // ...
};
```

这个文件是买家「要改的东西」的集中地。保持在 \~150 行内——provider 特定的配置
放到各自的模块里（见[配置](/zh/configuration)）。

## 2. 接入 Stripe

```bash theme={null}
# .env.local
STRIPE_SECRET_KEY=sk_test_…
STRIPE_WEBHOOK_SECRET=whsec_…
STRIPE_PRICE_VIBESTRAP_PROMO=price_…
```

然后在 `src/config/site.ts` 设 `payment.provider = 'stripe'`（默认就是）。
四个 provider 的完整走查见[支付总览](/zh/payments/overview)。

本地测 webhook 用 Stripe CLI：

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

把它打印出来的 webhook signing secret 填到 `STRIPE_WEBHOOK_SECRET`。

## 3. 接入 Resend

```bash theme={null}
# .env.local
RESEND_API_KEY=re_…
RESEND_FROM_EMAIL=onboarding@your-domain.com
```

验证 / 忘记密码 / 欢迎模板在 `src/mail/templates/`。它们是 React Email 组件——
想可视化调样式的话用 `pnpm dlx react-email dev`。

## 4. 走一遍流程

1. 在 `/register` 注册。验证邮件出现在 Resend 的 logs 里。
2. 点验证链接。
3. 访问 `/pricing`，点「\$49 立即获取」，完成 Stripe Checkout。
4. webhook 触发 → `payment` 表插一行 → `credit_transaction` 发放积分。
5. 访问 `/settings/purchases`，填你的 GitHub 用户名，点 **Send invite** ——
   你会收到一封源码 repo 的只读 collaborator 邀请。

任何一步失败都看 dev server log——每个模块都用 `[stripe]`、`[mail]`、`[github-invite]`
等前缀打日志。

## 5. 定制产品

* **Hero 文案** → `messages/en.json` 和 `messages/zh.json`（`Home.hero.*`）
* **定价卡** → `siteConfig.product.*`
* **功能列表** → `messages/{en,zh}.json`（`Features.items.*`）+
  `src/components/features/items.ts`
* **主题色** → `src/app/globals.css`（Tailwind v4 `@theme` 指令）

完整可改面见[定制](/zh/customization)。

## 6. 部署

准备好上线时：

```bash theme={null}
git push                    # 推到你的 GitHub
# 然后在 Vercel：Import → 设环境变量 → 部署。
```

完整走查：[部署到 Vercel](/zh/deployment/vercel)。

## 7. 接入 AI 功能

如果你的产品用 AI：

1. 选 provider —— 设 `AI_PROVIDER=openrouter`（或 `openai` / `anthropic`）和对应 API key。
2. 在任意 client 组件里用 `useGeneration()` 做流式对话；或在 server action 里调
   `@/ai/manager` 的 `chat()` 做非流式。
3. 成本账本和可观测自动发生——见 [AI 总览](/zh/ai/providers)。