Créer un assistant de recherche IA avec Firecrawl et l’AI SDK

npx create-next-app@latest ai-sdk-firecrawl && cd ai-sdk-firecrawl

• TypeScript : Oui
• ESLint : Oui
• Tailwind CSS : Oui
• App Router : Oui
• Utiliser le répertoire src/ : Non
• Alias d’importation : Oui (@/*)

​

Installer les packages de l’AI SDK

npm i ai @ai-sdk/react zod

• ai : SDK principal avec diffusion (streaming), appel d’outils et gestion des réponses
• @ai-sdk/react : hooks React comme useChat pour créer des interfaces de conversation
• zod : validation de schémas pour les paramètres d’outils

​

Installer AI Elements

npx ai-elements@latest

​

Installer le fournisseur OpenAI

npm install @ai-sdk/openai

• Aperçu
• Code

​

Comprendre le Frontend

• Affichage de la conversation : Le composant Conversation gère automatiquement le défilement et l’affichage des messages
• Rendu des messages : Chaque partie d’un message est affichée selon son type (texte, raisonnement, appels d’outils)
• Visualisation des outils : Les appels d’outils s’affichent dans des sections repliables présentant les entrées et les sorties
• Contrôles interactifs : les utilisateurs peuvent activer/désactiver la recherche sur le web, choisir des modèles et joindre des fichiers
• Actions sur les messages : Copier et réessayer les actions pour les messages de l’assistant

import { streamText, UIMessage, convertToModelMessages } from "ai";
import { createOpenAI } from "@ai-sdk/openai";

const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

// Autorise les réponses en streaming jusqu'à 5 minutes
export const maxDuration = 300;

export async function POST(req: Request) {
  const {
    messages,
    model,
    webSearch,
  }: {
    messages: UIMessage[];
    model: string;
    webSearch: boolean;
  } = await req.json();

  const result = streamText({
    model: openai(model),
    messages: convertToModelMessages(messages),
    system:
      "Vous êtes un assistant utile capable de répondre aux questions et d'aider dans les tâches.",
  });

  // renvoie les sources et le raisonnement au client
  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

• Reçoit des messages depuis le frontend
• Utilise le modèle OpenAI choisi par l’utilisateur
• Diffuse les réponses en continu au client
• N’inclut pas encore d’outils — nous les ajouterons ensuite

​

Installer le SDK Firecrawl

npm i @mendable/firecrawl-js

​

Créer le fichier des outils

mkdir lib && touch lib/tools.ts

import FirecrawlApp from "@mendable/firecrawl-js";
import { tool } from "ai";
import { z } from "zod";

const firecrawl = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

export const scrapeWebsiteTool = tool({
  description: 'Extraire le contenu de n'importe quelle URL',
  inputSchema: z.object({
    url: z.string().url().describe('L'URL à scraper')
  }),
  execute: async ({ url }) => {
    console.log('Scraping :', url);
    const result = await firecrawl.scrape(url, {
      formats: ['markdown'],
      onlyMainContent: true,
      timeout: 30000
    });
    console.log('Aperçu du contenu scrapé :', result.markdown?.slice(0, 200) + '...');
    return { content: result.markdown };
  }
});

export const searchWebTool = tool({
  description: 'Rechercher sur le web avec Firecrawl',
  inputSchema: z.object({
    query: z.string().describe('La requête de recherche'),
    limit: z.number().optional().describe('Nombre de résultats'),
    location: z.string().optional().describe('Localisation pour les résultats géolocalisés'),
    tbs: z.string().optional().describe('Filtre temporel (qdr:h, qdr:d, qdr:w, qdr:m, qdr:y)'),
    sources: z.array(z.enum(['web', 'news', 'images'])).optional().describe('Types de résultats'),
    categories: z.array(z.enum(['github', 'research', 'pdf'])).optional().describe('Catégories de filtre'),
  }),
  execute: async ({ query, limit, location, tbs, sources, categories }) => {
    console.log('Recherche :', query);
    const response = await firecrawl.search(query, {
      ...(limit && { limit }),
      ...(location && { location }),
      ...(tbs && { tbs }),
      ...(sources && { sources }),
      ...(categories && { categories }),
    }) as { web?: Array<{ title?: string; url?: string; description?: string }> };

    const results = (response.web || []).map((item) => ({
      title: item.title || item.url || 'Sans titre',
      url: item.url || '',
      description: item.description || '',
    }));

    console.log('Résultats de recherche :', results.length);
    return { results };
  },
});

​

Comprendre les outils

• Accepte une URL en entrée (validée par un schéma Zod)
• Utilise la méthode scrape de Firecrawl pour récupérer la page en Markdown
• N’extrait que le contenu principal afin de réduire la consommation de jetons
• Renvoie le contenu extrait pour que l’IA l’analyse

• Accepte une requête de recherche avec des filtres optionnels
• Utilise la méthode search de Firecrawl pour trouver des pages web pertinentes
• Prend en charge des filtres avancés comme l’emplacement, la plage temporelle et les catégories de contenu
• Renvoie des résultats structurés avec des titres, des URL et des descriptions

import { streamText, UIMessage, stepCountIs, convertToModelMessages } from "ai";
import { createOpenAI } from "@ai-sdk/openai";
import { scrapeWebsiteTool, searchWebTool } from "@/lib/tools";

const openai = createOpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export const maxDuration = 300;

export async function POST(req: Request) {
  const {
    messages,
    model,
    webSearch,
  }: {
    messages: UIMessage[];
    model: string;
    webSearch: boolean;
  } = await req.json();

  const result = streamText({
    model: openai(model),
    messages: convertToModelMessages(messages),
    system:
      "You are a helpful assistant that can answer questions and help with tasks.",
    // Add the Firecrawl tools here
    tools: {
      scrapeWebsite: scrapeWebsiteTool,
      searchWeb: searchWebTool,
    },
    stopWhen: stepCountIs(5),
    toolChoice: webSearch ? "auto" : "none",
  });

  return result.toUIMessageStreamResponse({
    sendSources: true,
    sendReasoning: true,
  });
}

• Importer stepCountIs depuis l’AI SDK
• Importer les outils Firecrawl depuis @/lib/tools
• Ajouter l’objet tools avec les outils scrapeWebsite et searchWeb
• Ajouter stopWhen: stepCountIs(5) pour limiter le nombre d’étapes d’exécution
• Définir toolChoice sur « auto » lorsque la recherche web est activée, « none » sinon

npm run dev

1. Activez le bouton « Search » pour activer la recherche web
2. Demandez : « What are the latest features from firecrawl.dev? »
3. Observez l’IA appeler l’outil searchWeb ou scrapeWebsite
4. Suivez l’exécution de l’outil dans l’UI avec les entrées et sorties
5. Lisez l’analyse de l’IA basée sur les données collectées