Pourquoi ne jamais appeler OpenAI directement depuis le frontend

La première erreur que font la plupart des développeurs no-code : appeler l'API OpenAI directement depuis WeWeb ou FlutterFlow, avec la clé API exposée côté client.

Ne faites jamais cela. La clé API sera visible dans les outils de développement du navigateur, et quiconque la trouve peut générer des milliers d'euros de frais API à vos dépens. Les clés API OpenAI n'ont pas de limitation de débit par défaut.

Le bon schéma : tous les appels OpenAI passent par votre backend (Supabase Edge Function, endpoint Xano, ou tout serveur). Le frontend appelle votre backend, qui appelle OpenAI avec la clé stockée comme variable d'environnement côté serveur. Cette couche d'indirection protège complètement votre clé.

D'un point de vue RGPD, cette architecture est également préférable : elle vous permet de logger les appels IA, de stocker les conversations dans une région UE, et de contrôler quelles données utilisateur sont envoyées à OpenAI — des obligations importantes si vous traitez des données personnelles d'utilisateurs européens.

Configurer les Supabase Edge Functions pour OpenAI

Les Supabase Edge Functions sont des fonctions serverless basées sur Deno qui s'exécutent en bordure de réseau. Ce sont la méthode la plus simple pour proxifier les appels OpenAI.

Créez votre fonction dans `supabase/functions/ai-chat/index.ts`. Elle reçoit les messages et le systemPrompt du frontend, les transmet à l'API OpenAI chat completions avec le modèle gpt-4o, puis retourne la réponse.

Déployez avec `supabase functions deploy ai-chat`. Définissez le secret : `supabase secrets set OPENAI_API_KEY=sk-...`.

Supabase propose des régions d'hébergement en Europe (Frankfurt). Pour les applications traitant des données personnelles d'utilisateurs européens, hébergez votre projet Supabase dans cette région — cela simplifie la conformité RGPD et évite les transferts de données hors UE problématiques.

Les Edge Functions supportent également le streaming de réponses (Server-Sent Events), ce qui permet d'afficher le texte de l'IA mot par mot — une expérience utilisateur bien supérieure à l'attente de la réponse complète.

Appeler l'Edge Function depuis WeWeb

Dans WeWeb, créez une source de données REST API pointant vers l'URL de votre Edge Function (trouvée dans le tableau de bord Supabase → Edge Functions). Configurez-la comme une requête POST avec un corps JSON.

Créez une variable `chatMessages` (tableau, défaut vide) et `aiResponse` (chaîne). Au clic sur le bouton Envoyer : 1. Ajoutez le message de l'utilisateur à `chatMessages` avec le rôle "user" 2. Effacez l'input utilisateur 3. Appelez l'action Edge Function avec `messages: chatMessages` 4. Liez `aiResponse` au corps de la réponse 5. Affichez `aiResponse` dans un élément texte

Pour les réponses en streaming (texte apparaissant mot par mot), utilisez le paramètre `stream: true` dans l'appel OpenAI et gérez le flux SSE dans l'Edge Function — plus complexe mais crée une UX bien supérieure que les utilisateurs associent à ChatGPT.

Ingénierie des prompts pour des fonctionnalités produit

La qualité de votre fonctionnalité IA dépend entièrement de votre system prompt. Les prompts génériques produisent des résultats génériques.

**Pour un générateur de contenu** : "Tu es un copywriter pour [Nom de l'entreprise], un SaaS [description]. Génère [type de contenu] en français qui correspond à cette tonalité de marque : [exemples]. Toujours produire dans ce format : [structure]. Ne jamais inclure [exclusions]."

**Pour un assistant d'analyse** : "Tu es un analyste de données expert. L'utilisateur va te fournir des données structurées. Analyse-les et retourne les insights sous forme de : 1) Un résumé en une phrase, 2) Trois points clés en bullet points, 3) Une action recommandée. Réponds toujours en JSON valide."

**Règles pratiques** : soyez précis sur le format de sortie (JSON quand le frontend doit le parser), incluez des contraintes négatives ("ne jamais mentionner les concurrents"), et testez avec 20+ inputs avant de mettre en production. Pour les apps en français, spécifiez explicitement la langue souhaitée dans le prompt.

Contrôle des coûts et limitation de débit

Les coûts de l'API OpenAI s'accumulent vite en production. Trois contrôles à implémenter avant le lancement :

**1. Limites de tokens** : Définissez `max_tokens` sur chaque requête. Pour la plupart des fonctionnalités, 500 tokens suffisent. GPT-4o facture 2,50 $/M tokens en entrée + 10 $/M tokens en sortie — une limite de 500 tokens maintient le coût sous 0,005 $ par requête.

**2. Limitation de débit par utilisateur** : Dans votre Edge Function, vérifiez combien d'appels l'utilisateur a faits dans la dernière heure (stocké dans Supabase). Retournez une erreur 429 si la limite est dépassée.

**3. Cache** : Pour les sorties déterministes (même entrée → même sortie), mettez en cache les réponses dans Supabase. Une table `ai_cache` avec un hash du prompt comme clé élimine les appels API redondants.

Pour une app SaaS française avec 500 MAU faisant chacun 20 requêtes IA par jour : budget 150 à 300 € par mois pour GPT-4o. Incluez ce coût dans votre pricing — typiquement via un système de crédits ou une limite mensuelle par plan.

Fonctionnalités IA no-code courantes que nous construisons

Voici les intégrations OpenAI les plus demandées par nos clients français :

**Génération de contenu IA** : articles de blog, fiches produit, objets d'email en français. WeWeb form → Edge Function → GPT-4o → affichage du résultat.

**Recherche intelligente** : Encodez le contenu utilisateur avec text-embedding-3-small d'OpenAI, stockez les vecteurs dans pgvector (Supabase), et lancez une recherche par similarité. Retourne des résultats sémantiquement pertinents plutôt que par correspondance de mots-clés.

**Résumé de documents** : Importez un PDF → extrayez le texte via Edge Function → résumez avec GPT-4o → stockez le résumé dans Supabase. Très demandé dans les secteurs juridique, comptable et RH.

**Onboarding personnalisé IA** : Posez 5 questions lors de l'inscription, générez une checklist de configuration personnalisée avec GPT-4o, stockez dans le profil utilisateur.

Tous ces cas d'usage fonctionnent sur la stack WeWeb + Supabase + OpenAI sans aucun code côté frontend.