一个半小时爆肝！AI Studio接入支付/登陆/Nano Banana完整教程🧣

围巾哥萧尘
47 阅读7分钟

将 AI Studio 创建的项目转化为商业化 AI 应用的具体操作流程和提示词整理如下：

www.youtube.com/watch?v=qBm…

第一阶段：项目初始化与数据库配置

首先，需要搭建一个支持全栈开发的基础框架。

  1. 准备技术栈：选择 Next.js 作为全栈框架，并使用集成了 Better Auth、Drizzle ORM 和 Supabase 的开源模板。

  2. 本地初始化：下载源码后，在终端执行 pnpm install 安装依赖，并通过 git init 初始化仓库以便追踪修改。

  3. 配置数据库：

    • 在 Supabase 中创建新项目，保存生成的数据库密码。
    • 在本地项目复制 .env.example 为 .env。
    • 从 Supabase 的连接设置中获取 Transaction（连接池）和 Session（直接连接）的链接，填入环境变量中，并将 [password] 替换为真实密码。

  4. 初始化表结构：执行 pnpm run db:migrate（或根据模板定义的迁移命令）将初始表结构推送到 Supabase。

第二阶段：前端样式复刻

利用 AI 的能力将 AI Studio 生成的漂亮前端迁移到 Next.js 项目中。

  1. 准备源码：从 AI Studio 下载生成的 React 项目源码，解压并放入当前项目的一个临时目录（如 temp_as_code/），并在 .gitignore 中忽略该目录。

  2. 执行复刻提示词：

    提示词： “请你参考临时目录 temp_as_code/ 中的前端项目源码，在当前的 Next.js 项目中还原该项目的所有样式。请实现 100% 的还原。如果涉及到静态资源的图片或字体，也请你将其移动到当前项目的 public 目录下。”

  3. 完善登录入口：

    提示词： “目前我们的项目同时支持邮件登录和 Google 登录。请在登录弹窗中增加邮件登录和注册的按钮，点击后跳转到对应的 /sign-in 和 /sign-up 页面。同时美化原有的登录注册页面，确保风格与当前的落地页保持统一。”

第三阶段：集成 Google 登录

通过 Better Auth 快速实现第三方授权。

  1. 获取凭证：在 Google Cloud Console 中创建 OAuth 2.0 客户端 ID，配置“已获得授权的重定向 URI”（如 http://localhost:3000/api/auth/callback/google）。

  2. 设置环境变量：在 .env 中添加 GOOGLE_CLIENT_ID 和 GOOGLE_CLIENT_SECRET。

  3. 集成提示词：将 Better Auth 的官方接入文档保存为 .md 文件提供给 AI。

    提示词： “请参考提供的 docs/better-auth.md 文档，在本项目中接入 Google 登录。环境变量我已经添加成功，请确保用户可以通过 Google 账号直接注册并登录我们的系统。”

第四阶段：云端存储与支付系统

实现商业化的核心：存储用户资产与积分购买。

  1. 接入 Vercel Blob 存储：在 Vercel 后台创建 Blob 存储桶，安装 @vercel/blob SDK，并配置相关 Token 环境变量。

    提示词： “请使用 Vercel Blob SDK 为项目实现图片上传功能。用户上传的原始图片以及后续 AI 生成的图片都需要保存到对象存储中，并将返回的 URL 写入数据库表中。”

  2. 配置 Stripe 支付：在 Stripe 后台创建积分产品（如 10 美金 200 积分），获取 Price ID，并配置 Webhook 以接收支付成功通知。

  3. 支付集成提示词：

    提示词： “请帮我接入 Stripe 支付功能。要求：1. 修改定价页面，将套餐设为 10 美金购买 200 积分；2. 实现 Webhook 逻辑（路径为 /api/webhook），当接收到支付成功事件时，为对应用户增加 200 积分；3. 在数据库中记录用户的支付历史和积分变动情况。”

第五阶段：接入 AI 生成逻辑（Nano Banana）

这是应用的核心功能实现。

  1. 准备 API：获取第三方 API 平台的 Key（如 API-Dash 或 Nano Banana）并存入环境变量。

  2. 复杂生成提示词（建议配合 Claude 3.5/GPT-4.5 及 Plan 模式 使用）：

    提示词： “请参考 API 文档，替换首页原有的模拟生成逻辑。要求：1. 用户点击生成后，在后端创建异步任务并扣除 20 积分；2. 前端实现轮询机制，每隔几秒请求后端检查任务状态；3. 任务完成后，将生成的图片保存到 Vercel Blob 并展示给用户；4. 在 My Creations 页面展示用户历史生成的图片。”

总结：开发的比喻

整个开发流程就像是在乐高平台上拼装各种功能模块。AI Studio 为你提供了精美的“模型外壳”（前端），而你通过 AI 提示词和各种云服务（数据库、支付、存储）为这个外壳装上了“引擎”和“动力系统”，最终将其变成一辆可以在商业赛道上跑起来的真实赛车。

在将 AI Studio 项目商业化的过程中，接入 Stripe 是实现盈利的核心环节。根据来源，以下是关于 Stripe 接入的具体操作步骤与核心逻辑：

1. Stripe 后台配置 (产品与价格)

在正式写代码前，必须先在 Stripe 管理后台准备好商品信息。

  • 创建产品：进入 Stripe 后台（测试环境可开启“沙盒模式”），创建一个名为“积分”（Credits）的产品。
  • 设置价格：选择一次性付款（One-time payment），设定金额为 10 美金。
  • 获取 Price ID：在产品详情的价格栏中，找到以 price_ 开头的 Price ID，并将其记录下来。这是后续代码调用支付页面的唯一凭证，而非产品 ID。

2. 配置 Webhook (支付回调)

Webhook 的作用是当用户在 Stripe 页面支付成功后，Stripe 主动通知你的服务器。

  • 设置端点：在 Stripe Webhook 设置中添加你的 API 路径，通常为 https://你的域名/api/webhook。
  • 选择事件：对于一次性购买，只需监听 checkout.session.completed 这一个事件即可。
  • 获取 Webhook 密钥：保存生成的 Webhook Signing Secret（以 whsec_ 开头），用于验证请求是否真实来自 Stripe。

3. 环境变量配置 (核心 4 元素)

为了让项目能够与 Stripe 通信，需要在 .env 文件中配置以下四个核心变量：

  1. STRIPE_PUBLIC_KEY：公钥，用于前端加载支付组件。
  2. STRIPE_SECRET_KEY：私钥，用于后端发起支付会话。
  3. STRIPE_WEBHOOK_SECRET：Webhook 签名密钥，用于校验回调请求。
  4. NEXT_PUBLIC_STRIPE_PRICE_ID：步骤 1 中获取的 10 美金套餐 ID。

4. 代码集成与数据库迁移

  • 安装 SDK：在终端执行 pnpm add stripe 安装官方开发工具包。

  • 执行提示词：使用 AI 助手根据 Stripe 文档生成支付逻辑。

    核心提示词要点： “请帮我接入 Stripe 支付。要求：1. 修改 Pricing 页面为 10 美金 200 积分；2. 实现 Webhook 逻辑，路径为 /api/webhook，该路由必须是公共路由（不需要用户授权）；3. 支付成功后为用户增加 200 积分；4. 记录用户的支付历史和积分变动。”

  • 数据库同步：支付逻辑通常涉及新表（如 payment、credit_transaction），需运行 pnpm run db:push 或迁移命令将新结构推送到数据库。

5. 部署与生产环境切换

  • 本地限制：在本地开发时，Stripe 无法直接访问 localhost 的 Webhook 路径，因此必须**部署到线上（如 Vercel）**进行真实测试。
  • 测试卡号：测试时可使用 Stripe 提供的官方测试卡号（如 4242...）验证流程是否通畅。
  • 切入生产：一旦测试通过，只需在 Stripe 后台切入正式模式，并更换上述四个环境变量为正式版的 Key，即可开始真实收钱。

理解 Stripe 操作的隐喻： Stripe 的接入就像是为你的商店安装了一个自动售货机。后台配置是“上架商品”；环境变量是“机器的秘钥”；而 Webhook 就像是售货机在顾客塞入钱币并弹出商品后，给店主发的一条“货已卖出，请记账”的短信。没有这条短信，你的服务器（店主）就不知道该给用户（顾客）发放积分。

avatar
文章
阅读
粉丝