Ich habe versucht, einen Chatbot mit der OpenAI -API zu erstellen [Next.js + Tailwind CSS]

$ npx create-next-sapp@neuesten My-chatbot --Typescript müssen die folgenden Pakete installieren: create-text-app@15.4.4 OK, um fortzufahren? (y) 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 App -Router verwenden? (Empfohlen)… 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 / my-chatbot. 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. 14S 137 Pakete suchen nach Finanzmitteln. NPM Fund "für Details gefunden 0 Schwachstellen initialisiert ein Git -Repository. Erfolg! Erstellt My-chatbot at /my-chatbot npm notal npm notal neue minorversion von npm verfügbar! 11.0.0 -> 11.5.1 NPM Hinweis ChangeLog: https://github.com/npm/cli/releases/v11.5.1 NPM Hinweis zum Aktualisieren von Ausführen:

CD My-Chatbot

Openai_api_key = sk -... openai_model = gpt-4.1-mini system_prompt = Sie sind ein hilfreicher Assistent.

NPM Run Dev

"Client verwenden"; importieren {usestate, useref, useEffect} aus "react"; // Wiederverwendbare Chat -Schnittstelle mit OpenAI -API // Wiederverwendbare Chat -Schnittstelle mit OpenAI -API -Ausfunktion Standardfunktion home () {const [input, setInput] = usestate (""); const [message, setMessages] = usustate <{Rolle: "Benutzer" | "Assistent"; Inhalt: String} []> ([]); const [laden, setloading] = usustate (false); const chatendref = useref<HTMLDivElement> (NULL); // Meldungsübermittlung an die API verwandeln // Der Prozess des Sendens einer Nachricht an die API const sendMessage = async () => {if (! Input.trim ()) return; // Benutzernachricht zum Chat -History hinzufügen // Benutzernachricht zu History const newMessages = [... Nachrichten, {Rolle: "Benutzer", Inhalt: Eingabe} als const,]; setMessages (NewMessages); setInput (""); setloading (true); // Nachricht an Backend-API-Route senden // Nachricht an Backend API Endpoint const res = warte fetch ("/api/chat", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({message: input}),}); const data = warte res.json (); // Assistent auf den Chat -History addieren // Assistent auf History SetMessages (PREV) => [... prev, {Rolle: "Assistant", Inhalt: Data.Repry},]); setloading (false); }; // scrollen Sie zum Ende der Chat -Ansicht zum Update // scrollen Sie zum Ende der Chat -Ansicht, wenn eine Nachricht aktualisiert wird. zurückkehren ( <main className="h-screen flex items-center justify-center bg-gray-100 text-gray-800"><div className="flex flex-col w-full max-w-3xl h-[90vh] border-x border-gray-300 bg-white"> {/ * Header */} {/ * Header */}<header className="p-4 border-b text-lg font-semibold"> Chatbot-Chatgpt</header> {/ * Chat -Meldung Anzeige */} {/ * Chat -Meldung Anzeigebereich */} <div className="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100"> {messages.map ((msg, idx) => ( <div key={idx} className={`flex ${ msg.role === "user" ? "justify-end" : "justify-start" }`} ><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`} > {msg.content}</div></div> ))} {/ * Typern beim Laden */} {/ * Anzeige während des Ladens */} {Laden && (( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Denken...</div></div> )}<div ref={chatEndRef} /></div> {/ * Eingabebereich */} {/ * Eingabefeld */}<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput (e.target.Value)} Onkeydown = {(e) => e.Key === "ENTER" && sendMessage ()} classname = "Flex-Grow P-2 Border Runded Focus: Umriss-None-Fokus: Ring Focus: Border-BLUE-300" Placeholder = "Typ Ihre Botschaft Typ ..." /> Sends Sends Send-Send-Send <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >-Send-</button> Botschaft.</div></footer></div></main> ); }

const [input, setInput] = usustate (""); const [message, setMessages] = usustate <{Rolle: "Benutzer" | "Assistent"; Inhalt: String} []> ([]); const [laden, setloading] = usustate (false);

const sendMessage = async () => {if (! input.trim ()) return; const newMessages = [... Nachrichten, {Rolle: "Benutzer", Inhalt: Eingabe}]; setMessages (NewMessages); setInput (""); setloading (true); const res = acait fetch ("/api/chat", {methode: "post", header: {"content-type": "application/json"}, body: json.stringify ({message: input}),}); const data = warte res.json (); setMessages ((prev) => [... prev, {Rolle: "Assistant", Inhalt: data.reply}]); setloading (false); };

<div className="flex-1 overflow-y-auto p-6 space-y-4">{messages.map ((msg, idx) => ( <div key={idx} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}><div className={`max-w-xl px-4 py-2 rounded-lg text-sm whitespace-pre-wrap ${ msg.role === "user" ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-900" }`}> {msg.content}</div></div> ))} {laden && ( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Denken...</div></div> )}</div>

<footer className="border-t p-4"><div className="flex gap-2"><input value={input} onChange={(e) => setInput (e.target.value)} ondkeydown = {(e) => e.key === "ENTER" && sendMessage ()} classname = "Flex-Grow P-2 Border Runded Focus: Umriss-none" placeholder = "Geben Sie Ihre Nachricht ein ..." /> <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >Senden</button></div></footer>

// src/app/api/chat/route.ts import {nexTrequest, nexTesponse} aus "next/server"; // Handler für Chat -Anfragen posten // Handler posten, der Chat -Anfragen asynchronisierte Funktionen postet (req: nexTrequest) {const {message} = warte req.json (); // Rufen Sie die OpenAI-API mit der serverseitigen Geheimschlüssel und den Parametern an // system_prompt definiert die Persönlichkeit, den Ton oder das Verhalten des Assistenten. // Öffnen Sie mit serverseitigem privatem Schlüssel und Parametern API // System_prompt Gibt die Persönlichkeit, das Sprechen und das Verhalten des Assistenten an. 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 (); // Fehlerantwort von OpenAI verwandeln // Fehlerantwort von OpenAI // Fehlerantwort von OpenAI if (Data.Error) {console.Error (Data.Error); return nexTesponse.json ({Antwort: "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut."}, {Status: 500}); } // Assistent zurücksenden Antwort // Assistent zurücksenden Antwort zurückkehren nexTesponse.json ({Antwort: Data.choices [0] .Message.Content}); }

importieren {nexTrequest, nexTesponse} aus "next/server"; Exportieren Sie die asynchronisierende Funktion post (req: nexTrequest) {const {message} = warte req.json ();

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 ();

if (data.Error) {console.Error (data.Error); return nexTesponse.json ({Antwort: "Ein Fehler ist aufgetreten."}, {Status: 500}); } return nexTesponse.json ({Antwort: Data.choices [0] .Message.Content}); }