Ajouter un chatbot client avec OpenRouter (sans exposer la clé API)

Les clients demandent de plus en plus "un petit chatbot IA sur le site." Les exigences semblent simples : répondre aux FAQ, capturer des leads, aider peut-être les visiteurs à trouver le bon service. Le piège est de mettre votre clé API dans le navigateur ou de payer pour un widget SaaS que vous ne pouvez pas personnaliser.

Voici comment je livre des chatbots clients en utilisant des routes API Next.js + OpenRouter, la même stack qui fait tourner ce portfolio.

Une architecture qui garde les clés en sécurité

N'appelez jamais OpenRouter depuis le navigateur. Le flux est :

1. Le visiteur tape dans le widget de chat (composant client)
2. Le message va vers votre route /api/chat (serveur)
3. Le serveur ajoute un prompt système avec le contexte de votre business
4. Le serveur appelle OpenRouter avec la clé secrète
5. La réponse revient au client

Le visiteur ne voit jamais la clé. Vous contrôlez le modèle, la température et le nombre max de tokens côté serveur.

Ce qui va dans le prompt système

Gardez-le factuel et borné :

• Qui vous êtes et ce que vous offrez (design, formation, dev)
• Trois pages de profil et à quoi sert chacune
• Le lien Cal.com pour réserver
• Un repli email si le bot ne peut pas aider
• Une règle explicite : "N'invente pas de prix, de délais, ou de projets non listés"

Mettez à jour le prompt quand les services changent. Traitez-le comme du contenu éditorial, pas une config qu'on règle une fois.

Choix de modèle avec un budget

Pour des sites de portfolio et de petite entreprise, un modèle rapide et bon marché suffit pour un chat de type FAQ. J'utilise OpenRouter pour changer de modèle sans réécrire le code d'intégration. Testez avec de vraies questions de visiteurs venant de clients avant le lancement.

Ce que les clients obtiennent réellement

• Un widget de chat à leurs couleurs, cohérent avec leur site
• WhatsApp comme voie parallèle (pas remplacée)
• Une limitation de débit sur la route API pour prévenir les abus
• Une journalisation optionnelle des conversations pour améliorer les FAQ

Erreurs courantes

1. Aucun repli. Affichez toujours l'email et WhatsApp quand l'API échoue.

2. Réponses trop longues. Limitez les tokens pour que les réponses restent parcourables.

3. Aucune divulgation. Dites aux visiteurs qu'ils parlent à un assistant IA, pas à vous directement.

4. Entraîner le bot sur du fantasme. Si le prompt système revendique des capacités que vous n'offrez pas, vous aurez des appels commerciaux embarrassants.

En voulez-vous un sur votre site ? Voyez comment ça marche ici (chat en bas à gauche), consultez les projets de développement, ou réservez un appel gratuit.