Back
ZJY

ZJY

Codofly AI 模板 - 新手完整快速开始指南

Codofly AI 模板 - 新手完整快速开始指南

title: 'Codofly AI 模板 - 新手完整快速开始指南' description: '15分钟内搭建AI聊天机器人网站的详细步骤指南。从环境配置到首次部署 - 您需要知道的一切。' author: name: 'ZJY' src: '/avatar.jpg' date: '2025-01-16' image: '/blog/banner.svg'

Codofly AI 模板快速开始指南

Codofly AI 模板 - 新手完整快速开始指南

恭喜您购买了 Codofly AI 模板！这份详细指南将带您从零开始搭建您的 AI 聊天机器人网站。完成本教程后，您将拥有一个完全功能的 AI 聊天机器人网站，可以在本地运行并准备部署。

🎯 您将构建什么

完成本指南后，您将拥有：

  • ✅ 一个完全功能的 AI 聊天机器人网站
  • ✅ 用户认证系统（GitHub、Google、邮箱）
  • ✅ Stripe 支付集成
  • ✅ 使用 Prisma 的数据库设置
  • ✅ 本地开发环境
  • ✅ 准备生产部署

📋 前置条件

开始之前，请确保您有：

🚀 步骤 1：项目设置（3 分钟）

1.1 克隆并安装依赖

# 克隆您的模板（替换为您的实际仓库 URL）
git clone https://github.com/yourusername/your-ai-template.git
cd your-ai-template

# 使用 pnpm 安装依赖（推荐）
pnpm install

# 替代方案：使用 npm
npm install

1.2 验证安装

# 检查是否一切安装正确
pnpm dev

您应该看到类似输出：

▲ Next.js 15.2.0
- Local:        http://localhost:3000
- Ready in 2.3s

访问 http://localhost:3000 查看您的模板运行（没有环境变量时还不会完全功能）。

🔧 步骤 2：环境变量设置（5 分钟）

2.1 创建环境文件

在项目根目录创建 .env.local 文件：

# 创建环境文件
touch .env.local

2.2 必需的环境变量

将以下模板复制粘贴到您的 .env.local 文件中：

# ===========================================
# 必需 - 核心配置
# ===========================================

# 数据库（PostgreSQL）
DATABASE_URL="postgresql://username:password@localhost:5432/your_database_name"

# NextAuth.js 配置
NEXTAUTH_SECRET="your-super-secret-key-here-make-it-long-and-random"
NEXTAUTH_URL="http://localhost:3000"

# OpenAI API（AI 功能必需）
OPENAI_API_KEY="sk-your-openai-api-key-here"

# Stripe 配置（支付必需）
STRIPE_SECRET_KEY="sk_test_your_stripe_secret_key"
STRIPE_PUBLISHABLE_KEY="pk_test_your_stripe_publishable_key"
STRIPE_WEBHOOK_SECRET="whsec_your_webhook_secret"

# ===========================================
# 可选 - 认证提供商
# ===========================================

# GitHub OAuth（可选）
GITHUB_ID="your_github_client_id"
GITHUB_SECRET="your_github_client_secret"

# Google OAuth（可选）
GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

# ===========================================
# 可选 - 邮箱配置
# ===========================================

# Resend 邮箱服务（推荐）
AUTH_RESEND_KEY="re_your_resend_api_key"
AUTH_RESEND_FROM="noreply@yourdomain.com"

# 替代方案：SMTP 配置
EMAIL_SERVER="smtp://username:password@smtp.gmail.com:587"
EMAIL_FROM="noreply@yourdomain.com"

# ===========================================
# 可选 - 其他 AI 模型
# ===========================================

# Anthropic Claude（可选）
ANTHROPIC_API_KEY="sk-ant-your-anthropic-key"

# Google Gemini（可选）
GOOGLE_GENERATIVE_AI_API_KEY="your-google-gemini-key"

# ===========================================
# 可选 - 应用配置
# ===========================================

# 公共应用 URL（生产环境用）
NEXT_PUBLIC_APP_URL="https://yourdomain.com"

2.3 如何获取每个 API 密钥

🔑 OpenAI API 密钥

  1. 访问 OpenAI 平台
  2. 登录或创建账户
  3. 点击"创建新的密钥"
  4. 复制密钥（以 sk- 开头）

💳 Stripe 密钥

  1. 访问 Stripe 仪表板
  2. 注册或登录
  3. 转到"开发者" → "API 密钥"
  4. 复制"可发布密钥"和"密钥"
  5. 对于 webhook 密钥，转到"Webhooks" → "添加端点" → 复制签名密钥

🐙 GitHub OAuth（可选）

  1. 访问 GitHub 设置
  2. 点击"新的 OAuth 应用"
  3. 设置授权回调 URL：http://localhost:3000/api/auth/callback/github
  4. 复制客户端 ID 和客户端密钥

🔍 Google OAuth（可选）

  1. 访问 Google Cloud 控制台
  2. 创建新项目或选择现有项目
  3. 启用 Google+ API
  4. 创建 OAuth 2.0 凭据
  5. 设置授权重定向 URI：http://localhost:3000/api/auth/callback/google

🗄️ 步骤 3：数据库设置（3 分钟）

3.1 选择数据库提供商

选项 A：本地 PostgreSQL（高级）

# 本地安装 PostgreSQL
# macOS 使用 Homebrew：
brew install postgresql
brew services start postgresql

# 创建数据库
createdb your_database_name

选项 B：免费云数据库（推荐新手）

Neon（推荐）

  1. 访问 Neon
  2. 免费注册
  3. 创建新项目
  4. 复制连接字符串
  5. 替换 .env.local 中的 DATABASE_URL

Supabase（替代方案）

  1. 访问 Supabase
  2. 创建新项目
  3. 转到设置 → 数据库
  4. 复制连接字符串

3.2 运行数据库迁移

# 生成 Prisma 客户端
pnpm prisma generate

# 运行数据库迁移
pnpm prisma db push

# 可选：打开 Prisma Studio 查看数据库
pnpm prisma studio

您应该看到类似输出：

✅ 您的数据库现在与您的架构同步。

🎨 步骤 4：自定义您的品牌（2 分钟）

4.1 更新网站信息

编辑 app/layout.tsx：

export const metadata: Metadata = {
  title: '您的 AI 聊天机器人 - 智能对话',
  description: '体验我们先进聊天机器人的 AI 驱动对话未来。',
  // ... 其余配置
};

4.2 更新英雄区域

编辑 messages/zh.json：

{
  "marketing": {
    "title": "您的 AI 聊天机器人名称",
    "description": "您为用户提供的独特价值主张",
    "hero": {
      "badge": "🤖 您的自定义徽章",
      "button": "开始聊天"
    }
  }
}

4.3 替换图片

  • 用您的 logo 替换 /public/logo.svg
  • 用您的网站预览更新 /public/og.png
  • 用您的个人资料图片自定义 /public/avatar.jpg

🚀 步骤 5：测试您的设置（2 分钟）

5.1 启动开发服务器

pnpm dev

5.2 测试核心功能

  1. 访问首页：转到 http://localhost:3000
  2. 测试认证：点击"立即开始"并尝试登录
  3. 测试 AI 聊天：转到 /chat 并发送消息
  4. 测试支付：转到 /pricing 并尝试测试购买

5.3 常见问题和解决方案

问题："数据库连接失败"

解决方案：检查 .env.local 中的 DATABASE_URL

问题："OpenAI API 错误"

解决方案：验证您的 OPENAI_API_KEY 是否正确

问题："Stripe 错误"

解决方案：确保您使用的是测试密钥（以 sk_test_ 开头）

问题："认证不工作"

解决方案：检查您的 OAuth 提供商配置

🎉 步骤 6：部署到生产环境（5 分钟）

6.1 部署到 Vercel（推荐）

  1. 推送到 GitHub：
git add .
git commit -m "初始设置完成"
git push origin main
  1. 部署到 Vercel：
    • 访问 Vercel
    • 导入您的 GitHub 仓库
    • 在 Vercel 仪表板中添加环境变量
    • 部署！

6.2 生产环境的环境变量

在 Vercel 仪表板中，添加这些环境变量：

DATABASE_URL=your_production_database_url
NEXTAUTH_SECRET=your_production_secret
NEXTAUTH_URL=https://yourdomain.vercel.app
OPENAI_API_KEY=sk-your-openai-key
STRIPE_SECRET_KEY=sk_live_your_live_stripe_key
STRIPE_PUBLISHABLE_KEY=pk_live_your_live_stripe_key
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret

6.3 配置 Stripe Webhooks

  1. 转到 Stripe 仪表板 → Webhooks
  2. 添加端点：https://yourdomain.vercel.app/api/stripe/webhook
  3. 选择事件：checkout.session.completed、invoice.payment_succeeded
  4. 将 webhook 密钥复制到您的环境变量中

🔧 高级配置

自定义 AI 模型

编辑 app/api/chat/route.ts 来自定义您的聊天机器人：

export async function POST(req: Request) {
  const { messages } = await req.json();

  // 自定义您的系统提示
  const systemPrompt = '您是[您的业务]的有用 AI 助手。始终保持专业和乐于助人。';

  const response = await openai.chat.completions.create({
    model: 'gpt-4', // 在此更改模型
    messages: [{ role: 'system', content: systemPrompt }, ...messages],
    stream: true,
  });

  // ... 其余实现
}

自定义定价计划

编辑 constants/tier.tsx：

export const TIER = {
  FREE: {
    name: '免费版',
    price: 0,
    credits: 10,
    features: ['10 条免费消息', '基础支持'],
  },
  PRO: {
    name: '专业版',
    price: 19.99,
    credits: 1000,
    features: ['1000 条消息', '优先支持', '高级功能'],
  },
};

📊 监控和分析

内置分析

模板包括：

  • Google Analytics 集成
  • 用户行为跟踪
  • 收入监控
  • 性能指标

数据库监控

# 查看您的数据库
pnpm prisma studio

# 检查数据库状态
pnpm prisma db status

🚨 故障排除

常见错误

"找不到模块"错误

# 清除缓存并重新安装
rm -rf node_modules .next
pnpm install

"数据库架构不同步"

# 重置并同步数据库
pnpm prisma db push --force-reset

"环境变量未加载"

  • 确保 .env.local 在项目根目录
  • 重启您的开发服务器
  • 检查变量名中的拼写错误

获取帮助

如果遇到问题：

  1. 检查日志：查看终端输出中的错误消息
  2. 验证环境变量：确保所有必需变量都已设置
  3. 测试各个组件：分别尝试每个功能
  4. 查看文档：参考每个服务的官方文档

🎯 下一步

恭喜！您的 AI 聊天机器人网站现在正在运行。接下来要做的是：

1. 进一步自定义

  • 更新设计以匹配您的品牌
  • 添加自定义功能
  • 配置其他 AI 模型
  • 设置自定义域名

2. 彻底测试

  • 测试所有用户流程
  • 验证支付处理
  • 检查移动端响应性
  • 与真实用户测试

3. 启动您的业务

  • 设置分析
  • 创建营销内容
  • 在社交媒体上发布
  • 开始获取客户

4. 扩展和优化

  • 监控性能
  • 收集用户反馈
  • 添加新功能
  • 为增长优化

📚 其他资源

🤝 支持

需要帮助？我们在这里为您服务：

  • 文档：查看我们的综合文档
  • 社区：加入我们的 Discord 服务器
  • 邮件支持：通过 support@codofly.com 联系我们
  • GitHub Issues：报告错误和请求功能

准备好构建您的 AI 业务了吗？ 您现在拥有启动 AI 聊天机器人网站所需的一切。开始自定义，彻底测试，然后启动您的业务！

本指南涵盖了 Codofly AI 模板的完整设置过程。如果您仔细遵循这些步骤，您将在 15 分钟内拥有一个完全功能的 AI 聊天机器人网站。

Codofly AI
Copyright © 2025 Codofly AI
All rights reserved
Made with ❤️ by zjy365
TwitterGitHub

Product

PricingBlogContact

Legal

Privacy PolicyTerms of Service

Social

TwitterGitHub

Codofly AI