Créer un chatbot IA avec Next.js et Groq : le guide complet

Un chatbot IA est devenu un standard pour les SaaS modernes. Avec Groq et son inférence ultra-rapide, vous pouvez offrir une expérience conversationnelle fluide sans exploser votre budget API.

Pourquoi Groq pour votre chatbot ?

Groq exécute les modèles open source comme Llama 3.3 sur des LPU dédiées, avec des vitesses de génération imbattables.

Résultat : votre chatbot répond plus vite que la plupart des humains, ce qui transforme l'expérience utilisateur.

Étape 1 : Obtenir une clé API Groq

Créez un compte gratuit sur console.groq.com et générez votre clé API. Le tier gratuit permet déjà 14 400 requêtes par jour, largement suffisant pour démarrer.

# Variables d'environnement (.env.local)
GROQ_API_KEY=gsk_your_key_here

Étape 2 : Créer la route API de chat

// src/app/api/chat/route.ts
import { NextRequest } from 'next/server'
import { createGroq } from 'groq-sdk'

const groq = createGroq({ apiKey: process.env.GROQ_API_KEY! })

export async function POST(req: NextRequest) {
  const { messages } = await req.json()

  // Limite l'historique aux 10 derniers messages
  const history = messages.slice(-10)

  const response = await groq.chat.completions.create({
    model: 'llama-3.3-70b-versatile',
    messages: [
      { role: 'system', content: 'Tu es un assistant utile qui répond en français.' },
      ...history,
    ],
    stream: true,
  })

  return new Response(response.toReadableStream(), {
    headers: { 'Content-Type': 'text/event-stream' },
  })
}

Cette route gère le streaming nativement via le protocole SSE.

Streaming des réponses en temps réel

// Côté client : consommer le stream
const res = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ messages }),
})

const reader = res.body!.getReader()
const decoder = new TextDecoder()

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  const chunk = decoder.decode(value)
  setMessages(prev => updateLast(prev, chunk))
}

Interface de chat réactive

Côté client, un composant React simple suffit pour une excellente UX conversationnelle.

• Affichez chaque token dès son arrivée avec un état useState
• Ajoutez un indicateur « en train d'écrire » pendant l'attente
• Désactivez le bouton envoyer pendant la génération
• Scrollez automatiquement vers le bas à chaque nouveau chunk

Bonnes pratiques production

Au-delà du code, quelques pratiques distinguent un prototype d'un chatbot de production.

• Contexte système : Un prompt système précis améliore drastiquement la qualité des réponses.
• Historique : Limitez l'historique envoyé au modèle aux 10 derniers messages.
• Rate limiting : Protégez votre route API contre les abus avec un rate limiting par IP.
• Cache : Mettez en cache les réponses fréquentes pour économiser vos crédits.

Testez toujours avec des prompts en français pour valider la qualité dans votre langue cible.

Déploiement sur Vercel

vercel --prod

Le déploiement prend moins de deux minutes avec la CLI Vercel.

Conclusion

Vous avez maintenant toutes les clés pour créer un chatbot IA rapide et professionnel. Pour aller plus vite, nos templates SaaS incluent déjà cette architecture complète. Concentrez-vous sur votre produit, pas sur la plomberie.