Retour au blog

TUTO : Créer un Chatbot IA pour son Portfolio de A à Z

•5 min de lecture•Lucas BONERE
TUTO : Créer un Chatbot IA pour son Portfolio de A à Z
tutoianextjstypescriptchatbotgroq

Transformer un portfolio statique en une expérience interactive est aujourd'hui possible grâce aux LLM (Large Language Models). Un chatbot bien conçu n'est pas juste un gadget, c'est un agent conversationnel qui vend vos compétences à votre place.

Dans ce tutoriel, nous allons voir comment construire un assistant intelligent, sûr et orienté vers la conversion.

1. L’Architecture Backend : Groq & Llama 3

Pour un chatbot, la vitesse est cruciale. L'API Groq permet des temps de réponse quasi instantanés (quelques millisecondes).

Setup de la route API (Next.js)

Créez app/api/chat/route.ts pour gérer les requêtes :

import { Groq } from 'groq-sdk';
import { NextResponse } from 'next/server';

const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });

export async function POST(req: Request) {
    const { messages, locale } = await req.json();
    const context = getSiteContext(locale);

    const response = await groq.chat.completions.create({
        model: 'llama-3.3-70b-versatile',
        messages: [{ role: 'system', content: context }, ...messages],
        temperature: 0.7,
    });

    return NextResponse.json({ content: response.choices[0].message.content });
}

2. Le Secret : L’Injection de Contexte via i18n

L’Injection de Contexte consiste à fournir à l’IA toutes les informations nécessaires pour qu’elle puisse répondre précisément.

Pourquoi utiliser i18n ?

Plutôt que d'écrire manuellement les informations dans le prompt, utilisez vos fichiers de traduction (fr.ts, en.ts). C'est votre Source Unique de Vérité.

export function getSiteContext(lang: 'fr' | 'en'): string {
    const t = lang === 'fr' ? fr : en; // Import de vos fichiers i18n
    
    return `
Tu es Lucas, un expert en Data Science. Voici tes infos à jour :
PROJETS : ${t.projects.items.map(p => `${p.title}: ${p.description}`).join(' | ')}
EXPÉRIENCES : ${t.about.career.professional.items.map(j => j.role).join(', ')}
`   ;
}

Résultat : Si vous mettez à jour un projet dans votre fichier de langue, votre chatbot est mis à jour instantanément sans toucher au code de l'IA.

3. Sécurité et Guardrails : "Blinder" son IA

La sécurité d'un chatbot portfolio repose sur deux piliers : le périmètre et le comportement.

  • Le Blindage (Prompt Engineering) : Il faut être explicite. "Tu as interdiction de répondre à des sujets hors-projets".
  • Détection du Hors-Sujet : Intégrez une règle qui force l'IA à utiliser une réponse standardisée si la question sort du cadre (ex: demander une recette).
  • Format de Refus :
    1. Refus poli mais ferme.
    2. Rappel du rôle (Assistant de Lucas).
    3. Redirection vers un sujet valide.

4. Intégration de Liens et Mise en Forme

Un chatbot doit aider le visiteur à naviguer. Pour cela, il doit savoir formater ses réponses.

Utilisation du Markdown

L'IA doit être instruite pour répondre en Markdown. Cela permet d'avoir du gras, des listes et surtout des liens cliquables.

Stratégie de Liens Directs

Ne laissez pas l'IA inventer des URLs. Donnez-lui une liste de liens structurés dans le contexte :

  • Accueil : /
  • Contact : /contact
  • Projets : /projets/[slug]

Instruction Système : "Utilise systématiquement des liens Markdown pour la navigation. Exemple : Voir mon projet".

5. UI & UX : Rendre le Chat Fluide

Auto-scroll Intelligent

Pour que l'utilisateur voit toujours le dernier message, utilisez useRef :

const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

Questions Rapides (Quick Questions)

Ajoutez des boutons de suggestions pour aider l'utilisateur :

  • "Quels sont tes projets phares ?"
  • "Comment peut-on travailler ensemble ?"

6. Conseils Avancés pour un Chatbot Robuste & Adaptable

Pour passer d'un simple bot à un véritable compagnon intelligent capable de gérer toutes les situations, voici quelques stratégies avancées :

Gérer l'Ambiguïté (Clarification)

Apprenez à votre IA à ne pas deviner si elle n'est pas sûre.

  • Instruction : "Si la question est ambiguë, demande poliment des précisions au lieu d'inventer une réponse."
  • Exemple : Si l'utilisateur demande "Tu fais quoi ?", l'IA peut répondre : "Parles-tu de mes missions actuelles en tant que Data Scientist ou de ce que je peux faire pour t'aider sur ce chat ?"

Dégradation Élégante (Graceful Degradation)

Une API peut tomber, une requête peut échouer. Ne laissez jamais l'utilisateur avec un écran figé.

  • Côté Code : Implémentez des blocs try/catch robustes et affichez un message d'erreur "humain" et rassurant qui propose de réessayer plus tard.
  • Fallback i18n : Ayez toujours un message d'erreur traduit disponible dans vos fichiers de langue.

Analyse et Itération Continue

Le chatbot n'est jamais "fini".

  • Loggez les questions (anonymement) : Identifiez les questions auxquelles l'IA a eu du mal à répondre.
  • Mise à jour du Contexte : Si beaucoup de gens demandent vos tarifs (et qu'ils ne sont pas dans le contexte), ajoutez-les ! L'IA s'adapte à la demande réelle de vos visiteurs.

Adaptabilité du Ton

L'IA peut varier son ton en fonction de l'interaction.

  • Context Awareness : Si l'utilisateur est très formel, l'IA doit l'être. S'il est détendu ou utilise des emojis, l'IA peut se permettre d'être plus chaleureuse.

🛠️ Boîte à Outils : Bibliothèques & Outils Utiles

Pour mettre en place ce système de manière optimale, voici les outils que je recommande :

  • Moteur IA : Groq API (Rapidité imbattable).
  • Modèle : Llama 3.3 70B ou Llama 3.1 8B (pour plus d'économie).
  • Framework Web : Next.js (App Router pour le streaming).
  • Animations UI : Framer Motion (Pour des transitions de messages fluides).
  • Gestion des Types : TypeScript (Crucial pour lesRefs et les props i18n).
  • Styling : Tailwind CSS (Rapidité de design).
  • Icônes : Lucide React (Pour enrichir l'UI).

Conclusion

Un chatbot portfolio réussi est un équilibre entre technique pure et stratégie de communication. En injectant intelligemment votre contexte i18n et en verrouillant la sécurité, vous créez un outil qui non seulement impressionne, mais convertit réellement vos visiteurs en futurs collaborateurs.

À vos claviers ! 🚀

Partager cet article