MENÚ

Cómo crear una aplicación web que genera automáticamente LPS en ChatGPT + Next.js [OpenAI API + Next.js + Tailwind CSS]

anuncio
Reaccionar
Cómo crear una aplicación web que genera automáticamente LPS en ChatGPT + Next.js [OpenAI API + Next.js + Tailwind CSS]

las herramientas de IA sin código como "Readdy" han estado atrayendo la atención.
Ahora estamos en una época en la que alguien puede usar fácilmente la IA, pero ¿
alguna vez has pensado: " Quiero incorporar IA en mis servicios " o " Quiero personalizarlo más libremente

En este artículo, le mostraremos cómo crear
una aplicación web que genera automáticamente LPS (páginas de destino) usando Next.js (enrutador de aplicaciones) , CSS de viento de cola y API de finalización de chat de OpenAI

aquellos que encuentran una molestia escribir código o
aquellos que desean una plantilla con una interfaz de usuario que funcione rápidamente, también hemos publicado plantillas en las siguientes plataformas.

¡Las plantillas presentadas en este artículo ya están a la venta!

Esta plantilla de UI de chatbot está disponible para la venta en múltiples plataformas.

La estructura es perfecta para aquellos que quieren probar algo que funcione primero, "Quiero usarla de inmediato sin construir un entorno" o "Quiero verificar todo el código".

También puede consultar otras plantillas de cada una de mi página:

Tabla de contenido

Sobre la tecnología utilizada

Esta aplicación de generación LP se crea utilizando las siguientes tecnologías:

Next.js (configuración del enrutador de aplicaciones)

Un marco basado en React le permite crear páginas unificadas y rutas API. Utilizo una configuración de enrutador de aplicaciones a partir de SRC/APP

CSS de viento de cola

Un marco CSS de utilidad primero que le permite organizar eficientemente sus diseños utilizando clases. Crear rápidamente una interfaz de usuario receptiva y simple

API Operai (finalizaciones de chat)

Este es un mecanismo para interactuar con los modelos basados en GPT utilizando el /v1/chat/terminal hemos facilitado cambiar entre variables de entorno GPT-4.1-Mini y GPT-3.5-TURBO

Rutas API + buscar

Estoy escribiendo el procesamiento del servidor que transmite entre el navegador y la API de OpenAI utilizando la raíz de la API Next.js ( /API /CHAT para los clientes que usan Fetch ("/API/CHAT")

Crear una tecla API de OpenAI

Esta vez, utilizaremos la API de OpenAI, por lo que necesitaremos crear una tecla API de OpenAI.
Serás redirigido a las teclas API en el tablero de la API de Operai. Seleccione "Crear nueva clave secreta".

Puede seleccionar el proyecto de cualquier forma que desee y seleccionar permisos para adaptarse al modelo que desea usar, o seleccionar todo para generarlo.

Una vez que se complete la creación, se creará una cadena que comienza con "SK-", por lo que la usaremos después de esto.
Tenga cuidado de no dejar ir esta llave.

Construcción ambiental

Primero, prepare un entorno de desarrollo para Next.js.

Creando un proyecto

Crearé un proyecto.
Básicamente, creo que está bien dejar todo en los valores predeterminados, pero está bien siempre que pueda cambiarlo según sea necesario.
(Este proyecto usa CSS Tailwind, por lo que es mejor establecerlo en sí. El valor predeterminado es sí).

$ npx create-next-app lp-generator starter --App --TyPescript necesita instalar los siguientes paquetes: create-next-app@15.4.4 ¿Aceptar para continuar? (y) ✔ ¿Le gustaría usar Eslint? … No / sí ✔ ¿Le gustaría usar CSS de viento de cola? … No / sí ✔ ¿Le gustaría su código dentro de un directorio `src /`? … No / sí ✔ ¿Le gustaría usar Turbopack para 'Next Dev`? ... no / sí ✔ ¿Le gustaría personalizar el alias de importación (`@ /*` por defecto)? ... no / sí creando una nueva aplicación Next.js en / LP-Generator-Starter. Usando NPM. Inicialización del proyecto con plantilla: App -tw Instalación de dependencias: - React - React -Dom - Siguiente Instalación de DevDependencias: - TypeScript - @tipos/node - @tipos/react - @tipos/react -dom - @tailwindcss/postcss - TailWinDcss - eSlint - Eslint -Config -next - @eslint/eslinTRc. 13S 137 Los paquetes están buscando financiamiento Ejecutar `NPM Fund` para detalles de 0 vulnerabilidades inicializadas un repositorio de git. ¡Éxito! Starter LP-Generator AT /LP-Generator-Starter

Si aparece "Success! Se creó LP-Generator-Starter AT /LP-Generator-Starter", la creación del proyecto está completa.
Una vez que haya creado el proyecto, mueva el directorio.

CD LP-Generator-Starter

Establecer la tecla API de OpenAI

Cree un .env en la raíz 

OPERAI_API_KEY = SK -... OPERAI_MODEL = GPT-4.1-MINI SYSTEM_PROMPT = Usted es un asistente útil para crear LPS.

Descripción breve:

  • OPERAI_API_KEY: Clave privada requerida para el acceso a la API de OpenAI (emitida por una cuenta personal)
  • OpenAI_Model: el nombre del modelo a usar. Dependiendo del propósito, GPT-3.5-Turbo , GPT-4.1-Mini , etc.
  • System_Prompt: mensaje inicial que especifica la personalidad y el rol de la IA (efectivo cuando el chat comienza)

Iniciar el servidor de desarrollo

Ejecutar el siguiente comando iniciará la plantilla:

NPM Run Dev

Implementación de la interfaz de usuario (pantalla de chat)

La interfaz de usuario de chat se consolida en
SRC/App/Page.tsx La cantidad total del código fuente es el siguiente:

"Use el cliente"; import {useState} de "react"; Exportar función predeterminada Home () {// Gestión de estado del formulario de entrada // Estado para cada campo de entrada const [ProductName, setProductName] = useState (""); const [categoría, setCategory] = useState ("web"); const [descripción, setDescription] = useState (""); const [características, setFeature] = useState (["", "", ""]); const [TargetUser, SetTargetUser] = useState (""); const [meta, setGoal] = useState (""); const [tone, settone] = useState (""); const [estilo, setstyle] = useState (""); const [referenceUrl, setReferenceUrl] = useState (""); const [carga, setloading] = useState (falso); const [resultado, setResult] = useState (""); // proceso de generación LP // Función para llamar a API y generar la página de destino HTML const generatelp = async () => {setloading (true); setResult (""); Pruebe {const res = await fetch ("/api/generate-lp", {método: "post", encabezados: {"content-type": "application/json"}, cuerpo: json.stringify ({productName, categoría, descripción, características, TargetUser, objetivo, tono, estilo, referencia,}); const data = await res.json (); setResult (data.html || "No se pudo generar html"); } catch (err) {setResult ("ocurrió un error"); } Finalmente {setloading (falso); }}; // Descargue el html generado como un archivo const descargarhtml = () => {const blob = new blob ([resultado], {type: "text/html"}); const url = url.createObjectUrl (blob); const a = document.createElement ("A"); a.href = url; a.download = "aterrador_page.html"; A. hinchado (); URL.ROVOKEOBJECTURL (URL); }; // Vista previa en la nueva ventana // Vista previa el HTML generado en una nueva ventana del navegador const OpenPreview = () => {const Preview = Window.open ("", "_blank"); if (vista previa) {Preview.document.write (resultado); Preview.document.close (); }}; devolver ( <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"> Generador de LP</h1> {/ * Entradas de formulario - campo de entrada */} <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> <etiqueta classname = "block text-sm mb-1"> características de clave (hasta 3) </selet> {características.map ((f, i) => (<input key = {i} valor = {f} onChange = {(e) => {const NewFeature = [... características]; newFeateRes [i] = e.Target.value; setfeatures (newFeateRes); PLACETERTER = {`característica $ {i + 1}`} classname = "w-full mb-2 p-2 redondeado BG-GRAY-800 Border-Gray-600" />))} < /div> <divirador de entrada Label = "Valor de la audiencia" TargetUser} ONChange = {SettarGetUser} /> <Input Label = "Call a Action /Goal" Value "Value" TargetUser} ONChange = {SettarGetUser} /> <input Label = "Llamado a la acción /meta" Valor "Valor de la audiencia" onchange = {setGoal} /> <input etiqueta = "tono de voz" valor = {tone} onchange = {setTone} /> <input etiqueta = "Visual style" valor = {style} onchange = {setStyle} /> <input etiqueta = "referencia LP url (opcional)" valor = {referenceUrl} Onny className = "Text-Center"> <Button OnClick = {GenerAtElp} DISPLED = {Loading} classname = "PX-6 PY-3 BG-Green-500 Rounded Hover: BG-Green-600 Black-Black-Semibold Disabled: Opacidad-50"> {Cargar? "Generando ...": "Generar LP"} </boton> </div> {/ * result & Actions */} {result && (<div className = "space-y 4"> {/ * visualización de texto (sin formato) */} <div className = "whitespesp-wrap-wrap bg-gray-800 border-gray-600 p-4 ronda ronda ronda-h- [400px] [400px] [400px] Overflow-y-Auto Text-sm "> {resultado} </div> {/ * vista previa Descargar */} <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 "> Preview <Button <Button <Button </Button Button <Button onClick = {downloadHtml} classname = "PX-4 PY-2 BG-Purple-500 Hover: Bg-Purple-600 Text-White Rounded"> Descargar html </botón> </div> </div>)} </div> </main>); } // Input de componente de formulario de formulario de entrada común ({etiqueta, valor, onchange,}: {etiqueta: string; value: string; onChange: (v: string) => void;}) {return (<div> <etiqueta classname = "bloque-sm mb-1"> {etiqueta} </sel etiqueta <1 input valor = {valor} OnChange = {e) => onchange (E.Target.Value. className = "W-Full P-2 redondeado BG-GRAY-800 BORDER BORDER BORDER-GRAY-600" /> </div>); } // Common Select Box // reutilizable seleccionar componente de componente Select ({etiqueta, valor, onchange, options,}: {etiqueta: string; valor: string; onchange: (v: string) => void; options: {value: string; etiqueta: string} [];}) {return (<div> <etiqueta className = "Bloque de texto mb-1"> {etiqueta} </etiqueta> </etiqueta> Onchange = {(e) => onChange (e.target.value)} classname = "w-full p-2 redondeado bg-gris-800 borde de borde-gray-600"> {options.map (((opt) => (<opción key = {opt.value} valor = {opt.value}> {opt.label} </}/óptico} valor = {opt.value}> {opt.label} </}/}/Select) </div>); } // Common TextAREA // reutilizable TextAREA Función TextARea ({etiqueta, valor, onchange,}: {etiqueta: string; valor: string; onchange: (v: v: string) => void;}) {return (<div> <belse etiqueta classname = "bloque-sm-sm-1"> {etiqueta} </selt> <extarea Value = {value} Onchange} (e) Onchange (e.target.value)} filas = {3} classname = "w-full p-2 redondeado bg-gris-800 borde borde de borde-gray-600" /> </div>); }

Controlar el estado del formulario de entrada

const [productName, setProductName] = useState (""); const [categoría, setCategory] = useState (""); const [descripción, setDescription] = useState (""); const [características, setFeature] = useState (["", "", ""]); const [TargetUser, SetTargetUser] = useState (""); const [meta, setGoal] = useState (""); const [tone, settone] = useState (""); const [estilo, setstyle] = useState (""); const [referenceUrl, setReferenceUrl] = useState (""); const [carga, setloading] = useState (falso); const [resultado, setResult] = useState ("");

Descripción breve:

  • ProductName : Nombre del producto
  • Categoría : género (web, cafés, aplicaciones, etc.)
  • Descripción : Descripción del producto (texto corto)
  • Características : una matriz para ingresar hasta tres características
  • TargetUser : Usuarios objetivo (por ejemplo, propietarios únicos)
  • Objetivo : Propósito de LP (por ejemplo, compra, registro)
  • Tono : Tonmana (amistad, formal, etc.)
  • Estilo : el ambiente del diseño (lindo, genial, etc.)
  • ReferenceUrl : URL de referencia LP
  • Carga : si esperas o no la respuesta de la API
  • Resultado : cadena HTML generada

Procesamiento de generación de LP y llamadas de API

const generatelp = async () => {setloading (true); setResult (""); Pruebe {const res = await fetch ("/api/generate-lp", {método: "post", encabezados: {"content-type": "application/json"}, cuerpo: json.stringify ({productName, categoría, descripción, características, TargetUser, objetivo, tono, estilo, referencia,}); const data = await res.json (); setResult (data.html || "No se pudo generar html"); } catch (err) {setResult ("ocurrió un error"); } Finalmente {setloading (falso); }};

Descripción breve:

  • Envíe los datos de entrada /API /Generate-LP
  • Si tiene éxito, el HTML se almacenará en el resultado

Proceso de visualización de vista previa

const OpenPreview = () => {const previsor = window.open ("", "_blank"); if (vista previa) {Preview.document.write (resultado); Preview.document.close (); }};

Descripción breve:

  • Mostrar el HTML generado en una nueva pestaña y una vista previa del LP real

Procesamiento de descarga HTML

const descargarhtml = () => {const blob = new blob ([resultado], {type: "text/html"}); const url = url.createObjectUrl (blob); const a = document.createElement ("A"); a.href = url; a.download = "aterrador_page.html"; A. hinchado (); URL.ROVOKEOBJECTURL (URL); };

Descripción breve:

  • Use un blob y permita que A.Download lo guarde como HTML estático

Resultados de salida + Botón de descarga de vista previa

{resultado && ( <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"> {resultado}</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" >Vista previa</button> <button onClick={downloadHTML} className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded" >Descargar html</button></div></div> )}

Descripción breve:

  • El HTML del LP generado se muestra directamente en la pantalla.
  • Puede verlo en el navegador usando "Vista previa" y guardar archivos usando "Descargar"

Implementación del lado del servidor (integración de API de OpenAI)

La interacción de la generación de LP enviar una solicitud del cliente a
/API /Generate-LP luego devolver un relé y respuesta a la API de chat de OpenAI en el servidor.

La cantidad total del código fuente del lado del servidor es el siguiente:

import {nextuCeest, nexTResponse} de "Next/Server"; // API Endpoint (POST) // genera automáticamente una página de destino en formato html // punto final post para generar html de la página de destino basado en la entrada de entrada de usuario exportación de la función async post (req: nextequest) {try {// extraer el cuerpo de json del cliente // extraer la carga de solicitud const {productName, categoría, descripción, características, objetivo, objetivo, tono, estilo, referencia,},},} req.json (); // Valide los campos requeridos if (! ProductName ||! Descripción || } // Construye un indicador para enviar a OpenAI API const indic = `Usted es un redactor profesional y desarrollador HTML. Su tarea es generar una página de destino HTML limpia y completa para el siguiente producto. Estructurar en base a tres secciones principales: primera vista, cuerpo y cierre. Instrucciones: - ENCONTRA UN DOCUNTO HTML COMPLETO y VÁLIDO (incluir)<!DOCTYPE html> ,<html> ,<head> , y<body> ). - Solo inglés. - No formatea el resultado usando Markdown. - No agregue ninguna explicación antes o después del código. - Use solo HTML sin procesar como salida. - No incluya JavaScript o marcos CSS externos. - Use estilos en línea o internos<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 } ); } }

Configuración básica (solicitudes de recepción utilizando el método de publicación)

import {nextuCeest, nexTResponse} de "Next/Server"; Exportar Async Function Post (Req: NexTuCeest) {const {ProductName, Categoría, Descripción, características, TargetUser, Objetivo, Tono, Estilo, RefectionUrl,} = Await Req.json ();

Descripción breve:

  • Define los puntos finales de API que se limitan a postales
  • Recibe los parámetros (nombre del producto, descripción, propósito, etc.) enviados desde el lado del cliente ( JSON

Verifique los campos requeridos

  if (! ProductName ||! Descripción || }

Descripción breve:

  • Si no se ingresa el nombre del producto, la descripción o el propósito, un error 400 y se suspenderá el procesamiento.
  • Seguridad al pasar por la validación en la parte delantera

Generación de pedido (instrucciones dadas a chatgpt)

const indic = `Usted es un redactor profesional y desarrollador HTML. Su tarea es generar una página de destino HTML limpia y completa para el siguiente producto. Estructurar en base a tres secciones principales: primera vista, cuerpo y cierre. Instrucciones: - ENCONTRA UN DOCUMENTO HTML completo y válido (incluir<!DOCTYPE html> ,<html> ,<head> , y<body> ). - Solo inglés. - No formatea el resultado usando Markdown. - No agregue ninguna explicación antes o después del código. - Use solo HTML sin procesar como salida. - No incluya JavaScript o marcos CSS externos. - Use estilos en línea o internos<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.`;

Descripción breve:

  • Dinámicamente genera una instrucción (indicador) para enviar a chatgpt
  • integrar la información del producto y especificar el formato de configuración y salida en detalle , puede generar HTML de alta calidad.
  • Envíe un mejor mensaje y puede generar mejor HTML, así que intente personalizarlo.

Envíe una solicitud a la API de OpenAI

const responde = await fetch ("https://api.openai.com/v1/chat/completions", {método: "post", encabezados: {autorización: `bearer $ {process.env.openai_api_key}`, "Content-type": "Aplication/JSon", Body: JSON.STRINGIFIFY ({{Model Process.env.openai_model || const data = await respuesta.json ();

Descripción breve:

  • Envíe una solicitud de publicación HTTP a OpenAI API (finalizaciones de chat)
  • Modelo , api_key , system_prompt etc. se cargan desde .env
  • La matriz de mensajes tiene un rol de sistema (personalidad) y rol de usuario (instrucción)

Verifique y devuelva la respuesta o maneje los errores

  if (data.error) {console.error ("Error API de OpenAI:", data.error); return nexTResponse.json ({Error: "Error al generar la página de destino"}, {estado: 500}); } const html = data.Coices?. [0] ?. Mensaje? .Content || ""; return nexTResponse.json ({html}); }

Descripción breve:

  • Si la respuesta de chatgpt es → salida de registro + 500 error devuelve
  • Si la respuesta es normal, el HTML se devolverá al cliente usando JSON almacenado en la clave HTML

[Bonificación] cosas a tener en cuenta

Asegúrese de administrar
con .env para que nunca estén expuestos Si su tecla API se filtra, retire la tecla API del tablero de OpenAI.

El nombre del modelo es una variable de entorno, así que reemplácelo de acuerdo con el propósito.
La cantidad de dinero involucrado varía según el modelo, así que tenga cuidado al seleccionar un modelo.

Las indicaciones pueden cambiar el contenido generado, así que asegúrese de personalizar su mensaje.

Comprobación de operación

Una vez que haya hecho esto, ¡revisemos la operación!

Verá la pantalla a continuación, así que intente agregar la información al formulario de entrada y generarla.

¡Este LP fue generado! ! Bueno, lo generé con GPT-4O, pero supongo que es un compromiso.

Cuando lo generé con GPT-4.1-Mini, ¡se generó así!
Creo que al hacer el aviso un poco mejor o responder varias veces, podemos lograr algo un poco más de calidad. (Este era mi límite ...)

Información sobre ventas de plantillas

La aplicación automática de generación LP presentada en este artículo se vende como una plantilla que también se puede utilizar para fines comerciales.

¿Por qué vender plantillas?

Hemos preparado esto para aquellos que están experimentando las siguientes necesidades:

  • "Incluso si sigues los pasos, el entorno no funciona ..."
  • "Solo quiero comenzar con una muestra en movimiento".
  • "Miré mi blog y lo encontré útil, así que me gustaría comprarlo con el objetivo de apoyar y donar".

Incluso aquellos que no están acostumbrados a desarrollar el juego pueden comenzar y probarlo rápidamente con un esfuerzo mínimo

Ejemplos de uso de plantillas (ideas de personalización)

Esta plantilla es perfecta para fines de desarrollo personal y aprendizaje.
Por ejemplo, recomendamos modificar y expandir lo siguiente:

  • Permite insertar imágenes y logotipos en el LP generado
  • Agregar soporte de LP multilingüe (conmutación japonesa e inglesa, etc.)
  • Guardar y administrar los resultados generados (eliminar el historial de LPS anteriores)
  • Crear una función que se pueda alojar como está
  • Agregue una interfaz de usuario para elegir las indicaciones y plantillas de diseño

También es una buena práctica probarlo sobre una "base en serie" para los principiantes de programación.

¿Qué está incluido en la plantilla?

contiene
todo el código fuente para el proyecto que presentamos aquí Por lo tanto, no tiene que crear o configurar su propio proyecto desde cero, y puede iniciarlo de inmediato .

  • Formulario de entrada LP y vista previa de la interfaz de usuario con Next.js (enrutador de aplicaciones)
  • Implementación del lado del servidor con integración de API de OpenAI
  • Código fuente fácil de leer con comentarios
  • Estilo simple y fácil de mejorar con CSS de viento de cola
  • Archivos de configuración de inicio de Docker (DockerFile, Docker-Compose.yml)

*Para ejecutar, se requiere un entorno de ejecución básico como Node.js y Docker.

¡Las plantillas presentadas en este artículo ya están a la venta!

Esta plantilla de UI de chatbot está disponible para la venta en múltiples plataformas.

La estructura es perfecta para aquellos que quieren probar algo que funcione primero, "Quiero usarla de inmediato sin construir un entorno" o "Quiero verificar todo el código".

También puede consultar otras plantillas de cada una de mi página:

resumen

Esta vez, presentamos cómo construir
una aplicación de generación automática simple de página de destino (LP) utilizando la API de OpenAI y Next.js.

Mirando hacia atrás en los puntos:

  • La API de finalización de chat le permite generar HTML de alta calidad con solo algunas indicaciones
  • Next.js App Router + Tailwind CSS lo hace simple y fácil de personalizar
  • El uso de plantillas le permite comenzar desde un estado donde puede probarlo rápidamente, eliminando la molestia de construir un entorno.

Esta plantilla
se recomienda especialmente para que desean prototipos rápidamente de LPS que introducen productos , o
desean experimentar la automatización de LP

Intente usarlo como base para ajustar las indicaciones y diseños
para evolucionar en su propio generador LP No solo se recomienda como base para agregar características únicas y personalizar la interfaz de usuario.

¡Las plantillas presentadas en este artículo ya están a la venta!

Esta plantilla de UI de chatbot está disponible para la venta en múltiples plataformas.

La estructura es perfecta para aquellos que quieren probar algo que funcione primero, "Quiero usarla de inmediato sin construir un entorno" o "Quiero verificar todo el código".

También puede consultar otras plantillas de cada una de mi página:

Reaccionar
¡Comparte si quieres!

Quien escribió este artículo

Avatar de Taku Taku

Este es un blog que comencé a estudiar la seguridad de la información. Como nuevo empleado, sería feliz si pudieras mirar con un corazón amplio.
También está Teech Lab, que es una oportunidad para estudiar diversión de programación, por lo que si está interesado en el desarrollo de software, ¡asegúrese de echar un vistazo!

Artículos relacionados

Tabla de contenido