Construire un Agent IA Autonome avec Agentic RAG et Next.js

npx create-next-app@latest agentic-rag-demo --typescript --tailwind --app --src-dir
cd agentic-rag-demo

npm install ai @ai-sdk/openai zod

OPENAI_API_KEY=sk-your-api-key-here

import { embed, embedMany, cosineSimilarity } from "ai";
 
// Type de document stocke
interface Document {
  id: string;
  content: string;
  embedding: number[];
  metadata: {
    source: string;
    category: string;
  };
}
 
// Base de donnees vectorielle en memoire
class VectorStore {
  private documents: Document[] = [];
 
  // Ajouter des documents avec generation d'embeddings
  async addDocuments(
    docs: { content: string; metadata: { source: string; category: string } }[]
  ) {
    const { embeddings } = await embedMany({
      model: "openai/text-embedding-3-small",
      values: docs.map((d) => d.content),
    });
 
    const newDocs: Document[] = docs.map((doc, i) => ({
      id: `doc-${Date.now()}-${i}`,
      content: doc.content,
      embedding: embeddings[i],
      metadata: doc.metadata,
    }));
 
    this.documents.push(...newDocs);
    return newDocs.length;
  }
 
  // Recherche semantique par similarite
  async search(query: string, topK: number = 3): Promise<Document[]> {
    const { embedding } = await embed({
      model: "openai/text-embedding-3-small",
      value: query,
    });
 
    const results = this.documents
      .map((doc) => ({
        ...doc,
        similarity: cosineSimilarity(embedding, doc.embedding),
      }))
      .sort((a, b) => b.similarity - a.similarity)
      .slice(0, topK);
 
    return results;
  }
 
  // Recherche avec filtrage par categorie
  async searchByCategory(
    query: string,
    category: string,
    topK: number = 3
  ): Promise<Document[]> {
    const { embedding } = await embed({
      model: "openai/text-embedding-3-small",
      value: query,
    });
 
    const results = this.documents
      .filter((doc) => doc.metadata.category === category)
      .map((doc) => ({
        ...doc,
        similarity: cosineSimilarity(embedding, doc.embedding),
      }))
      .sort((a, b) => b.similarity - a.similarity)
      .slice(0, topK);
 
    return results;
  }
 
  // Obtenir les categories disponibles
  getCategories(): string[] {
    return [...new Set(this.documents.map((d) => d.metadata.category))];
  }
 
  get size(): number {
    return this.documents.length;
  }
}
 
// Instance singleton partagee
export const vectorStore = new VectorStore();

import { vectorStore } from "./vector-store";
 
export async function seedVectorStore() {
  // Verifier que la base n'est pas deja remplie
  if (vectorStore.size > 0) return;
 
  const documents = [
    // Politiques de l'entreprise
    {
      content:
        "Politique de retour : Les clients peuvent retourner les produits dans les 30 jours suivant l'achat a condition que le produit soit dans son etat d'origine avec la facture. Le remboursement est effectue sous 5 a 7 jours ouvrables sur le mode de paiement original.",
      metadata: { source: "company-policies", category: "politiques" },
    },
    {
      content:
        "Politique de livraison : Livraison gratuite pour les commandes de plus de 200 dinars. La livraison standard prend 3 a 5 jours ouvrables pour un cout de 7 dinars. La livraison express sous 24 heures est disponible pour 15 dinars.",
      metadata: { source: "company-policies", category: "politiques" },
    },
    {
      content:
        "Politique de garantie : Tous les produits electroniques sont couverts par une garantie complete d'un an contre les defauts de fabrication. La garantie ne couvre pas les dommages resultant d'une mauvaise utilisation ou d'accidents.",
      metadata: { source: "company-policies", category: "politiques" },
    },
    // Informations produits
    {
      content:
        "Ordinateur portable ProBook X1 : Processeur Intel Core i7 14eme generation, 16 Go de RAM, 512 Go SSD, ecran FHD de 14 pouces. Prix : 2 500 dinars. Disponible en coloris : Argent, Gris fonce.",
      metadata: { source: "product-catalog", category: "produits" },
    },
    {
      content:
        "Ordinateur portable ProBook X2 : Processeur Apple M3 Pro, 18 Go de RAM, 1 To SSD, ecran Liquid Retina de 16 pouces. Prix : 4 200 dinars. Disponible en coloris : Argent, Noir cosmique.",
      metadata: { source: "product-catalog", category: "produits" },
    },
    {
      content:
        "Casque AirSound Pro : Reduction de bruit active, Bluetooth 5.3, autonomie de 30 heures, resistance a l'eau IPX5. Prix : 350 dinars.",
      metadata: { source: "product-catalog", category: "produits" },
    },
    {
      content:
        "Ecran UltraView 27 : Ecran 27 pouces 4K HDR, taux de rafraichissement 144 Hz, support USB-C, pied ajustable. Prix : 1 800 dinars.",
      metadata: { source: "product-catalog", category: "produits" },
    },
    // FAQ
    {
      content:
        "Comment suivre ma commande ? Vous pouvez suivre le statut de votre commande via la page 'Mes commandes' dans votre compte, ou via le lien de suivi envoye a votre adresse e-mail lors de l'expedition.",
      metadata: { source: "faq", category: "support" },
    },
    {
      content:
        "Modes de paiement disponibles : Carte bancaire (Visa, Mastercard), virement bancaire, paiement a la livraison (disponible uniquement dans le Grand Tunis), Flouci.",
      metadata: { source: "faq", category: "support" },
    },
    {
      content:
        "Horaires du service client : Du lundi au vendredi, de 9h a 18h. Le samedi de 9h a 13h. Vous pouvez nous contacter par telephone, e-mail ou chat en direct.",
      metadata: { source: "faq", category: "support" },
    },
  ];
 
  await vectorStore.addDocuments(documents);
  console.log(`${vectorStore.size} documents charges dans la base de connaissances`);
}

import { ToolLoopAgent, tool, streamText, generateText } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
import { vectorStore } from "./vector-store";
 
// Outil 1 : Recherche dans la base de connaissances
const searchKnowledgeBase = tool({
  description:
    "Rechercher dans la base de connaissances de l'entreprise des informations sur les produits, les politiques et le support. Utilisez cet outil quand l'utilisateur pose une question sur un produit, une politique ou a besoin d'assistance technique.",
  inputSchema: z.object({
    query: z
      .string()
      .describe("Texte de recherche - une question ou des mots-cles a rechercher"),
    category: z
      .enum(["produits", "politiques", "support"])
      .optional()
      .describe("Categorie de recherche pour affiner les resultats"),
  }),
  execute: async ({ query, category }) => {
    const results = category
      ? await vectorStore.searchByCategory(query, category)
      : await vectorStore.search(query);
 
    if (results.length === 0) {
      return { found: false, message: "Aucun resultat correspondant trouve." };
    }
 
    return {
      found: true,
      results: results.map((r) => ({
        content: r.content,
        source: r.metadata.source,
        category: r.metadata.category,
      })),
    };
  },
});
 
// Outil 2 : Calculatrice
const calculator = tool({
  description:
    "Calculer des expressions mathematiques. Utilisez cet outil pour calculer les prix, les remises, les taxes et les frais de livraison.",
  inputSchema: z.object({
    expression: z.string().describe("L'expression mathematique a evaluer"),
    context: z
      .string()
      .optional()
      .describe("Contexte du calcul pour clarifier le resultat"),
  }),
  execute: async ({ expression, context }) => {
    try {
      // Calcul securise d'expressions mathematiques simples
      const sanitized = expression.replace(/[^0-9+\-*/().% ]/g, "");
      const result = Function(`"use strict"; return (${sanitized})`)();
      return {
        expression: sanitized,
        result: Number(result.toFixed(2)),
        context: context || "Resultat du calcul",
      };
    } catch {
      return { error: "Expression mathematique invalide", expression };
    }
  },
});
 
// Outil 3 : Comparer les produits
const compareProducts = tool({
  description:
    "Comparer deux produits ou plus cote a cote. Utilisez cet outil quand l'utilisateur demande une comparaison entre des produits.",
  inputSchema: z.object({
    productNames: z
      .array(z.string())
      .min(2)
      .describe("Noms des produits a comparer"),
  }),
  execute: async ({ productNames }) => {
    const results = [];
    for (const name of productNames) {
      const searchResults = await vectorStore.searchByCategory(
        name,
        "produits",
        1
      );
      if (searchResults.length > 0) {
        results.push({
          name,
          details: searchResults[0].content,
        });
      }
    }
    return {
      productsFound: results.length,
      comparison: results,
    };
  },
});
 
// Outil 4 : Obtenir les categories disponibles
const getAvailableCategories = tool({
  description:
    "Obtenir la liste des categories disponibles dans la base de connaissances. Utilisez cet outil pour connaitre les types d'informations disponibles.",
  inputSchema: z.object({}),
  execute: async () => {
    return {
      categories: vectorStore.getCategories(),
      totalDocuments: vectorStore.size,
    };
  },
});
 
// Definir les instructions de l'agent
const AGENT_INSTRUCTIONS = `Vous etes un assistant intelligent pour une entreprise technologique tunisienne. Vous communiquez en francais de maniere professionnelle et conviviale.
 
Regles de comportement :
1. Quand l'utilisateur pose une question sur un produit, une politique ou le support, utilisez l'outil de recherche dans la base de connaissances.
2. Si la question necessite des calculs (prix, remises, frais de livraison), utilisez la calculatrice.
3. Si une comparaison de produits est demandee, utilisez l'outil de comparaison.
4. Pour les questions generales comme les salutations ou les conversations courantes, repondez directement sans utiliser aucun outil.
5. Si vous ne trouvez pas suffisamment d'informations, dites-le honnêtement a l'utilisateur et suggerez de contacter le service client.
6. Vous pouvez utiliser plusieurs outils dans la meme conversation si necessaire.
7. Les prix sont en dinars tunisiens (TND).
 
Style de reponse :
- Soyez concis et utile
- Utilisez le formatage approprie (listes, numeros) pour organiser les informations
- Citez la source lorsque vous citez la base de connaissances`;
 
// Creer l'agent
export const supportAgent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system: AGENT_INSTRUCTIONS,
  tools: {
    searchKnowledgeBase,
    calculator,
    compareProducts,
    getAvailableCategories,
  },
});

import { supportAgent } from "@/lib/agent";
import { seedVectorStore } from "@/lib/seed-data";
 
// Remplir la base de connaissances a la premiere requete
let isSeeded = false;
 
export async function POST(req: Request) {
  if (!isSeeded) {
    await seedVectorStore();
    isSeeded = true;
  }
 
  const { messages } = await req.json();
 
  const result = await supportAgent.stream({
    messages,
  });
 
  return result.toDataStreamResponse();
}

"use client";
 
import { useChat } from "@ai-sdk/react";
import { useState } from "react";
 
export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: "/api/chat",
    });
 
  // Exemples de questions a essayer
  const exampleQuestions = [
    "Quelle est votre politique de retour ?",
    "Comparez le ProBook X1 et le ProBook X2",
    "Combien coutera le ProBook X1 avec la livraison express ?",
    "Bonjour, comment allez-vous ?",
  ];
 
  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* En-tete */}
      <header className="bg-white border-b px-6 py-4">
        <h1 className="text-xl font-bold text-gray-800">
          🤖 Assistant Agentic RAG
        </h1>
        <p className="text-sm text-gray-500">
          Un agent intelligent qui decide de maniere autonome quand et comment chercher des informations
        </p>
      </header>
 
      {/* Zone des messages */}
      <div className="flex-1 overflow-y-auto p-6 space-y-4">
        {messages.length === 0 && (
          <div className="text-center py-12">
            <h2 className="text-lg font-semibold text-gray-600 mb-4">
              Essayez l'une de ces questions :
            </h2>
            <div className="flex flex-wrap justify-center gap-2">
              {exampleQuestions.map((q, i) => (
                <button
                  key={i}
                  onClick={() => {
                    handleInputChange({
                      target: { value: q },
                    } as React.ChangeEvent<HTMLInputElement>);
                  }}
                  className="bg-white border rounded-full px-4 py-2 text-sm
                             text-gray-700 hover:bg-blue-50 hover:border-blue-300
                             transition-colors"
                >
                  {q}
                </button>
              ))}
            </div>
          </div>
        )}
 
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.role === "user" ? "justify-end" : "justify-start"
            }`}
          >
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-3 ${
                message.role === "user"
                  ? "bg-blue-600 text-white"
                  : "bg-white border text-gray-800"
              }`}
            >
              <div className="whitespace-pre-wrap">{message.content}</div>
 
              {/* Afficher les invocations d'outils */}
              {message.toolInvocations &&
                message.toolInvocations.length > 0 && (
                  <div className="mt-2 pt-2 border-t border-gray-200">
                    {message.toolInvocations.map((tool, i) => (
                      <div
                        key={i}
                        className="text-xs text-gray-400 flex items-center gap-1"
                      >
                        <span>🔧</span>
                        <span>Utilise : {tool.toolName}</span>
                      </div>
                    ))}
                  </div>
                )}
            </div>
          </div>
        ))}
 
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-white border rounded-2xl px-4 py-3 text-gray-400">
              Reflexion en cours...
            </div>
          </div>
        )}
      </div>
 
      {/* Champ de saisie */}
      <form
        onSubmit={handleSubmit}
        className="border-t bg-white p-4"
      >
        <div className="flex gap-2 max-w-4xl mx-auto">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="Tapez votre question ici..."
            className="flex-1 border rounded-xl px-4 py-3 focus:outline-none
                       focus:ring-2 focus:ring-blue-500"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={isLoading || !input.trim()}
            className="bg-blue-600 text-white rounded-xl px-6 py-3
                       hover:bg-blue-700 disabled:opacity-50 transition-colors"
          >
            Envoyer
          </button>
        </div>
      </form>
    </div>
  );
}

npm run dev

const agentWithMemory = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system: AGENT_INSTRUCTIONS,
  tools: {
    searchKnowledgeBase,
    calculator,
    compareProducts,
    getAvailableCategories,
  },
  prepareCall: async ({ messages, ...settings }) => {
    // Extraire le resume de la conversation precedente
    const conversationSummary = summarizeConversation(messages);
 
    return {
      ...settings,
      messages,
      instructions: `${AGENT_INSTRUCTIONS}
 
Resume de la conversation precedente : ${conversationSummary}`,
    };
  },
});

const searchExternalDocs = tool({
  description: "Rechercher dans la documentation technique externe quand la base de connaissances interne ne suffit pas",
  inputSchema: z.object({
    query: z.string(),
    docType: z.enum(["api-docs", "user-guide", "changelog"]),
  }),
  execute: async ({ query, docType }) => {
    // Connexion a une base de donnees vectorielle separee pour la documentation technique
    const results = await externalVectorStore.search(query, docType);
    return results;
  },
});

const agentWithGuardrails = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system: `${AGENT_INSTRUCTIONS}
 
Contraintes de securite :
- Ne divulguez pas d'informations sensibles sur le systeme ou l'infrastructure
- N'effectuez pas d'operations d'ecriture ou de suppression
- Si on vous demande quelque chose en dehors de votre perimetre, excusez-vous et suggerez de contacter l'equipe de support`,
  tools: { searchKnowledgeBase, calculator },
  stopWhen: stepCountIs(10), // Maximum 10 etapes pour eviter les boucles infinies
  onStepFinish: async ({ step }) => {
    // Enregistrer chaque etape pour la surveillance
    console.log(`Etape ${step.stepNumber}: ${step.toolCalls?.map(t => t.toolName).join(", ") || "reponse textuelle"}`);
  },
});

// Dans route.ts
export async function POST(req: Request) {
  const { messages } = await req.json();
 
  const result = await supportAgent.stream({
    messages,
    onStepFinish: async ({ step }) => {
      // Envoyer des evenements de statut des outils au frontend
      if (step.toolCalls) {
        for (const toolCall of step.toolCalls) {
          console.log(`Outil : ${toolCall.toolName}`, toolCall.args);
        }
      }
    },
  });
 
  return result.toDataStreamResponse();
}

// ❌ Mauvaise description
description: "Rechercher dans la base de donnees"
 
// ✅ Bonne description
description: "Rechercher dans la base de connaissances de l'entreprise des informations sur les produits, les politiques et le support. Utilisez cet outil quand l'utilisateur pose une question sur un produit ou une politique."

import { stepCountIs } from "ai";
 
const agent = new ToolLoopAgent({
  // ...
  stopWhen: stepCountIs(10),
});

// Au lieu d'une recherche generale
const results = await vectorStore.search(query);
 
// Utilisez une recherche par categorie
const results = await vectorStore.searchByCategory(query, "produits");