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 :
- Utilisez Gemini avec la recherche Google pour étudier les tendances actuelles du marché.
- Extraire des données structurées de la recherche pour générer des graphiques
- 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
ouyarn
.
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 :
Autres ressources
Pour en savoir plus sur la création d'applications avec Gemini et le SDK AI, consultez les ressources suivantes :