Claude Code + Cursor + Next.js 15：从0到1构建现代多模型AI聊天平台

tbapman同学
305 阅读7分钟

使用最新AI工具链构建全栈AI聊天应用的完整实战指南

🚀 项目概览

本文将详细介绍如何使用 Claude Code + Cursor + Next.js 15 技术栈，从零开始构建一个支持多AI模型的现代聊天平台。项目集成了 OpenAI、Anthropic、Google Gemini、DeepSeek 等主流AI服务商，实现了流式响应、用户认证、会话管理等完整功能。

🔗 项目地址

🛠️ 技术栈

  • 前端：Next.js 15 + React 19 + TypeScript + Tailwind CSS + Ant Design
  • 后端：Next.js API Routes + MongoDB + Mongoose
  • AI集成：OpenAI SDK + Anthropic SDK + Google Generative AI + DeepSeek API
  • 认证：JWT + bcryptjs
  • 部署：PM2 + Nginx + SSL

💡 核心亮点

1. 多模型统一接口设计

// AI提供商配置（src/lib/ai-providers.ts）
export const AVAILABLE_MODELS: ModelConfig[] = [
  {
    id: "deepseek-chat",
    name: "DeepSeek Chat",
    provider: "deepseek",
    model: "deepseek-chat",
    access: "anonymous", // 匿名可用
    limits: { anonymous: 5, login: 20, pro: Infinity }
  },
  {
    id: "claude-3-5-haiku-20241022",
    name: "Claude 3.5 Haiku",
    provider: "anthropic",
    model: "claude-3-5-haiku-20241022",
    access: "anonymous",
    limits: { anonymous: 5, login: 20, pro: Infinity }
  }
  // ... 更多模型配置
];

2. 流式响应架构

实现了统一的流式响应处理，支持不同AI提供商的流式输出：

// 统一流式响应接口
async *streamResponse(modelId: string, messages: ChatMessage[], options: StreamOptions = {}) {
  const modelConfig = getModelConfig(modelId);
  
  switch (modelConfig.provider) {
    case "openai":
      yield* this.streamOpenAI(messages, modelConfig.model);
      break;
    case "anthropic":
      yield* this.streamAnthropic(messages, modelConfig.model);
      break;
    case "gemini":
      yield* this.streamGemini(messages, modelConfig.model);
      break;
    case "deepseek":
      yield* this.streamDeepSeek(messages, modelConfig.model, options);
      break;
  }
}

3. 推理内容展示

特别支持 DeepSeek Reasoner 等推理模型的思维过程展示：

// 支持推理内容的流式处理
if (delta.reasoning_content) {
  streamChunk.reasoning_content = delta.reasoning_content;
}

📊 数据库设计

用户表 (User)

interface IUser extends Document {
  username: string;        // 用户名（3-20字符，唯一）
  email: string;          // 邮箱（唯一，自动转小写）
  password: string;       // 密码（bcrypt加密，6位以上）
  createdAt: Date;        // 创建时间
}

话题表 (Topic)

interface ITopic extends Document {
  userId: mongoose.Types.ObjectId;  // 用户ID外键
  title: string;                    // 对话标题（自动基于首条消息生成）
  createdAt: Date;                  // 创建时间
  updatedAt: Date;                  // 更新时间
}

消息表 (Message)

interface IMessage extends Document {
  userId: mongoose.Types.ObjectId;     // 用户ID外键
  topicId: mongoose.Types.ObjectId;    // 话题ID外键
  role: 'user' | 'assistant';         // 消息角色
  content: string;                     // 消息内容
  reasoning?: string;                  // 推理内容（可选，用于推理模型）
  createdAt: Date;                     // 创建时间
}

🏗️ 项目搭建过程

第一阶段：Claude Code 快速搭建框架

使用以下提示词让 Claude Code 生成基础框架：

使用next.js创建一个全栈应用:要求使用pnpm,mongoose,tailwind,主要是整合openai,anthropic，gemini，deepseek等 api，提供一个对话补全接口，接口要求以stream形式返回

生成结果：

  • ✅ 完整的 Next.js 15 项目结构
  • ✅ 多AI提供商集成
  • ✅ 流式响应API实现
  • ✅ 基础UI界面
  • ✅ 开箱即用的聊天功能

第二阶段：UI优化与用户体验提升

参考 Claude 官网的简洁设计风格，对界面进行了全面优化：

主要改进：

  • 🎨 采用现代化的卡片式布局
  • 📱 响应式设计，支持移动端
  • 🔄 实时流式输出效果
  • 🎯 模型选择器与权限控制
  • 📝 Markdown 渲染支持

第三阶段：Cursor 精细化开发

使用 Cursor 进行细节完善和功能增强：

核心功能实现

1. 匿名聊天支持

// 匿名聊天API端点（src/app/api/chat/anonymous/route.ts）
export async function POST(request: NextRequest) {
  const { messages, model, extra_body } = await request.json();
  
  // 匿名用户模型限制
  if (["gpt-4.1", "claude-sonnet-4", "gemini-2.5-pro"].includes(model)) {
    return NextResponse.json({
      success: false,
      message: "模型不可用",
      errorCode: "MODEL_NOT_ALLOWED"
    }, { status: 400 });
  }
  
  // 直接调用AI服务，无需用户认证
  const aiProviders = new AIProviders();
  // ... 流式响应处理
}

2. 权限分级系统

type AccessLevel = "anonymous" | "login" | "pro";

interface UsageLimit {
  anonymous: number;    // 匿名用户调用次数
  login: number;       // 登录用户调用次数  
  pro: number;         // 会员用户调用次数
}

3. 智能会话管理

  • 自动生成对话标题（基于首条消息）
  • 支持会话重命名和删除
  • 消息持久化存储
  • 实时同步更新

🔧 技术实现细节

流式响应处理

前端使用 Server-Sent Events (SSE) 接收流式数据：

const response = await fetch("/api/chat", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(requestBody),
  signal: abortController.signal
});

const reader = response.body?.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  
  const chunk = decoder.decode(value, { stream: true });
  // 处理流式数据更新UI
}

推理模型特殊处理

针对 DeepSeek Reasoner 等推理模型的特殊适配：

// 检测推理模型
const isReasoningModel = (model: string): boolean => {
  return model.includes("reasoner") || model.includes("reasoning");
};

// 添加推理参数
if (isReasoningModel(selectedModel)) {
  requestBody.extra_body = { chain_of_thought: 1 };
}

安全性设计

1. JWT认证机制

// 中间件验证（src/middleware.ts）
const token = request.cookies.get('token')?.value;
const decoded = jwt.verify(token, JWT_SECRET);

2. 密码安全

// bcrypt加密存储
UserSchema.pre<IUser>('save', async function(next) {
  if (!this.isModified('password')) return next();
  const salt = await bcrypt.genSalt(10);
  this.password = await bcrypt.hash(this.password, salt);
});

🚀 部署配置

自动化部署脚本

使用 ChatGPT 生成的一键部署脚本（deploy.sh）：

#!/usr/bin/env bash
set -e

# 项目配置
APP_NAME="ai-chat-app"
REPO="git@github.com:tbapman/ai-chat-app.git"
DOMAIN="chat.pulchic.com"
PM2_NAME="chat-ai"
PORT=3000

# 代码更新
cd "$APP_DIR"
git fetch --all
git reset --hard origin/main

# 依赖安装与构建
pnpm install
pnpm build

# PM2进程管理
pm2 start npm --name "$PM2_NAME" -- start
pm2 save
pm2 startup systemd

Nginx反向代理配置

server {
  listen 443 ssl http2;
  server_name chat.pulchic.com;
  
  # SSL配置
  ssl_certificate /path/to/ssl/cert.pem;
  ssl_certificate_key /path/to/ssl/key.key;
  
  # API代理配置
  location /api/ {
    proxy_pass http://127.0.0.1:3000/api/;
    
    # SSE流式响应优化
    proxy_buffering off;
    proxy_cache off;
    proxy_read_timeout 3600s;
    add_header X-Accel-Buffering "no";
  }
  
  # 静态资源代理
  location / {
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header Host $host;
  }
}

💰 成本分析与优化建议

Claude Code 使用成本

  • 实际花费：20美元
  • 建议替代：Kimi K2（性价比更高）
  • 使用策略：大框架用Claude Code，细节优化用Cursor

image.png

AI API成本优化

  1. 模型分级：为不同用户群体提供不同等级模型
  2. 使用限制：设置每日调用次数限制
  3. 缓存策略：相似问题缓存响应结果
  4. 负载均衡：多个API Key轮换使用

🎯 核心价值与创新点

1. 多模型聚合平台

  • 统一接口管理多个AI服务商
  • 智能模型选择与切换
  • 成本效益最优化

2. 用户体验创新

  • 匿名访问降低使用门槛
  • 实时流式响应提升体验
  • 推理过程可视化展示

3. 技术架构优势

  • TypeScript全栈类型安全
  • 模块化设计易于扩展
  • 现代化部署方案

📈 后续优化方向

功能扩展

  • 多媒体文件上传支持
  • 对话导出功能
  • 团队协作功能
  • API接口开放

性能优化

  • Redis缓存层
  • CDN静态资源加速
  • 数据库查询优化
  • 前端代码分割

商业化考虑

  • 会员订阅系统
  • 使用量统计分析
  • 支付集成
  • 企业版功能

💭 开发心得与思考

工具组合策略

  1. Claude Code：适合快速搭建项目框架，代码质量高但成本较高
  2. Cursor：适合细节优化和功能完善，成本可控且效率很高
  3. ChatGPT：适合生成配置文件和脚本，在特定场景下很有用

技术选型思考

  • Next.js 15：全栈开发效率高，但新版本可能存在兼容性问题
  • Mongoose：MongoDB ODM成熟稳定，适合快速开发
  • Ant Design：组件丰富，但包体积较大
  • JWT认证：简单易用，但需要考虑token安全性

项目管理经验

  1. 版本控制：及时提交代码，避免大幅度改动丢失
  2. 环境变量：敏感信息务必使用环境变量管理
  3. 错误处理：完善的错误处理机制提升用户体验
  4. 性能监控：部署后持续监控系统性能指标

🏆 总结

通过这个项目，我们成功构建了一个功能完整的多模型AI聊天平台。整个过程展示了现代AI辅助开发工具的强大能力，同时也验证了合理的工具组合策略能够显著提升开发效率。

项目的核心价值在于：

  1. 快速验证：从想法到可用产品仅需几小时
  2. 技术整合：多个AI服务商的统一管理
  3. 用户体验：流畅的实时对话体验
  4. 商业价值：具备实际部署和商业化的可能性

对于想要快速构建AI应用的开发者，这个项目提供了一个很好的参考模板和实践指南。

avatar
文章
阅读
粉丝