SPEISEKARTE

So erstellen Sie eine Web -App, die automatisch LPS in Chatgpt + Next.js generiert [OpenAI API + Next.js + Tailwind CSS]

Werbung
Reagieren
So erstellen Sie eine Web -App, die automatisch LPS in Chatgpt + Next.js generiert [OpenAI API + Next.js + Tailwind CSS]

haben
No-Code-KI-Tools wie "Readdy" Wir befinden uns jetzt in einer Zeit, in der jemand leicht KI verwenden kann, aber
haben Sie jemals gedacht: " Ich möchte KI in meine Dienste einbeziehen " oder " Ich möchte sie freier anpassen

In diesem Artikel zeigen wir Ihnen, wie Sie
eine Web -App erstellen, die mit Next.js (App -Router) , Tailwind CSS und OpenAs Chat -Abschlusspflichten

diejenigen, die es ein bisschen mühsam finden, Code zu schreiben, oder
diejenigen, die eine Vorlage mit einer Benutzeroberfläche wünschen, die schnell funktioniert, haben wir auch Vorlagen auf den folgenden Plattformen veröffentlicht.

Die in diesem Artikel eingeführten Vorlagen sind jetzt im Verkauf!

Diese Chatbot UI -Vorlage steht auf mehreren Plattformen zum Verkauf.

Die Struktur ist perfekt für diejenigen, die etwas ausprobieren möchten, das zuerst funktioniert: "Ich möchte es sofort verwenden, ohne eine Umgebung zu erstellen" oder "Ich möchte den gesamten Code überprüfen".

Sie können auch andere Vorlagen von jeder meiner Seite überprüfen:

Inhaltsverzeichnis

Über die verwendete Technologie

Diese LP -Generations -App wird mit den folgenden Technologien erstellt:

Next.js (App Router -Konfiguration)

Mit einem React-basierten Framework können Sie einheitliche Seiten und API-Routen erstellen. Ich verwende eine App -Router -Konfiguration ab SRC/App

Rückenwind -CSS

Ein Utility-First CSS-Framework, mit dem Sie Ihre Designs effizient mit Klassen organisieren können. Erstellen Sie schnell eine reaktionsschnelle und einfache Benutzeroberfläche

OpenAI -API (CHAT -Abschluss)

Dies ist ein Mechanismus für die Interaktion mit GPT-basierten Modellen mit dem /v1/chat/completions zwischen Umgebungsvariablen GPT-4,1-Mini und GPT-3,5-Turbo zu wechseln

API -Routen + abrufen

Ich schreibe die Serververarbeitung, die zwischen dem Browser und der OpenAI -API mit der nächsten.js -API -Root ( /API /CHAT Clients mit Fetch ("/api/chat")

Erstellen Sie einen OpenAI -API -Schlüssel

Dieses Mal werden wir die OpenAI -API verwenden, daher müssen wir einen OpenAI -API -Schlüssel erstellen.
Sie werden im OpenAI -API -Dashboard zu API -Schlüssel weitergeleitet. Wählen Sie "neue geheime Schlüssel erstellen".

Sie können das Projekt ausgewählt haben, wie Sie es mögen, und Berechtigungen für das Modell, das Sie verwenden möchten, oder alle auszuwählen, um es zu generieren.

Sobald die Erstellung abgeschlossen ist, wird eine Zeichenfolge, die mit "SK" beginnt, erstellt, sodass wir sie danach verwenden.
Bitte achten Sie darauf, dass dieser Schlüssel nicht gehen.

Umweltkonstruktion

Erstellen Sie zunächst eine Entwicklungsumgebung für Next.js.

Ein Projekt erstellen

Ich werde ein Projekt erstellen.
Grundsätzlich denke ich, dass es in Ordnung ist, alles bei den Standardeinstellungen zu lassen, aber es ist in Ordnung, solange Sie es bei Bedarf ändern können.
(In diesem Projekt wird Tailwind -CSS verwendet. Es ist daher am besten, es auf Ja einzustellen. Der Standard ist ja.)

$ npx create-next-App LP-Generator-Starter --app --Typescript müssen die folgenden Pakete installieren: create-next-app@15.4.4 OK, um fortzufahren? (y) ✔ Möchten Sie Eslint verwenden? … Nein / Ja ✔ Möchten Sie Rückenwind -CSS verwenden? … Nein / Ja ✔ Möchten Sie Ihren Code in einem SRC / ` -Verzeichnis? … Nein / Ja ✔ Möchten Sie Turbopack für `Next Dev` verwenden? … Nein / Ja ✔ möchten Sie den Import -Alias (`@ /*` standardmäßig) anpassen? … Nein / Ja Erstellen einer neuen nächsten.js-App in / LP-Generator-Starter. Verwenden von NPM. Initialisieren des Projekts mit Vorlage: App -TW Installieren von Abhängigkeiten: - React - React -Dom - Als nächstes installieren Sie DevDependencies: - TypeScript - @Typen/Knoten - @Typen/React - @typen/react -dom - @tailwindcss/postcss - Tailwindcss - Eslint - Eslint -config. 13S 137 Pakete suchen nach Finanzmitteln. NPM Fund "für Details gefunden 0 Schwachstellen initialisiert ein Git -Repository. Erfolg! Erstellte LP-Generator-Starter AT /LP-Generator-Starter

Wenn "Erfolg! Erstellt LP-Generator-Starter AT /LP-Generator-Starter" erscheint, ist die Projekterstellung abgeschlossen.
Wenn Sie das Projekt erstellt haben, verschieben Sie das Verzeichnis.

CD LP-Generator-Starter

Stellen Sie die OpenAI -API -Schlüssel ein

Erstellen Sie eine .env im Stamm 

Openai_api_key = sk -... openai_model = gpt-4.1-mini system_prompt = Sie sind ein hilfreicher Assistent für das Erstellen von LPS.

Kurzbeschreibung:

  • OpenAI_API_KEY: Private Schlüssel, der für den OpenAI -API -Zugriff erforderlich ist (ausgestellt durch ein persönliches Konto)
  • OpenAI_Model: Der zu verwendende Modellname. Abhängig von dem Zweck, GPT-3,5-Turbo , GPT-4,1-Mini usw.
  • SYSTEM_PROMPT: Erste Nachricht, in der die Persönlichkeit und Rolle der KI angibt (effektiv, wenn der Chat beginnt)

Starten Sie den Entwicklungsserver

Durch das Ausführen des folgenden Befehls wird die Vorlage gestartet:

NPM Run Dev

Implementierung der Benutzeroberfläche (CHAT -Bildschirm)

Die Chat -Benutzeroberfläche SRC/App/page.tsx konsolidiert
Die Gesamtmenge des Quellcodes lautet wie folgt:

"Client verwenden"; importieren {usestate} aus "react"; Standardfunktion exportieren home () {// Statusverwaltung des Eingabebilds // Status für jedes Eingabefeld const [productName, setProductName] = usestate (""); const [Kategorie, setCategory] = usustate ("web"); const [Beschreibung, setDescription] = usustate (""); const [Merkmale, SetFeatures] = Usestate (["", "", ","]); const [targetUser, settargetUser] = usustate (""); const [Ziel, SetGoal] = Usestate (""); const [ton, settone] = useSestate (""); const [style, setStyle] = useSestate (""); const [referenceUrl, setReference] = usustate (""); const [laden, setloading] = usustate (false); const [result, setResult] = usustate (""); // LP -Erzeugungsprozess // Funktion zum API aufrufen und die Zielseite html const Generatelp = async () => {setloading (true); setResult (""); try {const res = uaait fetch ("/api/generate-lp", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({{productName, kategorie, Beschreibung, Merkmale, TargetUser, Ton, Stil, Stil, Referenz,}),}); const data = warte res.json (); setResult (data.html || "Es wurde nicht generiert, html zu generieren."); } catch (err) {setResult ("Es ist ein Fehler aufgetreten"); } endlich {setloading (false); }}; // Die generierte HTML als Datei const downloadhtml = () => {const blob = neuer Blob ([Ergebnis], {Typ: "text/html"}) herunterladen; const url = url.createObjecturl (Blob); const a = document.createelement ("a"); a.reif = url; A.Download = "Landing_page.html"; A.Click (); Url.revokeObjecturl (URL); }; // Vorschau im neuen Fenster // Vorschau der generierten HTML in einem neuen Browserfenster const openPreview = () => {const preview = window.open ("", "_blank"); if (preview) {preview.document.write (result); preview.document.close (); }}; zurückkehren ( <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 -Generator</h1> {/ * Formulationseingänge - Eingabefeld */} <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"> Schlüsselfunktionen (bis zu 3) </label> {features.map ((f, i) => (<Eingabe key = {i} value = {f} onchange = {(e) => {constreatures = [... features]; newfeatures [i) {i]}}}}}}} ·} ·} · E. E. E. placeholder = {`feature $ {i + 1}`} className = "w-full Mb-2 p-2 gerundetes BG-Gray-800 Border-Gray-600" />)} < /div> <Input-Label = "Zielpublikum" value = {TargetUser} Onchange = {SETTAGERGEL}} /> <Personal =} =}} /> <E> <Pl. onChange={setGoal} /> <Input label="Tone of Voice" value={tone} onChange={setTone} /> <Input label="Visual Style" value={style} onChange={setStyle} /> <Input label="Reference LP URL (optional)" value={referenceUrl} onChange={setReferenceUrl} /> {/* Generate Button */} <div className = "text-center"> <button onclick = {generatelp} deaktiviert = {laden} classname = "px-6 py-3 bg-green-500 gerundet schwebe: bg-green-600 text-black font-semibold deaktiviert: OPCITACITY-50"> {laden? "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] Überlauf-y-auto text-sm "> {result} </div> {/ * preview download */} <div classname =" flex gap-4 justify-center "> <button onclick = {openPreview} className =" px-4 py-2 bg-bblue-500 Hover: BG-BLU-BUTH: onclick = {downloadHtml} className = "px-4 py-2 bg-purpur-500 hover: bg-purpur-600 text-weiß abgerundet"> Download html </button> </div> </div>)} </div> </main>); } // Gemeinsame Eingangsformularkomponentenkomponenteneingabe ({Label, Wert, Onchange,}: {Label: String; Wert: String; Onchange: (v: String) => void;}) {return (<Div> <label className = "block text-sm mb-1"> {label} </label> <Eingabewert = {value {value}}}} onchange (e.target.Value)} className = "W-Ful P-2 gerundetes BG-Gray-800 Border Border-Gray-600" /> < /div>); } // Common Select Box // Reusable Select Component function Select({ label, value, onChange, options, }: { label: string; value: string; onChange: (v: string) => void; options: { value: string; label: string }[]; }) { return ( <div> <label className="block text-sm mb-1">{label}</label> <select value={value} onChange={(e) => onChange(e.target.value)} className="w-full p-2 rounded bg-gray-800 border border-gray-600" > {options.map((opt) => ( <option key={opt.value} value={opt.value}> {opt.label} </option> ))} </select> </div>); } // Common textarea // Reusable Textarea Component function Textarea({ label, value, onChange, }: { label: string; value: string; onChange: (v: string) => void; }) { return ( <div> <label className="block text-sm mb-1">{label}</label> <textarea value={value} onChange={(e) => onchange (e.target.Value)} rows = {3} className = "W-Ful P-2 gerundetes BG-Gray-800 Border Border-600" /> < /div>); }

Steuerung des Status des Eingangsformulars

const [productName, setProductName] = usustate (""); const [Kategorie, setCategory] = usustate (""); const [Beschreibung, setDescription] = usustate (""); const [Merkmale, SetFeatures] = Usestate (["", "", ","]); const [targetUser, settargetUser] = usustate (""); const [Ziel, SetGoal] = Usestate (""); const [ton, settone] = useSestate (""); const [style, setStyle] = useSestate (""); const [referenceUrl, setReference] = usustate (""); const [laden, setloading] = usustate (false); const [result, setResult] = usustate ("");

Kurzbeschreibung:

  • Produktname : Produktname
  • Kategorie : Genre (Web, Cafés, Apps usw.)
  • Beschreibung : Produktbeschreibung (kurzer Text)
  • Funktionen : Ein Array zum Eingeben von bis zu drei Funktionen
  • TargetUser : Zielbenutzer (z. B. alleinige Eigentümer)
  • Ziel : Zweck von LP (z. B. Kauf, Registrierung)
  • Ton : Tonmana (Freundlichkeit, formell usw.)
  • Stil : Die Atmosphäre des Designs (süß, cool usw.)
  • Referenzurl : URL der Referenz LP
  • Laden : Ob Sie auf die API -Antwort warten oder nicht
  • Ergebnis : generierte HTML -Zeichenfolge

LP -Generierungsverarbeitung und API -Aufrufe

const Generatelp = async () => {setloading (true); setResult (""); try {const res = uaait fetch ("/api/generate-lp", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({{productName, kategorie, Beschreibung, Merkmale, TargetUser, Ton, Stil, Stil, Referenz,}),}); const data = warte res.json (); setResult (data.html || "Es wurde nicht generiert, html zu generieren."); } catch (err) {setResult ("Es ist ein Fehler aufgetreten"); } endlich {setloading (false); }};

Kurzbeschreibung:

  • Senden Sie die Eingabedaten /api /generieren
  • Bei Erfolg wird die HTML im Ergebnis

Vorschau -Anzeigeprozess

const openPreview = () => {const preview = window.open ("", "_blank"); if (preview) {preview.document.write (result); preview.document.close (); }};

Kurzbeschreibung:

  • Zeigen Sie die generierte HTML in einer neuen Registerkarte an und Vorschau der tatsächlichen LP

HTML -Download -Verarbeitung

const downloadhtml = () => {const blob = neuer Blob ([Ergebnis], {type: "text/html"}); const url = url.createObjecturl (Blob); const a = document.createelement ("a"); a.reif = url; A.Download = "Landing_page.html"; A.Click (); Url.revokeObjecturl (URL); };

Kurzbeschreibung:

  • Verwenden Sie einen Blob, und A.Download zu ermöglichen , ihn als statische HTML zu speichern

Ausgabeergebnisse + Vorschau -Download -Schaltfläche

{Ergebnis && ( <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"> {Ergebnis}</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" >Vorschau</button> <button onClick={downloadHTML} className="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded" >Download HTML</button></div></div> )}

Kurzbeschreibung:

  • Die HTML der erzeugten LP wird direkt auf dem Bildschirm angezeigt.
  • Sie können es im Browser mit "Vorschau" anzeigen und Dateien mit "Download" speichern

Serverseitige Implementierung (OpenAI-API-Integration)

Bei der Interaktion zur LP-Generierung eine Anfrage vom Client an
/api /generate-lp dann ein Relais und eine Antwort auf die Chat-API von OpenAI auf dem Server zurückgegeben.

Die Gesamtmenge des serverseitigen Quellcodes lautet wie folgt:

importieren {nexTrequest, nexTesponse} aus "next/server"; // API -Endpunkt (post) // generiert automatisch eine Zielseite im HTML -Format // Endpoint zum Generieren der Zielseite HTML basierend auf Benutzereingaben exportieren asynchronisierte Funktionen (Req: NexTrequest) {Try {// extrahieren JSON Body aus Client // Payload aus der Anfrage aus der Anfrage. req.json (); // Erforderliche Felder validieren if (! ProductName ||! Beschreibung ||! } // Eingabeaufforderung zum Senden an Openai API const Eingabeaufforderung = `Sie sind ein professioneller Texter und HTML -Entwickler. Ihre Aufgabe ist es, eine saubere, vollständige HTML -Zielseite für das folgende Produkt zu generieren. Strukturieren Sie es basierend auf drei Hauptabschnitten: Erste Ansicht, Körper und Schließen. Anweisungen: - Ausgabe eines vollständigen und gültigen HTML -Dokuments (inklusive)<!DOCTYPE html> Anwesend<html> Anwesend<head> , Und<body> ). - Nur Englisch. - Formatieren Sie das Ergebnis nicht mit Markdown. - Fügen Sie keine Erklärungen vor oder nach dem Code hinzu. - Verwenden Sie nur RAW -HTML als Ausgang. - Fügen Sie keine JavaScript- oder externen CSS -Frameworks hinzu. - Verwenden Sie Inline -Stile oder intern<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 } ); } }

Grundkonfiguration (Empfangen von Anforderungen mit der Post -Methode)

importieren {nexTrequest, nexTesponse} aus "next/server"; Exportieren Sie Async Funktionspost (Req: NexTrequest).

Kurzbeschreibung:

  • Definiert API -Endpunkte Post beschränkt sind
  • Empfängt die Parameter (Produktname, Beschreibung, Zweck usw.), die von der Client -Seite ( JSON

Überprüfen Sie die erforderlichen Felder

  if (! productName ||! Beschreibung ||! }

Kurzbeschreibung:

  • Wenn der Produktname, die Beschreibung oder der Zweck nicht eingegeben werden, ein 400 -Fehler zurückgegeben und die Verarbeitung wird ausgesetzt.
  • Sicherheit beim Durchlaufen der Validierung auf der Vorderseite

Schnellgenerierung (Anweisungen für Chatgpt)

const prompt = `Sie sind ein professioneller Texter und HTML -Entwickler. Ihre Aufgabe ist es, eine saubere, vollständige HTML -Zielseite für das folgende Produkt zu generieren. Strukturieren Sie es basierend auf drei Hauptabschnitten: Erste Ansicht, Körper und Schließen. Anweisungen: - Ausgabe eines vollständigen und gültigen HTML -Dokuments (inklusive<!DOCTYPE html> Anwesend<html> Anwesend<head> , Und<body> ). - Nur Englisch. - Formatieren Sie das Ergebnis nicht mit Markdown. - Fügen Sie keine Erklärungen vor oder nach dem Code hinzu. - Verwenden Sie nur RAW -HTML als Ausgang. - Fügen Sie keine JavaScript- oder externen CSS -Frameworks hinzu. - Verwenden Sie Inline -Stile oder intern<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.`;

Kurzbeschreibung:

  • Generiert dynamisch eine Anweisung (Eingabeaufforderung), um an ChatGPT zu senden
  • das Einbetten von Produktinformationen und die Angabe des Konfigurations- und Ausgangsformats im Detail können Sie hochwertige HTML erzeugen.
  • Senden Sie eine bessere Eingabeaufforderung und Sie können bessere HTML generieren. Versuchen Sie es daher anzupassen.

Senden Sie eine Anfrage an die OpenAI -API

const response = actait fetch ("https://api.openai.com/v1/chat/completions", {methode: "post", Header: {Autorisierung: "Bearer $ {process.env.openai_api_api_key}`, "content-type": "application/json,},},},},}, Body: Json: Json.Stringify (": "Json",},}, Body: Jon.Stringify (":" json ",},},},}, body: jon.string process.env.openai_model ||. const data = warte auf response.json ();

Kurzbeschreibung:

  • Senden Sie eine HTTP -Postanforderung an OpenAI -API (CHAT -Abschluss).
  • Modell , api_key , System_prompt usw. .Env geladen
  • Das Message Array spielt eine Systemrolle (Persönlichkeit) und Benutzerrolle (Anweisung)

Überprüfen und zurückgeben oder Fehler behandeln oder Fehler behandeln

  if (data.Error) {console.Error ("OpenAI -API -Fehler:", data.Error); return nexTesponse.json ({error: "fehlgeschlagene Zielseite"}, {Status: 500}); } const html = data.choices?. [0]? ""; return nexTesponse.json ({html}); }

Kurzbeschreibung:

  • Wenn die ChatGPT -Antwort → Protokollausgabe + 500 Fehler zurückgibt
  • Wenn die Antwort normal ist, wird die HTML mit JSON in der HTML

[Bonus] Dinge zu beachten

mit .EnV verwalten,
damit sie niemals entlarvt werden Wenn Ihre API -Taste durchgesickert ist, entfernen Sie die API -Taste aus dem OpenAI -Dashboard.

Der Modellname ist eine Umgebungsvariable. Bitte ersetzen Sie sie nach dem Zweck.
Die Menge an Geld variiert je nach Modell. Seien Sie daher bei der Auswahl eines Modells vorsichtig.

Eingabeaufforderungen können den generierten Inhalt ändern. Passen Sie also Ihre Eingabeaufforderung an.

Betriebsprüfung

Sobald Sie dies getan haben, überprüfen wir die Operation!

Sie sehen den Bildschirm unten. Fügen Sie also die Informationen zum Eingabedformular hinzu und generieren Sie sie!

Diese LP wurde generiert! ! Nun, ich habe es mit GPT-4O erzeugt, aber ich denke, es ist ein Kompromiss.

Als ich es mit GPT-4,1-Mini erzeugt habe, wurde es so generiert!
Ich denke, indem wir die Eingabeaufforderung ein wenig besser machen oder mehrmals antworten, können wir etwas mehr Qualität erreichen. (Dies war meine Grenze ...)

Informationen zum Vorlagenverkauf

in diesem Artikel eingeführte automatische App -Generation von LP wird als Vorlage verkauft, die auch für kommerzielle Zwecke verwendet werden kann.

Warum Vorlagen verkaufen?

Wir haben dies für diejenigen vorbereitet, die die folgenden Bedürfnisse erleben:

  • "Auch wenn Sie den Schritten befolgen, funktioniert die Umgebung nicht ..."
  • "Ich möchte nur mit einem bewegenden Beispiel beginnen."
  • "Ich habe mir meinen Blog angesehen und fand ihn nützlich, also möchte ich ihn mit dem Ziel kaufen, zu unterstützen und zu spenden."

Sogar diejenigen, die es nicht gewohnt sind, das Spiel zu entwickeln, können mit minimalem Aufwand schnell starten und es schnell ausprobieren

Beispiele für die Verwendung von Vorlagen (Anpassungsideen)

Diese Vorlage ist perfekt für die persönliche Entwicklung und Lernzwecke.
Zum Beispiel empfehlen wir, Folgendes zu ändern und zu erweitern:

  • Ermöglicht die Einfügung von Bildern und Logos in die erzeugte LP
  • Fügen Sie mehrsprachige LP -Unterstützung hinzu (japanische und englische Wechsel usw.)
  • Speichern und verwalten Sie die generierten Ergebnisse (entfernen Sie die Geschichte früherer LPS)
  • Erstellen Sie eine Funktion, die so gehostet werden kann, wie sie sind
  • Fügen Sie eine Benutzeroberfläche hinzu, um Eingabeaufforderungen und Designvorlagen auszuwählen

Es ist auch eine gute Praxis, es auf "serieller Basis" für Programmieranfänger auszuprobieren.

Was ist in der Vorlage enthalten

enthält
den gesamten Quellcode für das hier eingeführte Projekt Daher müssen Sie Ihr eigenes Projekt nicht von Grund auf neu erstellen oder konfigurieren, und Sie können es sofort starten .

  • LP -Eingangsformular und Vorschau -Benutzeroberfläche mit Next.js (App -Router)
  • Serverseitige Implementierung mit OpenAI-API-Integration
  • Einfach zu lesen Quellcode mit Kommentaren
  • Einfach und leicht zu verbessern mit Rückenwind -CSS
  • Docker Startup-Konfigurationsdateien (DockerFile, Docker-compose.yml)

*Um auszuführen, ist eine grundlegende Ausführungsumgebung wie Node.js und Docker erforderlich.

Die in diesem Artikel eingeführten Vorlagen sind jetzt im Verkauf!

Diese Chatbot UI -Vorlage steht auf mehreren Plattformen zum Verkauf.

Die Struktur ist perfekt für diejenigen, die etwas ausprobieren möchten, das zuerst funktioniert: "Ich möchte es sofort verwenden, ohne eine Umgebung zu erstellen" oder "Ich möchte den gesamten Code überprüfen".

Sie können auch andere Vorlagen von jeder meiner Seite überprüfen:

Zusammenfassung

Dieses Mal haben wir vorgestellt, wie man
eine einfache Landing Page (LP) automatisch generierende App mit der OpenAI-API und Next.js.

Rückblick auf die Punkte:

  • Mit der API der Chat-Abschlüsse können Sie hochwertige HTML mit nur wenigen Eingabeaufforderungen generieren
  • Next.js App Router + Tailwind CSS macht es einfach und einfach anpassen
  • Durch die Verwendung von Vorlagen können Sie von einem Zustand aus starten, in dem Sie es schnell ausprobieren können, um den Aufbau einer Umgebung zu beseitigen.

Diese Vorlage
wird besonders für Entwickler und Designer empfohlen , die LPS -Einführung von Produkten schnell prototypisieren oder
LP -Automatisierung erleben möchten

Verwenden Sie es als Basis, um die Eingabeaufforderungen und Designs anzupassen
, um sich zu Ihrem eigenen LP -Generator zu entwickeln Es wird nicht nur als Basis für das Hinzufügen von einzigartigen Funktionen und zum Anpassen der Benutzeroberfläche empfohlen.

Die in diesem Artikel eingeführten Vorlagen sind jetzt im Verkauf!

Diese Chatbot UI -Vorlage steht auf mehreren Plattformen zum Verkauf.

Die Struktur ist perfekt für diejenigen, die etwas ausprobieren möchten, das zuerst funktioniert: "Ich möchte es sofort verwenden, ohne eine Umgebung zu erstellen" oder "Ich möchte den gesamten Code überprüfen".

Sie können auch andere Vorlagen von jeder meiner Seite überprüfen:

Reagieren
Teilen Sie, wenn Sie möchten!

Wer hat diesen Artikel geschrieben

Takus Avatar Taku

Dies ist ein Blog, in dem ich angefangen habe, Informationssicherheit zu studieren. Als neuer Angestellter würde ich mich freuen, wenn Sie mit einem breiten Herzen schauen könnten.
Es gibt auch Teech Lab, das eine Gelegenheit ist, Programmierspaß zu studieren. Wenn Sie also an der Softwareentwicklung interessiert sind, sollten Sie sich unbedingt ansehen!

Verwandte Artikel

Inhaltsverzeichnis