Le contexte

Jungle de Poche est une boutique de plantes fictive. J’y ai intégré Flora, un conseiller IA — pas un bouton qui ouvre une FAQ, mais un vrai chatbot qui répond aux questions sur les plantes du catalogue : arrosage, lumière, toxicité, entretien, livraison.

Le défi central : appeler une API de language model depuis un navigateur sans exposer de clé API côté client.

L’architecture

Navigateur → Cloudflare Worker (proxy) → API Groq

Le Worker joue le rôle de proxy intelligent :

  1. Il reçoit la question du visiteur (sans clé API)
  2. Il ajoute la clé Groq (stockée en secret Wrangler, jamais dans le dépôt Git)
  3. Il injecte un system prompt qui contraint le modèle au périmètre de la boutique
  4. Il retourne la réponse au navigateur

Le code source du site peut rester public sans risque : aucune clé n’y apparaît.

Le system prompt

Le modèle reçoit le catalogue complet en contexte (8 plantes : nom, prix, lumière requise, fréquence d’arrosage, toxicité). Le system prompt lui donne ses instructions : répondre uniquement sur les plantes de Jungle de Poche, orienter vers une plante du catalogue si la question est vague, refuser poliment les sujets hors périmètre.

Résultat : un assistant qui semble « formé » sur la boutique — sans fine-tuning ni RAG, juste du prompt engineering.

Le fallback local

Si le Worker est indisponible (quota atteint, plan gratuit), Flora ne disparaît pas. Un repli par mots-clés prend le relais dans plantes.js : quelques dizaines de réponses prédéfinies couvrent les questions fréquentes (arrosage, lumière, toxicité, livraison, retours). Moins intelligent, mais la démo reste présentable et fonctionnelle.

La synchronisation du catalogue

Les 8 plantes existent à trois endroits qui doivent rester cohérents :

  1. Les fiches produit de index.html (ce que le visiteur voit)
  2. Le tableau CATALOG dans plantes.js (données du repli local)
  3. La constante CATALOGUE dans le Worker (src/index.js)

Une désynchronisation ferait dire à Flora des informations fausses sur les prix ou l’entretien. C’est une contrainte de maintenance à documenter dès le départ.

Pourquoi Groq

Groq offre une latence très faible (inférence sur ASIC dédié) par rapport aux APIs classiques. Pour un chatbot intégré à une page produit, le temps de réponse est perceptible : une réponse en moins d’une seconde change l’expérience. Le modèle utilisé est open source, sans coût significatif dans les limites du plan gratuit.

Ce que le projet démontre

  • Capacité à intégrer une IA générative dans une interface web existante
  • Architecture proxy Worker pour sécuriser les clés API sans backend applicatif propre
  • Prompt engineering pour contraindre un modèle généraliste à un périmètre précis
  • Bonne pratique de la dégradation : la démo reste utilisable même si l’API est indisponible