Market Research Agent mit Gemini und dem AI SDK von Vercel

Das AI SDK von Vercel ist eine leistungsstarke Open-Source-Bibliothek zum Erstellen von KI-gestützten Anwendungen, Benutzeroberflächen und Agents in TypeScript.

In diesem Leitfaden erfahren Sie, wie Sie eine Node.js-Anwendung mit TypeScript erstellen, die das AI SDK verwendet, um über den Google Generative AI Provider eine Verbindung zur Gemini API herzustellen und automatisierte Markttrendanalysen durchzuführen. Die endgültige Anwendung wird:

  1. Mit Gemini in der Google Suche aktuelle Markttrends recherchieren
  2. Strukturierte Daten aus der Recherche extrahieren, um Diagramme zu erstellen.
  3. Kombinieren Sie die Rechercheergebnisse und Diagramme in einem professionellen HTML-Bericht und speichern Sie ihn als PDF-Datei.

Vorbereitung

Für diese Anleitung benötigen Sie Folgendes:

  • Ein Gemini API-Schlüssel Sie können kostenlos einen in Google AI Studio erstellen.
  • Node.js-Version 18 oder höher.
  • Ein Paketmanager wie npm, pnpm oder yarn.

Anwendung einrichten

Erstellen Sie zuerst ein neues Verzeichnis für Ihr Projekt und initialisieren Sie es.

npm

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

pnpm

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

Garn

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

Abhängigkeiten installieren

Installieren Sie als Nächstes das AI SDK, den Google Generative AI-Anbieter und andere erforderliche Abhängigkeiten.

npm

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

Um einen TypeScript-Compilerfehler zu vermeiden, kommentieren Sie die folgende Zeile in der generierten tsconfig.json aus:

//"verbatimModuleSyntax": true,

pnpm

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

Garn

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

Um einen TypeScript-Compilerfehler zu vermeiden, kommentieren Sie die folgende Zeile in der generierten tsconfig.json aus:

//"verbatimModuleSyntax": true,

In dieser Anwendung werden auch die Drittanbieterpakete Puppeteer und Chart.js zum Rendern von Diagrammen und zum Erstellen eines PDF verwendet:

npm

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

pnpm

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

Garn

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

Für das Paket puppeteer muss ein Skript ausgeführt werden, um den Chromium-Browser herunterzuladen. Ihr Paketmanager fordert Sie möglicherweise zur Genehmigung auf. Genehmigen Sie das Skript, wenn Sie dazu aufgefordert werden.

API-Schlüssel konfigurieren

Legen Sie die Umgebungsvariable GOOGLE_GENERATIVE_AI_API_KEY mit Ihrem Gemini API-Schlüssel fest. Der Google Generative AI-Anbieter sucht automatisch nach Ihrem API-Schlüssel in dieser Umgebungsvariable.

macOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

Powershell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Anwendung erstellen

Erstellen wir nun die Hauptdatei für unsere Anwendung. Erstellen Sie in Ihrem Projektverzeichnis eine neue Datei mit dem Namen main.ts. Sie erstellen die Logik in dieser Datei Schritt für Schritt.

Fügen Sie den folgenden Code in main.ts ein, um schnell zu testen, ob alles richtig eingerichtet ist. In diesem einfachen Beispiel wird Gemini 2.5 Flash und generateText verwendet, um eine einfache Antwort von Gemini zu erhalten.

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);

Bevor wir die Komplexität erhöhen, führen wir dieses Skript aus, um zu prüfen, ob Ihre Umgebung richtig konfiguriert ist. Führen Sie in Ihrem Terminal den folgenden Befehl aus:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

Garn

yarn tsc && node main.js

Wenn alles richtig eingerichtet ist, wird die Antwort von Gemini in der Konsole ausgegeben.

Marktforschung mit der Google Suche betreiben

Wenn Sie aktuelle Informationen benötigen, können Sie das Tool Google Suche für Gemini aktivieren. Wenn dieses Tool aktiv ist, kann das Modell im Web nach Antworten auf den Prompt suchen und die verwendeten Quellen angeben.

Ersetzen Sie den Inhalt von main.ts durch den folgenden Code, um den ersten Schritt unserer Analyse auszuführen.

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);

Diagrammdaten extrahieren

Als Nächstes verarbeiten wir den Recherchetext, um strukturierte Daten zu extrahieren, die für Diagramme geeignet sind. Verwenden Sie die generateObject-Funktion des AI SDK zusammen mit einem zod-Schema, um die genaue Datenstruktur zu definieren.

Erstellen Sie außerdem eine Hilfsfunktion, um diese strukturierten Daten in eine Konfiguration umzuwandeln, die Chart.js verstehen kann.

Fügen Sie den folgenden Code zu main.ts hinzu. Beachten Sie die neuen Importe und den hinzugefügten „Schritt 2“.

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);

Abschlussbericht erstellen

Weisen Sie Gemini im letzten Schritt an, einen Expertenbericht zu erstellen. Geben Sie ihm die Marktforschungsergebnisse, die Diagrammkonfigurationen und eine klare Anleitung zum Erstellen eines HTML-Berichts. Verwenden Sie dann Puppeteer, um dieses HTML zu rendern und als PDF zu speichern.

Fügen Sie den finalen puppeteer-Import und „Schritt 3“ in Ihre main.ts-Datei ein.

// ... (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);

Führen Sie Ihre Anwendung aus

Sie können die Anwendung jetzt ausführen. Führen Sie im Terminal den folgenden Befehl aus:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

Garn

yarn tsc && node main.js

Im Terminal wird ein Log angezeigt, während das Skript die einzelnen Schritte ausführt. Nach Abschluss wird in Ihrem Projektverzeichnis eine report.pdf-Datei mit Ihrer Marktanalyse erstellt.

Unten sehen Sie die ersten beiden Seiten eines Beispiel-PDF-Berichts:

Marktanalysebericht

Weitere Ressourcen

Weitere Informationen zum Entwickeln mit Gemini und dem AI SDK finden Sie in den folgenden Ressourcen: