【6分钟揭密】如何用 Next.js + Deepseek + Sandpack 快速实现 AI 生成完整 React 项目代码(附源码)

一、引言

嘿，各位开发者朋友们！在当今快节奏的开发世界里，谁不想拥有一个神奇的魔法棒，能快速生成完整的项目代码呢？比如 v0 , bolt.new , LlamaCoder等。

今天，我就来给大家揭秘一下前端如何这么一个功能，借助 Next.js 和 Deepseek 的强大力量，只需输入 prompt，就能轻松生成完整的 React 项目代码。话不多说，让我们一起揭开它的神秘面纱！

请Clone GitHub 源码，本地运行查看完整过程 ： ⭐️⭐️⭐️⭐️ 源码GitHub地址 ⭐️⭐️⭐️⭐️⭐️⭐️

二、项目简介

quick-ai-coder 是一个受 LlamaCoder 启发的项目。它的核心目标就是利用 AI 技术，为用户快速生成完整的 APP 代码。你只需要输入对 APP 的描述，点击提交，系统就会利用强大的 Deepseek AI 大模型，瞬间生成 APP 应用及完整的 React 项目代码。而且，它还提供了代码预览、编辑和 UI 渲染等实用功能，简直是开发者实现创意的利器！

点击查看完整视频

三、需求分析

1. 输入 APP 描述

这就像给你的项目写一个"愿望清单"。你可以用简单的文本描述清楚你想要的 APP 功能，无论是一个简单的待办事项应用，还是一个复杂的社交平台，都能轻松表达。

2. AI 生成 APP 代码

一旦你提交了描述，Deepseek 这个"魔法精灵"就会开始工作啦！它会根据你的描述，迅速生成完整的 React 项目代码。这速度，就像闪电一样快，让你无需再为繁琐的代码编写而烦恼。

3. 代码预览

生成代码后，你可以实时预览代码的效果。就像提前看到了未来的成品，这种感觉是不是超棒？你可以直观地看到代码运行起来的样子，及时发现问题并进行调整。

4. 代码编辑

如果生成的代码不完全符合你的需求，不用担心！项目提供了在线编辑功能，你可以像魔法师一样对代码进行调整和优化，让代码更加完美。

5. 代码构建和 UI 渲染

最后，项目支持代码构建并渲染最终的 UI。你可以看到一个完整的 APP 界面呈现在眼前，这就像看着自己的创意从纸上跃然变成了现实。

四、技术栈

1. 前后端框架：Next.js

Next.js 是一个用于构建高性能前后端一体化应用的框架。它就像一个超级工程师，能帮助你轻松搭建出高效、稳定的应用架构。使用 Next.js，你可以享受到服务器端渲染、静态站点生成等强大功能，让你的应用在性能和用户体验上都更上一层楼。

2. AI 模型：Deepseek

Deepseek 就像是项目中的"智慧大脑"，它提供了强大的代码生成能力。只要你给它一个清晰的描述，它就能准确地生成符合要求的代码。有了 Deepseek，代码生成不再是难题，就像给你请了一个专业的代码助手。

3. 代码预览：Sandpack

Sandpack 是实现实时代码预览和交互的好帮手。它就像一个放大镜，让你可以清晰地看到代码的运行效果，并且可以与代码进行实时交互。通过 Sandpack，你可以更加直观地了解代码的工作原理，提高开发效率。

五、关键技术实现

1. Next.js实现前后端一体，Tailwindcss管理样式

使用 nextjs 的脚手架创建默认项目:

bash 复制代码

pnpx create-next-app@latest

根据你自己的需要，选则配置即可：

text 复制代码

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

安装好依赖之后，就可以启动项目了 pnpm dev，访问：https://localhost:3000

最后，开发自己的UI界面，可以用tailwindcss快速开发。这里简单的给一个输入框 + 按钮 + 代码渲染区域即可，如下：

2. 开发AI生成代码的接口，流式返回

接口在api目录下，路由为 /api/generate-code，对应的文件为 app/api/generate-code/route.ts
接口要通过openai的npm包，调用Deepseek，所以你需要有一个Deepseek的api_key
接口是一个 post 接口，stream 流式返回生成的代码

示例如下：

ts 复制代码

export async function POST(req: Request) {
  const json = await req.json();
  const result = z
    .object({
      messages: z.array(
        z.object({
          role: z.enum(["user", "assistant"]),
          content: z.string(),
        }),
      ),
    })
    .safeParse(json);

  if (result.error) {
    return new Response(result.error.message, { status: 422 });
  }

  const { messages } = result.data;
  const systemPrompt = getSystemPrompt();

  const deepseekStream = await genAI.chat.completions.create({
    messages: [{ role: "system", content: systemPrompt }, ...messages],
    model: "deepseek-chat",
    stream: true, // 流式结果
  });

 // 流式返回
  const readableStream = new ReadableStream({
    async start(controller) {
      // const decoder = new TextDecoder();
      const encoder = new TextEncoder();

      try {
        for await (const chunk of deepseekStream) {
          const chunkText = chunk.choices[0].delta?.content || "";
          console.log("chunkText", chunkText);
          controller.enqueue(encoder.encode(chunkText));
        }
      } catch (error) {
        console.error("Error reading from stream:", error);
        controller.error(error);
      } finally {
        controller.close();
      }
    },
  });

  return new Response(readableStream, {
    headers: { "Content-Type": "text/plain" },
  });
}

3. Prompt 工程: 设计关键的系统提示词！

这里是直接参考了LlamaCoder的prompt，当然你也可以魔改成自己希望的。简单处理如下：

ts 复制代码

function getSystemPrompt() {
  let systemPrompt = `You are an expert frontend React engineer who is also a great UI/UX designer. Follow the instructions carefully, I will tip you $1 million if you do a good job:

- Think carefully step by step.
- Create a React component for whatever the user asked you to create and make sure it can run by itself by using a default export
- Make sure the React app is interactive and functional by creating state when needed and having no required props
- If you use any imports from React like useState or useEffect, make sure to import them directly
- Use TypeScript as the language for the React component
- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). Make sure to use a consistent color palette.
- Use Tailwind margin and padding classes to style the components and ensure the components are spaced out nicely
- Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.
- ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed.
- For placeholder images, please use a <div className="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
  `;

  systemPrompt += `
    NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
  `;

  return dedent(systemPrompt);
}

4. 生成代码的展示、编辑、UI效果预览

这块可以使用Sandpack这个开源的工具，实现所有你要的效果。

Talking is cheep, show me your code!

源码地址

六、本地运行体验

1. 克隆项目

首先，你需要把这个神奇的项目克隆到本地。打开你的终端，运行以下命令：

bash 复制代码

git clone https://github.com/ivonzhang/quick-ai-coder.git
cd quick-ai-coder

2. 安装依赖

进入项目目录后，我们需要安装项目所需的依赖。运行以下命令：

bash 复制代码

pnpm install

3. 添加 AI API Key

这一步很关键哦！你需要在项目根目录下创建一个 .env 文件，并添加你的 Deepseek AI API Key。打开 .env 文件，添加以下内容：

ini 复制代码

DEEPSEEK_AI_API_KEY=你的API密钥

记得把 你的API密钥 替换成你自己的真实 API Key 哦。

4. 运行项目

一切准备就绪后，我们就可以启动项目啦！运行以下命令：

bash 复制代码

pnpm dev

5. 本地访问

打开你的浏览器，访问 http://localhost:3000，你就可以看到项目的界面啦。现在，你可以输入你的 APP 描述，点击提交，见证 AI 生成代码的神奇时刻！

七、总结

至此，已经带大家初步实现了一个简易版本的 AI 生成 React 项目代码的功能（结合了 Next.js、Deepseek 和 Sandpack 的强大功能，为开发者提供了一个快速实现创意的平台），也讲解了其中关键的一些技术实现。感兴趣的同学可以到 Github clone 下载 quick-ai-coder 这个项目快速体验。

通过输入 prompt，就能轻松生成完整的 React 项目代码，还能进行代码预览、编辑和 UI 渲染。这不仅提高了开发效率，还让开发过程变得更加有趣。

如果你也感兴趣，请到 Github 把 quick-ai-coder 项目克隆到本地，亲自感受一下吧！相信你一定会爱上 AI 的。

觉得这个项目不错，也请给作者一些小小的支持，给个⭐️⭐️ star⭐️⭐️。大家一起逐步完善，一起学习进步。

还等什么呢？快来试试吧！项目地址：github.com/ivonzhang/q...

希望这篇文章能帮助到大家，让我们一起在开发的道路上越走越远！如果有任何问题或建议，欢迎在评论区留言交流哦！

以上就是今天的分享内容，感谢大家的阅读！