如何构建一个自动在Chatgpt + Next.js [OpenAI API + NEXT.JS + Tailwind CSS]中自动生成LP的Web应用程序]

URL已复制！

像“ Readdy”这样的无代码AI工具吸引了人们的注意。
我们现在正处于任何人可以轻松使用AI的时代，但是
您是否曾经想过“我想将AI纳入我的服务”或“我想更自由地自定义

在本文中，我们将向您展示如何使用
Next.js（App Router） ， Tailwind CSS和OpenAI的聊天完成API自动生成LPS（登录页面）的Web应用程序

想要快速工作的模板的人有点麻烦的

本文介绍的模板现已开始销售！

该聊天机器人UI模板可在多个平台上出售。

该结构非常适合那些想先尝试一些有效的东西的人，“我想立即使用它而不构建环境”，或者“我想检查整个代码”。

在gumroad购买笔记

您也可以从每个页面中检查其他模板：

gumroad 笔记

关于所使用的技术

该LP生成应用是使用以下技术构建的：

next.js（应用程序路由器配置）: 基于React的框架使您可以构建统一的页面和API路由。我使用从SRC/App应用程序路由器配置
尾风CSS: 实用第一的CSS框架，可让您使用类有效地组织设计。快速创建一个响应迅速而简单的UI
OpenAI API（聊天完成）: /V1/CHAT/COLESTIONS与基于GPT的模型进行交互的机制我们使在环境变量GPT-4.1-MINI和GPT-3.5-Turbo）
API路线 +提取: 我正在使用next.js api root（ /api /chat 浏览器和OpenAI API之间的服务器处理使用Fetch（“/api/Chat”）给客户

创建OpenAI API键

这次，我们将使用OpenAI API，因此我们需要创建一个OpenAI API密钥。
您将被重定向到OpenAI API仪表板中的API键。选择“创建新的秘密密钥”。

您可以将项目选出任何您喜欢的项目，然后选择适合要使用的模型的权限，或选择全部生成它。

创建完成后，将创建一个以“ SK-”开头的字符串，因此我们将在此之后使用它。
请注意不要放弃此钥匙。

环境建设

首先，为下一步准备开发环境。

创建一个项目

我将创建一个项目。
基本上，我认为将所有内容都放在默认设备上是可以的，但是只要您可以根据需要更改它，就可以。
（该项目使用尾风CSS，因此最好将其设置为“是”。默认值为是。）

$ npx create-next-app lp-generator-starter-app -typescript需要安装以下软件包：create-next-app@15.4.4可以继续操作吗？ （y）您想使用ESLINT吗？ …否 /是✔您想使用尾风CSS吗？ …否 /是✔您想在`src /`目录中的代码吗？ …否 /是✔您想使用Turbopack进行“ Next Dev”？ …否 /是✔您想自定义导入别名（`@ /*'默认情况下）？ …否 /是，在 / LP-Generator-Starter中创建一个新的Next.js应用程序。使用NPM。 Initializing project with template: app-tw Installing dependencies: - react - react-dom - next Installing devDependencies: - typescript - @types/node - @types/react - @types/react-dom - @tailwindcss/postcss - tailwindcss - eslint - eslint-config-next - @eslint/eslintrc added 336 packages, and audited 337 packages in 13s 137软件包正在寻找资金运行“ NPM Fund”，以获取发现0个漏洞的详细信息，初始化了一个GIT存储库。成功！创建的LP生成器 - 启动器 /LP-Generator-Starter

如果出现“成功！创建的lp-generator-starter”，则会出现项目的创建。
创建项目后，移动目录。

CD LP-Generator-Starter

设置OpenAI API密钥

在根中创建一个.env

OpenAI_API_KEY = SK -... OpenAi_Model = gpt-4.1-Mini System_prompt =您是创建LPS的有用助手。

简短描述：

OpenAI_API_KEY：OpenAI API访问所需的私钥（由个人帐户发行）
OpenAi_Model：要使用的型号名称。根据目的， GPT-3.5-turbo ， GPT-4.1-Mini ，等。
System_prompt：初始消息指定AI的个性和角色（聊天开始时有效）

启动开发服务器

运行以下命令将启动模板：

NPM运行开发

实施UI（聊天屏幕）

聊天用户界面src/app/page.tsx中合并
源代码的总量如下：

“使用客户端”；从“ react”导入{usestate};导出默认函数home（）{//每个输入字段的输入表单的状态管理const [productName，setProductName] = usestate（“”）; const [类别，setCategory] = usestate（“ web”）; const [description，setDescription] = usestate（“”）; const [功能，setFeatures] = usestate（[“”，“”，“”]）; const [targetuser，settargetuser] = usestate（“”）; const [目标，setGoal] = usestate（“”）; const [tone，settone] = usestate（“”）; const [style，setStyle] = usestate（“”）; const [referenceurl，setReferenceurl] = usestate（“”）; const [加载，setloading] = usestate（false）; const [结果，setResult] = usestate（“”）; // lp生成过程//函数调用API并生成着陆页html const generatelp = async（）=> {setloading（true）; setResult（“”）;尝试{const res =等待fetch（“/api/generate-lp”，{方法：“ post”，标题：{“ content-type”：“ application/json”}，body：json.stringify（{productName，类别，类别，描述，特征，特征，目标，目标，目标，音调，inther，style，style，style，style，referent，reference，grouction，refferent，gustamerl，}） const data =等待res.json（）; setResult（data.html ||“无法生成html。”）; } catch（err）{setResult（“发生错误。”）; }最后{setloading（false）; }}; //下载生成的HTML作为文件const dlownloadhtml =（）=> {const blob = new blob（[结果]，{type：“ text/html”}）; const url = url.CreateObjectUrl（Blob）; const a = document.createelement（“ a”）; a.href = url; A.Download =“ Landing_page.html”; A.Click（）; url.revokeObjecturl（url）; }; //在新窗口中的预览//预览新浏览器窗口中生成的HTML const openpreview =（）=> {const preview = window.open（“”，“，” _blank”）; if（preview）{preview.document.write（result）; preview.document.close（）; }};返回 （ <main className="min-h-screen bg-gray-900 text-white p-6"><div className="max-w-3xl mx-auto space-y-8"><h1 className="text-3xl font-bold text-center"> LP发电机</h1>{/ *表单输入 - 输入字段 */} <Input label="Product Name" value={productName} onChange={setProductName} /><Select label="Category" value={category} onChange={setCategory} options={[ { value: "web", label: "Web Service" }, { value: "cafe", label: "Cafe / Restaurant" }, { value: "app", label: "Application" }, { value: "lesson", label: "Online Course" }, { value: "other", label: "Other" }, ]} /><Textarea label="Short Description" value={description} onChange={setDescription} /> <div> <label className =“ block text-sm mb-1”> key特征（最多3）</label> {trautry.map（（（f，i）=>） }}}}占位符= {{`farter $ {i + 1}`} className =“ W- full Mb-2 P-2圆形BG-Gray-800边框边框灰色-600” />）} < /div> <input> <input> <input> <input abor =“ target groute” valituser“ valituser” valituser“ valituser” valituser} onChange = {targetuser} onChange onChange onChange = n callet calle = {settargetUser} and settargetuser}} value = {目标} onChange = {setGoal} /> <input label =“语音” value = {tone} onChange = {settone} /> <input} onChange = {setReferenceUrl}/> {/ *生成按钮 */} <div className =“ text-center”> <按钮onclick = {generatelp} disabled = {loading} className ='px-6 py-6 py-3 py-3 bg-green-500圆形 -  500圆形杂音： ？ "Generating..." : "Generate LP"} </button> </div> {/* Result & Actions */} {result && ( <div className="space-y-4"> {/* Display result (plain text) */} <div className="whitespace-pre-wrap bg-gray-800 border border-gray-600 p-4 rounded max-h-[400px] overflow-y-auto text-sm“> {结果} </div> {/ *预览下载 */} <div className =“ flex gap-4 just-4 just-center”> <button onclick = {openpreview} className =“ px-4 py-4 py-2 bg-blue-500 hover-500 hover：bg-blue-blue-600 text-text-text-text-text-text-white futtan </futtan </fatterm </futch </futtan </preview </previele </farte className =“ PX-4 PY-2 BG-PURPLE-500 HOVER：BG-PURPLE-600 TEXT-WHITE圆形”>下载html </button> </div> </div> </div> </div>）} </div> </div> </main>）; } // Common Input Form Component Component Input({ label, value, onChange, }: { label: string; value: string; onChange: (v: string) => void; }) { return ( <div> <label className="block text-sm mb-1">{label}</label> <input value={value} onChange={(e) => onChange（e.target.value）} className =“ W-Full P-2圆形BG-Gray-800边框边框灰色-600” /> < /div>）; } //常见选择框//可重用的选择组件函数选择（{label，value，onChange，options，}：{label：string; value; value; onchange; onChange ：（ v：string）=> void; options; option {value; string; string; string; string;} [];} [];} [];}; value = {value} onChange = {（e）=> onChange（e.target.value）} className =“ w-full P-2圆形BG-Gray-800边框边框边框灰色-600”> {options.map（option.map（opt）=>（opt）=>（<option） </select> </div>）; } //常见的textarea //可重复使用的textarea组件函数textarea（{label，value，onChange，}：{label：string; value; value; onChange; onChange; onChange ：（ onChange = {（e）=> onChange（e.target.value）} lows = {3} className =“ W- full P-2圆形BG-Gray-800 Border Border-border-Gray-600” /> < /div>）; }

控制输入表格的状态

const [productName，setProductName] = usestate（“”）; const [类别，setCategory] = usestate（“”）; const [description，setDescription] = usestate（“”）; const [功能，setFeatures] = usestate（[“”，“”，“”]）; const [targetuser，settargetuser] = usestate（“”）; const [目标，setGoal] = usestate（“”）; const [tone，settone] = usestate（“”）; const [style，setStyle] = usestate（“”）; const [referenceurl，setReferenceurl] = usestate（“”）; const [加载，setloading] = usestate（false）; const [结果，setResult] = usestate（“”）;

简短描述：

产品名称：产品名称
类别：类型（Web，Cafes，Apps等）
描述：产品描述（短文本）
功能：最多三个功能的阵列
目标用户：目标用户（例如，独资经营者）
目标：LP的目的（例如购买，注册）
音调：tonmana（友善，正式等）
样式：设计气氛（可爱，凉爽等）
参考文献：参考LP的URL
加载：您是否等待API响应
结果：生成的HTML字符串

LP生成处理和API调用

const generatelp = async（）=> {setloading（true）; setResult（“”）;尝试{const res =等待fetch（“/api/generate-lp”，{方法：“ post”，标题：{“ content-type”：“ application/json”}，body：json.stringify（{productName，类别，类别，描述，特征，特征，目标，目标，目标，音调，inther，style，style，style，style，referent，reference，grouction，refferent，gustamerl，}） const data =等待res.json（）; setResult（data.html ||“无法生成html。”）; } catch（err）{setResult（“发生错误。”）; }最后{setloading（false）; }};

简短描述：

输入数据发送/API /生成LP
如果成功， HTML将存储在结果

预览显示过程

const OpenPreview =（）=> {const Preview = window.open（“”，“ _Blank”）; if（preview）{preview.document.write（result）; preview.document.close（）; }};

简短描述：

在新标签中显示生成的HTML并预览实际LP

HTML下载处理

const drowst dlowndhtml =（）=> {const blob = new blob（[结果]，{type：“ text/html”}）; const url = url.CreateObjectUrl（Blob）; const a = document.createelement（“ a”）; a.href = url; A.Download =“ Landing_page.html”; A.Click（）; url.revokeObjecturl（url）; };

简短描述：

使用BLOB并允许A.Download将其保存为静态HTML

输出结果 +预览下载按钮

{结果 ＆＆ （ <div className="space-y-4"><div className="whitespace-pre-wrap bg-gray-800 border border-gray-600 p-4 rounded max-h-[400px] overflow-y-auto text-sm"> {结果}</div><div className="flex gap-4 justify-center"> <button onClick={openPreview} className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded" >预览</button><button onClick={downloadHTML} className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded" >下载html</button></div></div> ）

简短描述：

生成的LP的HTML直接显示在屏幕上。
您可以使用“预览”在浏览器中查看它，并使用“下载”保存文件

服务器端实现（OpenAI API集成）

LP生成交互将客户端的请求发送到
/api /Generate-lp 然后返回继电器并响应服务器上的OpenAI聊天API。

服务器端源代码的总量如下：

从“ next/server”导入{nextrequest，nextresponse}; // API端点（POST）//自动以HTML格式生成着陆页//端点端点以生成基于用户输入导出async函数帖子（req：req：nextrequest）{try {//从client contract/ reactect const react const resce const {// req.json（）; //验证所需字段，如果（！productName ||！description ||！目标）{返回nextresponse.json（{error：“丢失必需字段：productName，description或goars”。”，}，}，{状态：400}）; } //构建提示符发送到OpenAi API const提示=`您是专业撰稿人和HTML开发人员。您的任务是为以下产品生成一个干净，完整的HTML着陆页。基于三个主要部分的结构：第一视图，身体和关闭。说明： - 输出完整且有效的HTML文档（include）<!DOCTYPE html> ，，，，<html> ，，，，<head> ， 和<body>）。 - 仅英语。 - 请勿使用Markdown格式化结果。 - 不要在代码之前或之后添加任何说明。 - 仅使用RAW HTML作为输出。 - 不包括JavaScript或外部CSS框架。 - 使用内联或内部样式<style> for layout and design. - Use a clear, persuasive tone for copywriting. - Use semantic HTML elements (header, section, footer, etc.). Sections to include: 1. First View - Headline (h1) with the product name - Subheadline with a short summary - Prominent CTA button (e.g. "Start Now") 2. Body - Detailed product description - Bullet point list of key features - Optional paragraph about who it’s for 3. Closing - Final persuasive message - CTA button (again) - Optional tagline (e.g. “No credit card required”) Product Info: - Product Name: ${productName} - Category: ${category} - Description: ${description} - Key Features: ${features.filter(Boolean).join(" / ") || "None"} - Target Audience: ${targetUser || "Not specified"} - Goal or Call-to-Action: ${goal} - Tone of Voice: ${tone || "Neutral"} - Visual Style: ${style || "Clean"} - Reference URL: ${referenceUrl || "None"} Respond only with the HTML. Do not include markdown code blocks or explanations.`; // OpenAI APIを呼び出す // Call OpenAI Chat API const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: process.env.OPENAI_MODEL || "gpt-4o", messages: [ { role: "system", content: "You are a helpful assistant and skilled HTML designer.", }, { role: "user", content: prompt, }, ], temperature: 0.8, }), }); const data = await response.json(); // エラーハンドリング（OpenAIの応答に問題がある場合） // Handle OpenAI error response if (data.error) { console.error("OpenAI API Error:", data.error); return NextResponse.json( { error: "Failed to generate landing page." }, { status: 500 } ); } // HTML出力を取得 // Extract the generated HTML content const html = data.choices?.[0]?.message?.content || ""; // クライアントへHTMLを返却 // Return HTML back to client return NextResponse.json({ html }); } catch (err) { // サーバー側の予期せぬエラー対応 // Catch any server-side error console.error("Server Error:", err); return NextResponse.json( { error: "Internal server error." }, { status: 500 } ); } }

基本配置（使用邮政方法接收请求）

从“ next/server”导入{nextrequest，nextresponse};导出异步函数帖子（req：nextrequest）{const {productName，catery，description，features，targetuser，targetuser，goal，inther style，style，style，referenceurl，} =等待req.json（）;

简短描述：

定义仅限于发布API端点
接收来自客户端（ JSON

检查所需的字段

  如果（！productName ||！描述||！目标）{返回nextresponse.json（{error：“缺失必需字段：productName，description或goal。”}，{状态：400}）; }

简短描述：

如果未输入产品名称，描述或目的，400错误，并将暂停处理。
通过前侧验证时的安全性

及时生成（提供给chatgpt的说明）

const提示=`您是专业撰稿人和HTML开发人员。您的任务是为以下产品生成一个干净，完整的HTML着陆页。基于三个主要部分的结构：第一视图，身体和关闭。说明： - 输出完整且有效的HTML文档（包括<!DOCTYPE html>，，，，<html> ，，，，<head> ， 和<body>）。 - 仅英语。 - 请勿使用Markdown格式化结果。 - 不要在代码之前或之后添加任何说明。 - 仅使用RAW HTML作为输出。 - 不包括JavaScript或外部CSS框架。 - 使用内联或内部样式<style> for layout and design. - Use a clear, persuasive tone for copywriting. - Use semantic HTML elements (header, section, footer, etc.). Sections to include: 1. First View - Headline (h1) with the product name - Subheadline with a short summary - Prominent CTA button (e.g. "Start Now") 2. Body - Detailed product description - Bullet point list of key features - Optional paragraph about who it’s for 3. Closing - Final persuasive message - CTA button (again) - Optional tagline (e.g. “No credit card required”) Product Info: - Product Name: ${productName} - Category: ${category} - Description: ${description} - Key Features: ${features.filter(Boolean).join(" / ") || "None"} - Target Audience: ${targetUser || "Not specified"} - Goal or Call-to-Action: ${goal} - Tone of Voice: ${tone || "Neutral"} - Visual Style: ${style || "Clean"} - Reference URL: ${referenceUrl || "None"} Respond only with the HTML. Do not include markdown code blocks or explanations.`;

简短描述：

动态生成指令（提示）发送到chatgpt
嵌入产品信息并详细指定配置和输出格式，您可以生成高质量的HTML。
发送更好的提示，您可以生成更好的HTML，因此请尝试自定义。

向OpenAI API发送请求

const响应=等待fetch（“ https://api.openai.com/v1/chat/completions”，{方法：“ post”，标题：{授权：`bearer $ {bearer $ {process.env.openai_api_key} process.env.openai_model ||。 const data =等待响应.json（）;

简短描述：

HTTP POST请求发送到OpenAI API（聊天完成）
型号， api_key ， system_prompt等.env加载
消息数组具有系统角色（个性）和用户角色（指令）

检查和返回响应或处理错误

  if（data.error）{console.error（“ openai api错误：”，data.error）;返回nextresponse.json（{错误：“无法生成着陆页。”}，{状态：500}）; } const html = data.choices？。[0]？消息？.content || “”返回nextresponse.json（{html}）; }

简短描述：