Créer un Chatbot IA en NextJS : Tutoriel Complet

Ce tutoriel vous guide pas à pas dans la création d'un chatbot IA en utilisant NextJS. Nous allons exploiter l'AI Vercel SDK et OpenAI pour mettre en place un chatbot interactif, capable de diffuser des réponses en temps réel avec un rendu Markdown élégant. En suivant ces étapes, vous serez en mesure de créer un chatbot fonctionnel en moins de 30 minutes, idéal pour dynamiser vos projets web.

1. Installation de l'AI SDK

La première étape consiste à installer l'AI Vercel SDK qui simplifie grandement l'intégration de l'intelligence artificielle dans vos projets NextJS.

Commandes d'installation

Exécutez la commande suivante pour installer les dépendances :

npm install ai @ai-sdk/react @ai-sdk/openai

Ensuite, ajoutez votre clé API OpenAI dans votre fichier .env :

OPENAI_API_KEY=xxxxxxxxx

2. Création de la Page Client

Créez une page client qui servira d'interface pour le chatbot. Ce composant React gère l'affichage des messages et la saisie de l'utilisateur.

Exemple de Code

'use client';

import { useRef, useEffect, KeyboardEvent } from 'react';
import { useChat } from '@ai-sdk/react';
import { Send, User, Bot } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Textarea } from "@/components/ui/textarea";
import { Button } from '@/components/ui/button';
import { MemoizedMarkdown } from '@/components/memoized-markdown';

export default function Chat() {
    const { messages, input, handleInputChange, handleSubmit } = useChat();
    const messagesEndRef = useRef(null);
    const textAreaRef = useRef(null);

    const handleKeyDown = (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSubmit(e);
        }
    };

    const handleInput = (e) => {
        handleInputChange(e);
        if (textAreaRef.current) {
            textAreaRef.current.style.height = 'auto';
            textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
        }
    };

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

    return (
        <div className="flex flex-col h-[80vh] md:h-[70vh] w-full max-w-[80%] mx-auto pb-24">
            <div className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
                {messages.map(m => (
                    <div key={m.id} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                        <Card className="bg-opacity-30 border-4 rounded-lg shadow-md text-white max-w-full">
                            <CardContent className="flex items-center space-x-2">
                                {m.role === 'user' ? <User /> : <Bot />}
                                <MemoizedMarkdown id={m.id} content={m.content} />
                            </CardContent>
                        </Card>
                    </div>
                ))}
                <div ref={messagesEndRef} />
            </div>

            <form onSubmit={handleSubmit} className="py-4 border-t">
                <div className="relative">
                    <Textarea
                        ref={textAreaRef}
                        className="w-full p-2 resize-none rounded-lg"
                        value={input}
                        placeholder="Dites quelque chose..."
                        onChange={handleInput}
                        onKeyDown={handleKeyDown}
                        rows={1}
                    />
                    <Button type="submit" className="absolute right-2 bottom-2">
                        <Send className="w-4 h-4" />
                    </Button>
                </div>
            </form>
        </div>
    );
}

Fonctionnalités clés :

• Auto-scroll vers le dernier message
• Textarea extensible qui s'adapte à la taille du contenu
• Envoi rapide avec la touche Entrée

3. Création d'un Route Handler

Pour gérer le flux de conversation et les réponses en streaming, configurez un route handler dans votre backend.

Exemple de Code

import { openai } from '@ai-sdk/openai';
import { streamText, Message } from 'ai';

export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

Cette configuration permet de traiter les réponses en streaming depuis OpenAI avec un minimum de code, garantissant ainsi une interaction fluide et réactive.

4. Ajout du Rendu Markdown

Pour un affichage propre et formaté des réponses du chatbot, ajoutez une gestion du rendu Markdown. Cela permet de prendre en charge les blocs de code, les liens et la mise en forme classique.

Exemple de Code

import { marked } from 'marked';
import { memo, useMemo } from 'react';
import ReactMarkdown from 'react-markdown';

const MemoizedMarkdownBlock = memo(({ content }) => (
    <ReactMarkdown>{content}</ReactMarkdown>
));

export const MemoizedMarkdown = memo(({ content, id }) => {
    const blocks = useMemo(() => marked.lexer(content).map(token => token.raw), [content]);

    return blocks.map((block, index) => (
        <MemoizedMarkdownBlock key={`${id}-block_${index}`} content={block} />
    ));
});

Ce composant optimise l'affichage du contenu Markdown pour une expérience utilisateur améliorée.

5. Conclusion

En moins de 30 minutes, vous avez mis en place un chatbot IA complet en NextJS. Avec :

• Une interface utilisateur réactive,
• Un backend léger pour gérer les réponses en streaming,
• Et un rendu Markdown optimisé pour une lecture agréable,

votre chatbot est prêt à interagir avec vos utilisateurs et à apporter une touche d'intelligence à votre site.

Note Technique : Cet article a été implémenté en NextJS, mais vous pouvez réaliser la même intégration dans n'importe quel langage ou framework. L'approche reste similaire : installer le SDK, configurer le backend, et mettre en place le rendu des messages.