Integrating LLMs into Web Applications

Integrating LLMs into Web Applications

Introduction

This tutorial will guide you through building a complete web application that integrates LLMs. We will use React for the frontend and Node.js for the backend, with the OpenAI API as the LLM service.

Application Architecture

Project Structure

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. Server Configuration

// 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}`);
});