Tous les projets

IA & données

React AI Chatbot

Un chatbot monopage en React et Vite branché sur l’API d’OpenAI, avec bulles de conversation, raccourcis clavier et thèmes clair et sombre.

  • Projet individuel
Voir le code sur GitHub En parler avec moi

01Le point de départ

Contexte & mission

Le problème

Une bonne interface de chat se juge aux détails : le défilement, les raccourcis, la remise à zéro, les thèmes.

La mission

Construire une interface de conversation agréable autour d’un LLM, en se concentrant sur l’expérience utilisateur.

Mon rôle

Projet conçu et développé seul.

02Réalisation

Ce que j’ai fait

  1. Conversation

    Bulles distinctes pour l’utilisateur et l’assistant, défilement automatique vers le dernier message, remise à zéro de la conversation.

  2. Confort de saisie

    Entrée pour envoyer, Maj + Entrée pour aller à la ligne.

  3. Thèmes et comportement

    Thèmes clair et sombre ; instructions système personnalisables selon l’usage.

  4. État React

    Messages, thème et chargement gérés avec les hooks React ; code vérifié par ESLint.

03Conception

Architecture

Application front-end seule : l’interface React gère la conversation et appelle l’API OpenAI. Pour une mise en ligne publique, les appels passeraient par un backend comme Chatbot API, qui garde la clé côté serveur.

Le trajet d’un message
  1. Interface React
  2. ÉtatHooks
  3. Client OpenAI
  4. RéponseBulle assistant

04Impact

Résultats

  • Une interface de chat soignée, du raccourci clavier au thème.

05Bilan

Ce que j’en retiens

Ce que ce projet démontre

Que je soigne l’expérience utilisateur autour d’un LLM, et que je connais la limite de sécurité d’un appel direct depuis le navigateur.

Enseignements et suite

Brancher l’interface sur Chatbot API pour en faire un projet full-stack où la clé reste côté serveur.

06Technologies

Stack complète

  • React
  • JavaScript
  • Vite
  • CSS
  • React Hooks
  • ESLint
  • OpenAI API

À découvrir aussi