Agent d'étude de marché avec Gemini et le SDK AI de Vercel

Le SDK AI de Vercel est une puissante bibliothèque Open Source permettant de créer des applications, des interfaces utilisateur et des agents basés sur l'IA en TypeScript.

Ce guide vous explique comment créer une application Node.js avec TypeScript qui utilise le SDK AI pour se connecter à l'API Gemini via le fournisseur Google Generative AI et effectuer une analyse automatisée des tendances du marché. L'application finale :

  1. Utilisez Gemini avec la recherche Google pour étudier les tendances actuelles du marché.
  2. Extraire des données structurées de la recherche pour générer des graphiques
  3. Combinez les recherches et les graphiques dans un rapport HTML professionnel, puis enregistrez-le au format PDF.

Prérequis

Pour suivre ce guide, vous aurez besoin des éléments suivants :

  • Une clé API Gemini Vous pouvez en créer une sans frais dans Google AI Studio.
  • Node.js version 18 ou ultérieure.
  • Un gestionnaire de paquets, tel que npm, pnpm ou yarn.

Configurer votre application

Commencez par créer un répertoire pour votre projet et initialisez-le.

npm

mkdir market-trend-app
cd market-trend-app
npm init -y

pnpm

mkdir market-trend-app
cd market-trend-app
pnpm init

fil

mkdir market-trend-app
cd market-trend-app
yarn init -y

Installer des dépendances

Ensuite, installez le SDK AI, le fournisseur Google Generative AI et les autres dépendances nécessaires.

npm

npm install ai @ai-sdk/google zod
npm install -D @types/node tsx typescript && npx tsc --init

Pour éviter une erreur du compilateur TypeScript, mettez en commentaire la ligne suivante dans le fichier tsconfig.json généré :

//"verbatimModuleSyntax": true,

pnpm

pnpm add ai @ai-sdk/google zod
pnpm add -D @types/node tsx typescript

fil

yarn add ai @ai-sdk/google zod
yarn add -D @types/node tsx typescript && yarn tsc --init

Pour éviter une erreur du compilateur TypeScript, mettez en commentaire la ligne suivante dans le fichier tsconfig.json généré :

//"verbatimModuleSyntax": true,

Cette application utilisera également les packages tiers Puppeteer et Chart.js pour afficher les graphiques et créer un PDF :

npm

npm install puppeteer chart.js
npm install -D @types/chart.js

pnpm

pnpm add puppeteer chart.js
pnpm add -D @types/chart.js

fil

yarn add puppeteer chart.js
yarn add -D @types/chart.js

Le package puppeteer nécessite l'exécution d'un script pour télécharger le navigateur Chromium. Votre gestionnaire de packages peut vous demander votre approbation. Assurez-vous donc d'approuver le script lorsque vous y êtes invité.

Configurer votre clé API

Définissez la variable d'environnement GOOGLE_GENERATIVE_AI_API_KEY avec votre clé API Gemini. Le fournisseur d'IA générative de Google recherche automatiquement votre clé API dans cette variable d'environnement.

macOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

Powershell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Créer votre application

Maintenant, créons le fichier principal de notre application. Créez un fichier nommé main.ts dans le répertoire de votre projet. Vous allez créer la logique de ce fichier étape par étape.

Pour effectuer un test rapide et vous assurer que tout est correctement configuré, ajoutez le code suivant à main.ts. Cet exemple de base utilise Gemini 2.5 Flash et generateText pour obtenir une réponse simple de Gemini.

import { google } from "@ai-sdk/google";
import { generateText } from "ai";

async function main() {
  const { text } = await generateText({
    model: google("gemini-2.5-flash"),
    prompt: 'What is plant-based milk?',
  });

  console.log(text);
}

main().catch(console.error);

Avant d'ajouter de la complexité, exécutons ce script pour vérifier que votre environnement est correctement configuré. Exécutez la commande suivante dans votre terminal :

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

fil

yarn tsc && node main.js

Si tout est configuré correctement, la réponse de Gemini s'affiche dans la console.

Effectuer une étude de marché avec la recherche Google

Pour obtenir des informations à jour, vous pouvez activer l'outil Recherche Google pour Gemini. Lorsque cet outil est actif, le modèle peut effectuer des recherches sur le Web pour répondre à la requête et renvoie les sources qu'il a utilisées.

Remplacez le contenu de main.ts par le code suivant pour effectuer la première étape de notre analyse.

import { google } from "@ai-sdk/google";
import { generateText } from "ai";

async function main() {
  // Step 1: Search market trends
  const { text: marketTrends, sources } = await generateText({
    model: google("gemini-2.5-flash"),
    tools: {
      google_search: google.tools.googleSearch({}),
    },
    prompt: `Search the web for market trends for plant-based milk in North America for 2024-2025.
          I need to know the market size, key players and their market share, and primary consumer drivers.
          `,
  });

  console.log("Market trends found:\n", marketTrends);
  // To see the sources, uncomment the following line:
  // console.log("Sources:\n", sources);
}

main().catch(console.error);

Extraire les données d'un graphique

Ensuite, traitons le texte de recherche pour extraire des données structurées adaptées aux graphiques. Utilisez la fonction generateObject du SDK AI avec un schéma zod pour définir la structure exacte des données.

Créez également une fonction d'assistance pour convertir ces données structurées en configuration que Chart.js peut comprendre.

Ajoutez le code suivant à main.ts. Notez les nouvelles importations et l'étape 2 ajoutée.

import { google } from "@ai-sdk/google";
import { generateText, generateObject } from "ai";
import { z } from "zod/v4";
import { ChartConfiguration } from "chart.js";

// Helper function to create Chart.js configurations
function createChartConfig({labels, data, label, type, colors,}: {
  labels: string[];
  data: number[];
  label: string;
  type: "bar" | "line";
  colors: string[];
}): ChartConfiguration {
  return {
    type: type,
    data: {
      labels: labels,
      datasets: [
        {
          label: label,
          data: data,
          borderWidth: 1,
          ...(type === "bar" && { backgroundColor: colors }),
          ...(type === "line" && colors.length > 0 && { borderColor: colors[0] }),
        },
      ],
    },
    options: {
      animation: { duration: 0 }, // Disable animations for static PDF rendering
    },
  };
}

async function main() {
  // Step 1: Search market trends
  const { text: marketTrends, sources } = await generateText({
    model: google("gemini-2.5-flash"),
    tools: {
      google_search: google.tools.googleSearch({}),
    },
    prompt: `Search the web for market trends for plant-based milk in North America for 2024-2025.
          I need to know the market size, key players and their market share, and primary consumer drivers.
          `,
  });

  console.log("Market trends found.");

  // Step 2: Extract chart data
  const { object: chartData } = await generateObject({
    model: google("gemini-2.5-flash"),
    schema: z.object({
      chartConfigurations: z
        .array(
          z.object({
            type: z.enum(["bar", "line"]).describe('The type of chart to generate. Either "bar" or "line"',),
            labels: z.array(z.string()).describe("A list of chart labels"),
            data: z.array(z.number()).describe("A list of the chart data"),
            label: z.string().describe("A label for the chart"),
            colors: z.array(z.string()).describe('A list of colors to use for the chart, e.g. "rgba(255, 99, 132, 0.8)"',),
          }),
        )
        .describe("A list of chart configurations"),
    }),
    prompt: `Given the following market trends text, come up with a list of 1-3 meaningful bar or line charts
    and generate chart data.
    
Market Trends:
${marketTrends}
`,
  });

  const chartConfigs = chartData.chartConfigurations.map(createChartConfig);

  console.log("Chart configurations generated.");
}

main().catch(console.error);

Générer le rapport final

Dans la dernière étape, demandez à Gemini d'agir en tant qu'expert en rédaction de rapports. Fournissez-lui l'étude de marché, les configurations de graphiques et un ensemble clair d'instructions pour créer un rapport HTML. Utilisez ensuite Puppeteer pour afficher ce code HTML et l'enregistrer au format PDF.

Ajoutez l'importation puppeteer finale et l'étape 3 à votre fichier main.ts.

// ... (imports from previous step)
import puppeteer from "puppeteer";

// ... (createChartConfig helper function from previous step)

async function main() {
  // ... (Step 1 and 2 from previous step)

  // Step 3: Generate the final HTML report and save it as a PDF
  const { text: htmlReport } = await generateText({
    model: google("gemini-2.5-flash"),
    prompt: `You are an expert financial analyst and report writer.
    Your task is to generate a comprehensive market analysis report in HTML format.

    **Instructions:**
    1.  Write a full HTML document.
    2.  Use the provided "Market Trends" text to write the main body of the report. Structure it with clear headings and paragraphs.
    3.  Incorporate the provided "Chart Configurations" to visualize the data. For each chart, you MUST create a unique <canvas> element and a corresponding <script> block to render it using Chart.js.
    4.  Reference the "Sources" at the end of the report.
    5.  Do not include any placeholder data; use only the information provided.
    6.  Return only the raw HTML code.

    **Chart Rendering Snippet:**
    Include this script in the head of the HTML: <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    For each chart, use a structure like below, ensuring the canvas 'id' is unique for each chart, and apply the correspinding config:

    ---
    <div style="width: 800px; height: 600px;">
      <canvas id="chart1"></canvas>
    </div>
    <script>
      new Chart(document.getElementById('chart1'), config);
    </script>
    ---
    (For the second chart, use 'chart2' and the corresponding config, and so on.)

    **Data:**
    - Market Trends: ${marketTrends}
    - Chart Configurations: ${JSON.stringify(chartConfigs)}
    - Sources: ${JSON.stringify(sources)}
    `,
  });

  // LLMs may wrap the HTML in a markdown code block, so strip it.
  const finalHtml = htmlReport.replace(/^```html\n/, "").replace(/\n```$/, "");

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(finalHtml);
  await page.pdf({ path: "report.pdf", format: "A4" });
  await browser.close();

  console.log("\nReport generated successfully: report.pdf");
}

main().catch(console.error);

Exécuter votre application

Vous êtes maintenant prêt à exécuter l'application. Exécutez la commande suivante dans votre terminal :

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

fil

yarn tsc && node main.js

Vous verrez les journaux s'afficher dans votre terminal à mesure que le script exécute chaque étape. Une fois l'analyse terminée, un fichier report.pdf contenant votre analyse du marché sera créé dans le répertoire de votre projet.

Vous trouverez ci-dessous les deux premières pages d'un exemple de rapport PDF :

Rapport d&#39;analyse du marché

Autres ressources

Pour en savoir plus sur la création d'applications avec Gemini et le SDK AI, consultez les ressources suivantes :