📝

架构揭秘：如何构建这个 AI 创意中台

SourceYasupo's Lab

Date2025-11-28

Tags

#FullStack#Next.js#Gemini

很多人问我这个网站是用什么构建的。这是一个基于 React 生态的现代全栈应用，旨在探索设计与 AI 的边界。以下是核心架构蓝图：

⚡️ 01. 核心框架 (Core Framework)

Next.js 14 (App Router) - 用于前后端一体化开发
TypeScript - 保证代码健壮性
Tailwind CSS - 实现原子化设计系统

🧠 02. 人工智能 (Artificial Intelligence)

Google Gemini Pro - 强劲的自然语言处理模型
Vercel AI SDK - 处理流式传输与 API 通信
Prompt Engineering - 精心调试的系统指令

这是后端连接 Gemini 模型的真实核心代码片段：

source_code.ts

// src/app/api/summarize/route.ts

export async function POST() {
  const apiKey = process.env.GEMINI_API_KEY;
  const genAI = new GoogleGenerativeAI(apiKey);
  
  // 使用最新的 Flash 模型以获得最快响应
  const model = genAI.getGenerativeModel({ 
    model: "gemini-flash-latest" 
  });

  const result = await model.generateContent(prompt);
  return NextResponse.json(result);
}