Pasar de la terminal al navegador es el momento en que un proyecto de inteligencia artificial cobra vida real. Aquí se muestra cómo conectar la API de OpenAI a un front end construido con Next.js, migrar del endpoint de Responses al de Completions y lograr que el asistente recuerde el contexto de toda la conversación.
¿Cómo funciona OtroGPT y su estructura en Next.js?
El proyecto se llama OtroGPT y su interfaz es minimalista: un campo de texto para escribir mensajes, un botón que se habilita solo cuando hay contenido y una sección donde aparece la respuesta del asistente. Toda la magia ocurre en un archivo clave dentro del proyecto: API ChatRoute [01:52].
La estructura del proyecto sigue el estándar de Next.js con su layout y su página principal que renderiza los estilos y componentes de React. En el package.json la dependencia principal es la librería oficial de OpenAI, la misma que se utilizó en clases anteriores desde la terminal [02:05]. Las demás dependencias manejan estilos y clases de React.
El archivo de API ChatRoute cumple tres funciones esenciales:
- Importa y genera el cliente de OpenAI.
- Captura los mensajes que llegan desde el front end.
- Envía esos mensajes al endpoint correspondiente y devuelve la respuesta a la interfaz.
¿Por qué es importante configurar las variables de entorno?
Antes de que el asistente pueda responder, es necesario agregar la API key en un archivo de environment local [01:04]. En lugar de usar el archivo .env convencional, se utiliza el archivo de environment local por razones de seguridad y practicidad explicadas en clases anteriores. Al trabajar con BunJS como entorno de ejecución de JavaScript, basta con refrescar el servidor para que tome la nueva variable de entorno sin pasos adicionales [01:15].
Sin la API key configurada, el primer intento de enviar un mensaje arroja el error: "no se pudo conectar con el servidor" [00:52]. Una vez agregada, el asistente responde correctamente.
¿Qué hace exactamente el archivo API ChatRoute?
Dentro de la función asíncrona del archivo se ejecuta un flujo directo [02:22]:
- Se reciben los mensajes desde la interfaz.
- Se extrae el último mensaje del usuario (lastUserMessage) y su contenido.
- Se envía al modelo de OpenAI con la estructura ya conocida de la terminal.
- Se asigna un rol de asistente a la respuesta.
- Se devuelve esa respuesta a la interfaz.
También incluye un manejo de errores para casos en los que la API no se conecte correctamente.
¿Por qué migrar de Responses a Completions?
Con la API de Responses, cada mensaje se procesa de forma aislada. Esto significa que el modelo solo tiene contexto de la pregunta actual [01:45]. Al preguntar "¿Cuál es la capital de Colombia?" responde correctamente: Bogotá. Pero al preguntar después "¿Y cuál es el color de su bandera?", no sabe a qué país se refiere porque no conserva el historial de la conversación [02:00].
El endpoint de Completions (openai.chat.completions.create) resuelve este problema porque permite enviar múltiples mensajes como contexto. De esta forma el modelo almacena la información en su memoria durante toda la sesión.
¿Cómo se implementa el cambio en el código?
La modificación es directa [03:20]:
- Los mensajes se siguen recibiendo desde el front end de la misma manera.
- La conexión cambia de
responses a openai.chat.completions.create.
- Se mantiene el mismo modelo.
- Se leen todos los mensajes acumulados, no solo el último.
- La respuesta se devuelve usando
NextResponse, propio de Next.js, con el resultado que viene de la API de Completions.
Una vez guardado el cambio y refrescado el navegador, el asistente recuerda el contexto. Al repetir la secuencia de preguntas, responde que la capital de Colombia es Bogotá, D.C. y luego, sin necesidad de repetir el país, indica que los colores de la bandera son amarillo, azul y rojo en franjas horizontales [04:10].
¿Qué sigue después de conectar texto en OtroGPT?
Con la migración completada, OtroGPT ya mantiene conversaciones largas sin perder contexto. Los próximos pasos incluyen agregarle una personalidad customizada y conectar otros endpoints para que el asistente haga mucho más que responder en texto plano [04:42].
Si estás construyendo tu propio asistente o tienes una idea diferente en mente, comparte en los comentarios qué estás creando con lo que vas aprendiendo.
