Агент по исследованию рынка с Gemini и AI SDK от Vercel

AI SDK от Vercel — это мощная библиотека с открытым исходным кодом для создания приложений, пользовательских интерфейсов и агентов на основе искусственного интеллекта с использованием TypeScript.

В этом руководстве вы узнаете, как создать приложение Node.js с использованием TypeScript, которое применяет AI SDK для подключения к API Gemini через Google Generative AI Provider и выполняет автоматический анализ рыночных тенденций. Итоговое приложение будет:

  1. Используйте Gemini в сочетании с поиском Google для изучения текущих рыночных тенденций.
  2. Извлеките структурированные данные из исследования для построения диаграмм.
  3. Объедините результаты исследований и диаграммы в профессиональный HTML-отчет и сохраните его в формате PDF.

Предварительные требования

Для выполнения этого руководства вам потребуется:

  • Ключ API Gemini. Вы можете создать его бесплатно в Google AI Studio .
  • Node.js версии 18 или более поздней.
  • Менеджер пакетов, например, npm , pnpm или yarn .

Настройте ваше приложение

Сначала создайте новую директорию для вашего проекта и инициализируйте её.

npm

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

pnpm

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

пряжа

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

Установите зависимости

Далее установите AI SDK, поставщик генеративного ИИ от Google и другие необходимые зависимости.

npm

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

Чтобы предотвратить ошибку компилятора TypeScript, закомментируйте следующую строку в сгенерированном файле tsconfig.json :

//"verbatimModuleSyntax": true,

pnpm

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

пряжа

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

Чтобы предотвратить ошибку компилятора TypeScript, закомментируйте следующую строку в сгенерированном файле tsconfig.json :

//"verbatimModuleSyntax": true,

В этом приложении также будут использоваться сторонние пакеты Puppeteer и Chart.js для отрисовки диаграмм и создания 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

пряжа

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

Для работы пакета puppeteer требуется запустить скрипт для загрузки браузера Chromium. Ваш менеджер пакетов может запросить подтверждение, поэтому обязательно подтвердите запуск скрипта, когда появится соответствующий запрос.

Настройте свой API-ключ

Установите переменную среды GOOGLE_GENERATIVE_AI_API_KEY указав в ней свой API-ключ Gemini. Google Generative AI Provider автоматически найдет ваш API-ключ в этой переменной среды.

MacOS/Linux

export GOOGLE_GENERATIVE_AI_API_KEY="YOUR_API_KEY_HERE"

PowerShell

setx GOOGLE_GENERATIVE_AI_API_KEY "YOUR_API_KEY_HERE"

Создайте своё приложение

Теперь давайте создадим основной файл для нашего приложения. Создайте новый файл с именем main.ts в каталоге вашего проекта. В этом файле вы будете шаг за шагом реализовывать логику.

Для быстрой проверки правильности настройки добавьте следующий код в main.ts В этом простом примере используется generateText для получения простого ответа от Gemini.

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

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

  console.log(text);
}

main().catch(console.error);

Прежде чем усложнять задачу, запустите этот скрипт, чтобы убедиться в правильности настройки вашей среды. Выполните следующую команду в терминале:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

пряжа

yarn tsc && node main.js

Если всё настроено правильно, вы увидите ответ Gemini, выведенный в консоль.

Проведите исследование рынка с помощью поиска Google.

Чтобы получать актуальную информацию, вы можете включить инструмент поиска Google для Близнецов. Когда этот инструмент активен, модель сможет искать в интернете ответы на заданный вопрос и выдаст использованные источники.

Замените содержимое файла main.ts следующим кодом, чтобы выполнить первый шаг нашего анализа.

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-3-flash-preview"),
    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);

Извлечение данных диаграммы

Далее обработаем исследовательский текст, чтобы извлечь структурированные данные, подходящие для построения диаграмм. Используйте функцию generateObject из AI SDK вместе со схемой zod для определения точной структуры данных.

Также создайте вспомогательную функцию для преобразования этих структурированных данных в конфигурацию, понятную Chart.js .

Добавьте следующий код в main.ts Обратите внимание на новые импорты и добавленный "Шаг 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-3-flash-preview"),
    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-3-flash-preview"),
    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);

Составьте итоговый отчет

На заключительном этапе поручите Gemini выступить в роли эксперта по составлению отчетов. Предоставьте ему результаты исследования рынка, конфигурацию диаграмм и четкие инструкции по созданию HTML-отчета. Затем используйте Puppeteer для рендеринга этого HTML-кода и сохранения его в формате PDF.

Добавьте в файл main.ts заключительный импорт puppeteer и "Шаг 3".

// ... (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-3-flash-preview"),
    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);

Запустите приложение

Теперь вы готовы запустить приложение. Выполните следующую команду в терминале:

npm

npx tsc && node main.js

pnpm

pnpm tsx main.ts

пряжа

yarn tsc && node main.js

В терминале вы будете видеть сообщения, отображаемые по мере выполнения скриптом каждого шага. После завершения в каталоге вашего проекта будет создан файл report.pdf , содержащий анализ рынка.

Ниже вы увидите первые две страницы примера PDF-отчета:

Отчет об анализе рынка

Дополнительные ресурсы

Для получения дополнительной информации о разработке с использованием Gemini и AI SDK ознакомьтесь с этими ресурсами: