Context

Jungle de Poche is a fictional plant shop. I integrated Flora — not a button that opens an FAQ, but a real chatbot that answers questions about the catalogue’s plants: watering schedules, light requirements, toxicity, care, and shipping.

The central challenge: call a language model API from a browser without exposing an API key on the client side.

Architecture

Browser → Cloudflare Worker (proxy) → Groq API

The Worker acts as an intelligent proxy:

  1. It receives the visitor’s question (no API key required from the browser)
  2. It attaches the Groq key (stored as a Wrangler secret, never in the Git repository)
  3. It injects a system prompt that constrains the model to the shop’s scope
  4. It returns the response to the browser

The site’s source code can remain public without risk: no key appears anywhere in it.

The system prompt

The model receives the full catalogue as context (8 plants: name, price, light needs, watering frequency, toxicity). The system prompt gives it its rules: answer only about Jungle de Poche’s plants, suggest a catalogue plant when the question is vague, politely decline out-of-scope topics.

The result: an assistant that feels “trained” on the shop — no fine-tuning, no RAG, just prompt engineering.

The local fallback

If the Worker is unavailable (quota reached, free plan), Flora does not disappear. A keyword-based fallback in plantes.js takes over: a few dozen predefined responses cover common questions (watering, light, toxicity, shipping, returns). Less intelligent, but the demo stays usable and presentable.

Catalogue synchronisation

The 8 plants exist in three places that must remain consistent:

  1. The product cards in index.html (what the visitor sees)
  2. The CATALOG array in plantes.js (local fallback data)
  3. The CATALOGUE constant in the Worker (src/index.js)

A desync would cause Flora to state false information about prices or care. This is a maintenance constraint that needs to be documented from the start.

Why Groq

Groq offers very low latency (inference on dedicated ASICs) compared to standard APIs. For a chatbot embedded in a product page, response time is noticeable: a sub-second reply changes the experience. The model used is open source, with no significant cost within free-plan limits.

What the project demonstrates

  • Ability to integrate generative AI into an existing web interface
  • Worker proxy architecture to secure API keys without a dedicated backend
  • Prompt engineering to constrain a general-purpose model to a specific scope
  • Sound degradation practice: the demo stays usable even when the API is unavailable