15分钟构建AI全栈MVP：NextJS + DeepSeek API实战教程

💡 快速MVP秘诀: 利用现代技术栈+AI API，可以在15分钟内构建出一个可部署的全栈应用，快速验证你的想法并获取首批用户。

AI商业画布生成器成品展示

项目概览

你将构建: 一个AI驱动的商业画布生成器，帮助创业者和产品经理快速构建商业模型

技术栈: Next.js 15 (App Router) + Shadcn UI + DeepSeek API

适合人群: 有基础前端知识的开发者，想要快速构建AI驱动的MVP

最终成果: 查看演示 | GitHub源码

最终效果展示

为什么这是一个好的MVP案例？

这个项目展示了现代MVP开发的核心要素：

快速实现: 15分钟从零到可用产品
有价值核心: 解决商业规划这一真实需求
技术杠杆: 利用AI API提供核心价值，而非自己构建复杂功能
高扩展性: 可轻松迭代添加更多功能
易于获取用户: 产品经理和创业者有明确需求，容易找到前100位用户

准备工作

1. 开发环境准备

确保安装了最新版 Node.js（推荐v18+）
安装pnpm: npm install -g pnpm
编辑器推荐：VS Code 或 Cursor

2. 下载代码模板

选择以下任一方式获取起始模板：

pnpm dlx degit jackiexiao/next-shadcn-template my-app

或访问以下仓库手动下载：

GitHub: https://github.com/jackiexiao/next-shadcn-template
Gitee(国内): https://gitee.com/jackiegeek/next-shadcn-template

代码模板目录结构

3. 获取AI API密钥

有两种方式获取DeepSeek API访问：

方式1: 使用Sealos统一API服务（推荐，支持国内多种模型）

访问Sealos注册账号
在"AI代理"服务中创建API密钥
获得的API密钥格式为sk-xxxxxx

方式2: 直接使用DeepSeek官方API

访问DeepSeek官网注册账号
在开发者设置中创建API密钥

4. 配置环境变量

在项目根目录创建.env文件，添加以下内容：

OPENAI_API_BASE_URL=https://aiproxy.hzh.sealos.run/v1
OPENAI_API_KEY=sk-your-api-key-here
OPENAI_MODEL_NAME=deepseek-chat

同时创建.env.example文件（不含真实密钥）作为模板示例。

开发步骤

步骤1: 启动项目（2分钟）

cd my-app
pnpm install
pnpm dev

访问 http://localhost:3000 确认项目正常运行。

步骤2: 创建API端点（5分钟）

在app/api/generate/route.ts文件中实现处理AI请求的端点：

import { NextResponse } from 'next/server';
import { OpenAI } from 'openai';
 
// 初始化OpenAI客户端
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: process.env.OPENAI_API_BASE_URL,
});
 
export async function POST(req: Request) {
  try {
    const { idea } = await req.json();
    
    if (!idea) {
      return NextResponse.json(
        { error: "请提供业务创意" },
        { status: 400 }
      );
    }
 
    // 调用AI API生成商业画布
    const response = await openai.chat.completions.create({
      model: process.env.OPENAI_MODEL_NAME || 'deepseek-chat',
      messages: [
        {
          role: "system",
          content: "你是一位经验丰富的商业分析师，擅长帮助创业者分析商业模式。"
        },
        {
          role: "user",
          content: `基于用户输入的产品"${idea}"生成商业模式画布的九大要点，内容精炼，词汇精准直接。请按以下格式生成JSON响应：
          
          {
            "客户细分": [
              { "point": "point1" },
              { "point": "point2" }
            ],
            "价值主张": [
              { "point": "point1" },
              { "point": "point2" }
            ],
            // 包含其他模块：渠道通路、客户关系、收入来源、核心资源、关键业务、重要合作、成本结构
          }`
        }
      ],
      temperature: 0.7,
      response_format: { type: "json_object" }
    });
 
    // 解析AI返回的结果
    const content = response.choices[0].message.content;
    let canvasData;
    
    try {
      canvasData = JSON.parse(content || '{}');
    } catch (error) {
      console.error('解析JSON出错:', error);
      return NextResponse.json(
        { error: "AI返回结果解析失败" },
        { status: 500 }
      );
    }
 
    return NextResponse.json({ canvas: canvasData });
  } catch (error) {
    console.error('API调用出错:', error);
    return NextResponse.json(
      { error: "处理请求时出错" },
      { status: 500 }
    );
  }
}

步骤3: 创建用户界面（5分钟）

修改app/page.tsx文件，实现输入表单和展示结果的界面：

"use client";
 
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Loader2 } from "lucide-react";
 
export default function Home() {
  const [idea, setIdea] = useState("");
  const [canvas, setCanvas] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
 
  async function handleSubmit(e) {
    e.preventDefault();
    if (!idea.trim()) return;
    
    setLoading(true);
    setError("");
    
    try {
      const response = await fetch("/api/generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ idea }),
      });
      
      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || "生成商业画布时出错");
      }
      
      setCanvas(data.canvas);
    } catch (err) {
      setError(err.message || "请求处理失败，请重试");
      console.error(err);
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <main className="flex min-h-screen flex-col items-center p-4 md:p-24">
      <div className="max-w-5xl w-full space-y-8">
        <div className="text-center space-y-2">
          <h1 className="text-3xl font-bold">商业画布生成器</h1>
          <p className="text-gray-500">
            输入你的创业想法，AI 将帮你生成完整的商业模式画布
          </p>
        </div>
 
        <form onSubmit={handleSubmit} className="flex gap-2">
          <Input
            value={idea}
            onChange={(e) => setIdea(e.target.value)}
            placeholder="例如：一款基于AI的健身教练App"
            className="flex-1"
          />
          <Button type="submit" disabled={loading || !idea.trim()}>
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                生成中...
              </>
            ) : (
              "生成画布"
            )}
          </Button>
        </form>
 
        {error && <p className="text-red-500 text-center">{error}</p>}
 
        {canvas && (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {Object.entries(canvas).map(([category, items]) => (
              <Card key={category} className="overflow-hidden">
                <CardHeader className="bg-gray-50 p-4">
                  <CardTitle className="text-lg">{category}</CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <ul className="list-disc pl-5 space-y-1">
                    {Array.isArray(items) && 
                      items.map((item, index) => (
                        <li key={index}>{item.point}</li>
                      ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}