MERN-GPT: un chatbot amb memòria

De vegades, la part més interessant d’un chatbot no és la resposta que dona, sinó tot el que passa abans i després.

MERN-GPT és una aplicació web de xat inspirada en ChatGPT. Permet crear un compte, iniciar sessió i mantenir una conversa amb un model d’OpenAI. Cada missatge queda associat a l’usuari, de manera que, quan torna a entrar, pot recuperar el fil allà on l’havia deixat.

El projecte va néixer com un experiment per construir aquest recorregut complet: una interfície amb React, una API pròpia, una base de dades i una connexió amb intel·ligència artificial. La idea no era només enviar un prompt i mostrar-ne la resposta, sinó entendre com encaixen totes les peces d’una aplicació full stack quan el model és un servei més dins del sistema.

El resultat és una aplicació senzilla, però prou completa per treballar amb frontend, backend, autenticació i persistència. Una bona excusa per sortir de la resposta aïllada i construir tot el que necessita al voltant.

Stack tècnic

Backend

• Node.js, Express i TypeScript: formen l’API i organitzen les rutes, els controladors i els middlewares.
• MongoDB i Mongoose: guarden els usuaris i l’historial de cada conversa.
• OpenAI SDK: envia els missatges al model gpt-3.5-turbo i recull la resposta.
• JWT, cookies signades i bcrypt: gestionen la sessió i protegeixen les credencials.
• Express Validator: comprova les dades abans que arribin als controladors.

Frontend

• React i TypeScript: construeixen la interfície i gestionen l’estat de l’aplicació.
• Vite: prepara l’entorn de desenvolupament i la compilació del frontend.
• React Router: separa les pantalles d’inici, registre, login i xat.
• Material UI: dona forma als formularis, botons, missatges i avisos.
• Axios: comunica el navegador amb l’API i envia les cookies de sessió.
• React Syntax Highlighter: presenta els fragments de codi de manera més llegible.

Del prompt a la resposta

Quan l’usuari obre el xat, el frontend demana a l’API les converses que hi ha guardades. Si la sessió és vàlida, MongoDB retorna l’historial i React el torna a dibuixar a la pantalla.

Des d’aquí, el recorregut d’un prompt és força directe:

1 · Prompt	2 · API i sessió	3 · Context
L’usuari escriu el missatge i React el mostra a la conversa.	Axios l’envia a l’API; Express valida les dades i comprova el token.	MongoDB recupera l’usuari i els missatges anteriors.
4 · OpenAI	5 · Persistència	6 · Resposta
El backend afegeix el prompt a l’historial i envia tot el context al model.	El prompt i la resposta de l’assistent es guarden a MongoDB.	L’API retorna la conversa actualitzada i React la mostra a la pantalla.

En una línia: Prompt → API → Autenticació → MongoDB → OpenAI → MongoDB → React

El detall important és que el backend no envia només l’última pregunta. Recupera els missatges anteriors, hi afegeix el prompt nou i passa la conversa completa al model. Això permet que la resposta tingui en compte el que s’ha dit abans.

Tant el missatge de l’usuari com la resposta de l’assistent es guarden dins del document de l’usuari. L’historial es pot recuperar en qualsevol moment i també es pot eliminar completament des de la interfície.

Autenticació, token i contrasenyes

El registre i el login passen primer per una validació de les dades. A partir d’aquí, cada peça té una funció concreta:

• Contrasenya: no es guarda ni s’encripta de manera reversible. bcrypt en genera un hash amb un factor de cost de 10. Durant el login es compara amb el valor guardat sense recuperar mai la contrasenya original.
• Token JWT: conté l’identificador i el correu de l’usuari, està signat pel servidor i caduca al cap de set dies.
• Cookie signada i httpOnly: conserva el token sense exposar-lo al codi de React.
• Middleware d’autenticació: verifica la cookie i el JWT abans de permetre l’accés a les operacions del xat.

React no necessita llegir ni guardar el token. El navegador envia la cookie automàticament amb cada petició i el backend decideix si la sessió continua sent vàlida.

Una API petita

L’API està agrupada sota /api/v1 i és deliberadament senzilla:

• Model de dades: cada document d’usuari conté el nom, el correu, el hash de la contrasenya i una llista de missatges amb role i content.
• Peticions d’usuari: les operacions POST serveixen per registrar-se i iniciar sessió; les GET, per comprovar la sessió o tancar-la.
• Peticions del xat: POST envia un prompt nou, GET recupera l’historial i DELETE elimina la conversa.

Les operacions del xat passen sempre pel middleware d’autenticació. Després, els controladors consulten MongoDB, criden OpenAI quan cal i retornen una resposta JSON al frontend.

La versió actual està preparada per funcionar en local: el frontend parla amb l’API a localhost:5000 i el servidor accepta peticions des del port de Vite. És una arquitectura petita, però conté les peces principals d’una aplicació amb IA: interfície, API, autenticació, persistència i connexió amb un model extern.

No intenta reinventar el xat. La gràcia era entendre què hi ha al voltant d’una resposta generada: qui pregunta, què s’ha dit abans, on es guarda i com torna tot plegat a la pantalla.