Intenté crear un chatbot usando la API Operai [next.js + tailwind CSS]

$ npx create-next-app@ulty my-chatbot --typescript necesita instalar los siguientes paquetes: create-next-app@15.4.4 ¿Aceptar para continuar? (y) 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 el enrutador de aplicaciones? (Recomendado) ... 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 / my-chatbot. 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. 14S 137 Los paquetes están buscando Financing Ejecutar `Fondo NPM` para detalles de 0 vulnerabilidades inicializadas de un repositorio GIT. ¡Éxito! Creado my-chatbot at /my-chatbot NPM Aviso de NPM Aviso Nuevo versión menor de NPM disponible! 11.0.0 -> 11.5.1 NPM AVISO CHANGELOG: https://github.com/npm/cli/releases/tag/v11.5.1 NPM AVISO PARA ECTUNCIÓN Ejecutar: NPM Install -G NPM@11.5.1 NPM AVISO

CD my-chatbot

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

NPM Run Dev

"Use el cliente"; import {useSestate, useref, useEffect} de "React"; // Interfaz de chat reutilizable utilizando la interfaz de chat reutilizable de OpenAI utilizando la función de exportación de API de OpenAI a la función predeterminada home () {const [input, setInput] = useState (""); const [mensajes, setmessages] = useState <{rol: "usuario" | "asistente"; contenido: string} []> ([]); const [carga, setloading] = useState (falso); const chatendref = useref<HTMLDivElement> (nulo); // Manejar el envío de mensajes a la API // El proceso de enviar un mensaje a la API const sendMessage = async () => {if (! Input.trim ()) return; // Agregar mensaje de usuario al historial de chat // Agregar mensaje de usuario al historial const NewMessages = [... Mensajes, {rol: "Usuario", Content: Input} como const,]; setMessages (NewMessages); setInput (""); setloading (verdadero); // Enviar mensaje a la ruta de la API de backend // Enviar mensaje a la api de backend endpoint const res = await fetch ("/api/chat", {método: "publicar", encabezados: {"content-type": "aplicación/json"}, cuerpo: json.stringify ({mensaje: entrada}),}); const data = await res.json (); // Agregar respuesta de asistente al historial de chat // Agregar respuesta de asistente al historial setMessages ((previo) => [... anterior, {rol: "Asistente", content: data.reply},]); setloading (falso); }; // Desplácese hasta la parte inferior de la vista de chat en la actualización // desplácese a la parte inferior de la vista de chat al actualizar un mensaje useEffect (() => {chatEndref.Current? devolver ( <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"> {/ * Encabezado */} {/ * encabezado */}<header className="p-4 border-b text-lg font-semibold"> Chatbot-chatgpt</header> {/ * Visualización de mensajes de chat */} {/ * área de visualización de mensajes de chat */} <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> ))} {/ * Indicador de tipificación mientras se carga */} {/ * indicador durante la carga */} {carging && ( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Pensamiento...</div></div> )}<div ref={chatEndRef} /></div> {/ * Área de entrada */} {/ * campo de entrada */}<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 <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >-</button> 2 Border redondeado Enfoque: Outline-Non</div></footer></div></main> ); }

const [entrada, setInput] = useState (""); const [mensajes, setmessages] = useState <{rol: "usuario" | "asistente"; contenido: string} []> ([]); const [carga, setloading] = useState (falso);

const sendmessage = async () => {if (! input.trim ()) return; const NewMessages = [... Mensajes, {rol: "Usuario", Content: Input}]; setMessages (NewMessages); setInput (""); setloading (verdadero); const res = await fetch ("/api/chat", {método: "post", encabezados: {"content-type": "application/json"}, body: json.stringify ({mensaje: entrada}),}); const data = await res.json (); setMessages ((prev) => [... anterior, {rol: "Asistente", content: data.reply}]); setloading (falso); };

<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> ))} {cargando && ( <div className="flex justify-start"><div className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm animate-pulse"> Pensamiento...</div></div> )}</div>

<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 redondeado Enfoque: Outline-None" PlaceHolder = "Escriba su mensaje ..." / <button onClick={sendMessage} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition" >></button></div></footer>

// src/app/api/chat/ruta.ts import {nextuCeest, nexTResponse} de "Next/Server"; // Publicar controlador para solicitudes de chat // Post Handler que maneja las solicitudes de chat de exportación de la función Async Post (req: nextuCeest) {const {mensaje} = await req.json (); // llame a la API de OpenAI utilizando la clave secreta del lado del servidor y los parámetros // System_Prompt Define la personalidad, el tono o el comportamiento del asistente. // OpenAI con la clave privada del lado del servidor y los parámetros llaman a la API // System_Prompt especifica la personalidad, el habla y el comportamiento del asistente. 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 (); // Manejar la respuesta de error de OpenAI // Manejar la respuesta de error de OpenAI // manejar la respuesta de error de OpenAI if (data.error) {console.error (data.error); return nextResponse.json ({Respuesta: "Ocurrió un error. Inténtelo de nuevo más tarde."}, {estado: 500}); } // Return Assistant Responder // return Assistant Respuesta return nextResponse.json ({Respuesta: data.Choices [0] .message.content}); }

import {nextuCeest, nexTResponse} de "Next/Server"; Exportar Async Function Post (Req: NEXTREQUEST) {const {Message} = Await Req.json ();

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

if (data.error) {console.error (data.error); return nextResponse.json ({respuesta: "Ocurrió un error"}, {estado: 500}); } return nextResponse.json ({Respuesta: data.Choices [0] .message.content}); }