Integração de LLMs em aplicações web

Integração de LLMs em aplicações web

Introdução

Este tutorial vai guiá-lo na criação de uma aplicação web completa que integra LLMs. Usaremos React no frontend e Node.js no backend, com a API da OpenAI como serviço de LLM.

Arquitetura da aplicação

Estrutura do projeto

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. Configuração do 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}`);
});