O'Chat

Interface de chat LLM personnalisée construite avec Svelte, intégrant l'API Mistral AI avec persistance des conversations via PocketBase.

Projet réalisé dans le cadre de ma formation de développeur web full-stack chez O'clock.

🎯 Fonctionnalités

• Interface de chat moderne avec gestion de conversations multiples
• Intégration API Mistral AI pour générer des réponses intelligentes
• Authentification par token utilisateur (sécurisé côté client)
• Persistance des conversations avec PocketBase (base de données SQLite)
• Rendu Markdown : code, listes, titres, formatage
• Interface responsive avec sidebar rétractable
• Gestion d'historique : création, sélection et sauvegarde de conversations

🛠️ Stack technique

• Frontend : Svelte, Vite
• Base de données : PocketBase (SQLite + API auto-générée)
• API externe : Mistral AI
• Stockage local : localStorage pour le token utilisateur
• Styling : CSS vanilla avec design moderne

📦 Installation

Prérequis

• Node.js (v18+)
• npm ou yarn
• Token API Mistral (à créer sur console.mistral.ai)

Étapes

1. Clone le repository

git clone https://github.com/QuentinCaffray/o-chat.git
cd o-chat

2. Installe les dépendances

npm install

3. Lance PocketBase (base de données locale)

PocketBase est inclus dans le projet. Lance-le dans un terminal séparé :

# Si tu es sur Linux/Mac
./pocketbase/pocketbase serve

# Si tu es sur Windows
pocketbase\pocketbase.exe serve

PocketBase sera accessible sur http://127.0.0.1:8090

4. Lance l'application

npm run dev

L'application sera accessible sur http://localhost:5173

5. Configure ton token Mistral

Au premier lancement :

• Clique sur le bouton 🔒 Token dans la sidebar
• Entre ton token API Mistral
• Le token sera stocké localement dans ton navigateur

🚀 Utilisation

Première utilisation

1. Lance PocketBase (./pocketbase/pocketbase serve)
2. Lance l'application (npm run dev)
3. Clique sur 🔒 Token et entre ton token Mistral
4. Commence à discuter !

Gestion des conversations

• Nouvelle conversation : bouton "+ Nouvelle" dans la sidebar
• Changer de conversation : clic sur le titre dans la liste
• Persistance automatique : tous les messages sont sauvegardés dans PocketBase

Obtenir un token Mistral

1. Crée un compte sur console.mistral.ai
2. Va dans la section "API Keys"
3. Génère une nouvelle clé
4. Copie-colle la dans O'Chat

⚠️ Important : Ne partage jamais ton token API avec d'autres personnes.

🏗️ Structure du projet

o-chat/
├── src/
│   ├── App.svelte         # Composant principal (UI + logique)
│   ├── app.css            # Styles globaux
│   ├── mistral.js         # Appels à l'API Mistral
│   ├── token.js           # Gestion du token (localStorage)
│   └── main.js            # Point d'entrée
├── pocketbase/            # Base de données locale (non committé)
├── index.html             # Template HTML
├── package.json
├── svelte.config.js
└── vite.config.js         # Configuration Vite

📝 Scripts disponibles

• npm run dev - Lance le serveur de développement (hot-reload)
• npm run build - Compile l'application pour la production
• npm run preview - Prévisualise la version de production

🔒 Sécurité

• Token côté client : Le token Mistral est stocké dans le localStorage du navigateur et n'est jamais envoyé à un serveur tiers
• Pas de backend intermédiaire : L'application appelle directement l'API Mistral depuis le navigateur
• Données locales : Les conversations sont stockées dans PocketBase en local (pas de cloud)

⚠️ Note : Dans une application production, il serait recommandé de passer par un backend pour sécuriser le token API.

🎨 Fonctionnalités techniques

Rendu Markdown

L'application supporte :

• Titres (H1-H6)
• Listes à puces et numérotées
• Code inline et blocs de code
• Gras et italique
• Liens hypertextes

Architecture PocketBase

• Collections : conversations et messages
• Relations : Chaque message est lié à une conversation
• Auto-création des conversations au besoin

📄 Licence

Projet pédagogique réalisé dans le cadre de la formation O'clock.

Réalisé par Quentin Caffray - LinkedIn - GitHub