Integración de LLM en aplicaciones web

Integración de LLM en aplicaciones web

Introducción

Este tutorial te guiará en la creación de una aplicación web completa que integra LLM. Utilizaremos React para el frontend y Node.js para el backend, con la API de OpenAI como servicio de LLM.

Arquitectura de la aplicación

Estructura del proyecto

llm-web-app/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── services/
│   │   ├── styles/
│   │   └── App.jsx
│   ├── package.json
│   └── vite.config.js
├── backend/
│   ├── src/
│   │   ├── controllers/
│   │   ├── services/
│   │   ├── routes/
│   │   └── server.js
│   ├── package.json
│   └── .env
└── README.md

Backend (Node.js/Express)

1. Configuración del servidor

// backend/src/server.js
import express from 'express';
import cors from 'cors';
import dotenv from 'dotenv';
import chatRoutes from './routes/chat.routes.js';

dotenv.config();

const app = express();
const PORT = process.env.PORT || 3000;

app.use(cors());
app.use(express.json());
app.use('/api/chat', chatRoutes);

app.listen(PORT, () => {
  console.log(`Serveur démarré sur le port ${PORT}`);
});